PlugFox/index.html

## index.html
<html>
<head>
    <title>Playground</title>
    <link rel="stylesheet" type="text/css" href="styles.css">
    <script defer src="main.dart.js" type="application/javascript"></script>
</head>
<body>
    <div id="content">
        <h1 class="center">Playground</h1>
        <h3 class="center">This is a playground for testing Dart code.</h3>
        <br>
        <form id="form" class="center">
            <p>Enter some data and click submit to see it in the output.</p>
            <label for="data">Data:</label>
            <input type="text" id="form-data" name="data" placeholder="Enter your data here">
            <button id="submit-btn" type="button">Submit</button>
            <button id="clear-btn" type="button" onclick="clearOutput()">Clear</button>
        </form>
        <ul id="output"></ul>
    </div>
</html>

## main.dart
/*
 * HTML Dartpad
 * https://gist.github.com/PlugFox/6a8de7162811f08ad8c0add0484e4004
 * https://dartpad.dev?id=6a8de7162811f08ad8c0add0484e4004
 * Matiunin Mikhail <plugfox@gmail.com>, 20 December 2023
 */

// ignore_for_file: avoid_print, avoid_web_libraries_in_flutter

@JS()
library main;

import 'dart:async';
import 'dart:convert';
import 'dart:html' as html;

import 'package:js/js.dart';

// dart pub global activate webdev
// webdev serve --debug
// webdev serve --debug-extension
void main() {
  _clearOutput = allowInterop(_clearOutputHandler);
  _setUpFormHandler();
}

void _setUpFormHandler() {
  final form = html.document.querySelector('form#form');
  if (form is! html.FormElement) {
    form?.remove();
    return;
  }
  form
    ..querySelector('button#submit-btn')?.setAttribute('type', 'submit')
    ..onSubmit.listen((event) {
      event.preventDefault();
      final data = html.FormData(form).get('data');
      html.window.console.info(data);
      if (data is! String || data.isEmpty) {
        html.window.alert('No data');
        return;
      }
      form.reset();
      Timer(Duration.zero, () {
        form.querySelector('button#submit-btn')?.focus();
        Object? json;
        try {
          json = jsonDecode(data);
        } on Object {
          json = null;
        }
        final now = DateTime.now();
        final type = switch (json) {
          Map<String, Object?> _ => 'Map',
          List<Object?> _ => 'List',
          num _ => 'Number',
          String _ => 'String',
          bool _ => 'Boolean',
          null => 'Null',
          _ => 'Json',
        };
        form.querySelector('button#submit-btn')?.focus();
        html.document.getElementById('output')?.append(
              html.LIElement()
                ..append(
                  html.ParagraphElement()
                    ..text = '$type:'
                        '${now.minute.toString().padLeft(2, '0')}:'
                        '${now.second.toString().padLeft(2, '0')})',
                )
                ..append(
                  html.PreElement()
                    ..text = const JsonEncoder.withIndent('  ').convert(json),
                ),
            );
      });
    });
}

@JS('clearOutput')
external set _clearOutput(void Function() f);
@JS()
external void clearOutput();
void _clearOutputHandler() {
  //html.window.console.info('clearOutput()');
  final form = html.document.querySelector('form#form');
  final output = html.document.getElementById('output');
  output?.children.clear();
  if (form is html.FormElement) form.reset();
}

## styles.css
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
    color: #333;
    margin: 0;
    padding: 16px;
}

.center {
    text-align: center;
}

h1, h2, h3 {
    font-family: "Trebuchet MS", sans-serif;
    color: #666;
    margin: 0;
    padding: 0;
}

h1 {
    font-size: 2em;
}

h2 {
    font-size: 1.5em;
}

h3 {
    font-size: 1.2em;
}

a {
    color: #000;
}

a:hover {
    text-decoration: none;
}

a:visited {
    color: #666;
}

a:visited:hover {
    text-decoration: none;
}

#header {
    background-color: #fff;
    border-bottom: 1px solid #ccc;
    padding: 16px;
}

#content {
    display: block;
    background-color: #fff;
    padding: 16px;
    border: 2px solid #ccc;
    border-radius: 16px;
}
	<html>
	<head>
	<title>Playground</title>
	<link rel="stylesheet" type="text/css" href="styles.css">
	<script defer src="main.dart.js" type="application/javascript"></script>
	</head>
	<body>
	<div id="content">
	<h1 class="center">Playground</h1>
	<h3 class="center">This is a playground for testing Dart code.</h3>
	<br>
	<form id="form" class="center">
	<p>Enter some data and click submit to see it in the output.</p>
	<label for="data">Data:</label>
	<input type="text" id="form-data" name="data" placeholder="Enter your data here">
	<button id="submit-btn" type="button">Submit</button>
	<button id="clear-btn" type="button" onclick="clearOutput()">Clear</button>
	</form>
	<ul id="output"></ul>
	</div>
	</html>
	/*
	* HTML Dartpad
	* https://gist.github.com/PlugFox/6a8de7162811f08ad8c0add0484e4004
	* https://dartpad.dev?id=6a8de7162811f08ad8c0add0484e4004
	* Matiunin Mikhail <plugfox@gmail.com>, 20 December 2023
	*/

	// ignore_for_file: avoid_print, avoid_web_libraries_in_flutter

	@JS()
	library main;

	import 'dart:async';
	import 'dart:convert';
	import 'dart:html' as html;

	import 'package:js/js.dart';

	// dart pub global activate webdev
	// webdev serve --debug
	// webdev serve --debug-extension
	void main() {
	_clearOutput = allowInterop(_clearOutputHandler);
	_setUpFormHandler();
	}

	void _setUpFormHandler() {
	final form = html.document.querySelector('form#form');
	if (form is! html.FormElement) {
	form?.remove();
	return;
	}
	form
	..querySelector('button#submit-btn')?.setAttribute('type', 'submit')
	..onSubmit.listen((event) {
	event.preventDefault();
	final data = html.FormData(form).get('data');
	html.window.console.info(data);
	if (data is! String \|\| data.isEmpty) {
	html.window.alert('No data');
	return;
	}
	form.reset();
	Timer(Duration.zero, () {
	form.querySelector('button#submit-btn')?.focus();
	Object? json;
	try {
	json = jsonDecode(data);
	} on Object {
	json = null;
	}
	final now = DateTime.now();
	final type = switch (json) {
	Map<String, Object?> _ => 'Map',
	List<Object?> _ => 'List',
	num _ => 'Number',
	String _ => 'String',
	bool _ => 'Boolean',
	null => 'Null',
	_ => 'Json',
	};
	form.querySelector('button#submit-btn')?.focus();
	html.document.getElementById('output')?.append(
	html.LIElement()
	..append(
	html.ParagraphElement()
	..text = '$type:'
	'${now.minute.toString().padLeft(2, '0')}:'
	'${now.second.toString().padLeft(2, '0')})',
	)
	..append(
	html.PreElement()
	..text = const JsonEncoder.withIndent(' ').convert(json),
	),
	);
	});
	});
	}

	@JS('clearOutput')
	external set _clearOutput(void Function() f);
	@JS()
	external void clearOutput();
	void _clearOutputHandler() {
	//html.window.console.info('clearOutput()');
	final form = html.document.querySelector('form#form');
	final output = html.document.getElementById('output');
	output?.children.clear();
	if (form is html.FormElement) form.reset();
	}
	body {
	background-color: #f0f0f0;
	font-family: Arial, sans-serif;
	color: #333;
	margin: 0;
	padding: 16px;
	}

	.center {
	text-align: center;
	}

	h1, h2, h3 {
	font-family: "Trebuchet MS", sans-serif;
	color: #666;
	margin: 0;
	padding: 0;
	}

	h1 {
	font-size: 2em;
	}

	h2 {
	font-size: 1.5em;
	}

	h3 {
	font-size: 1.2em;
	}

	a {
	color: #000;
	}

	a:hover {
	text-decoration: none;
	}

	a:visited {
	color: #666;
	}

	a:visited:hover {
	text-decoration: none;
	}

	#header {
	background-color: #fff;
	border-bottom: 1px solid #ccc;
	padding: 16px;
	}

	#content {
	display: block;
	background-color: #fff;
	padding: 16px;
	border: 2px solid #ccc;
	border-radius: 16px;
	}