modal-soft
/
numerica

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>@modal-sh/numerica-core</title>
		<style>
			.main-form {
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: stretch;
			}

			.main-form > textarea {
				flex: auto;
				width: 100%;
				height: 0;
				font-size: 2rem;
				padding: 1rem;
				border: 0;
				outline: 0;
				resize: none;
				box-sizing: border-box;
			}

			@media (min-width: 1080px) {
				.main-form {
					flex-direction: row;
				}

				.main-form > textarea {
					width: 0;
					height: 100%;
				}
			}
		</style>
	</head>
	<body>
		<form id="mainForm">
			<textarea aria-label="Number" name="number" placeholder="123"></textarea>
			<textarea aria-label="Name" name="name" placeholder="one hundred twenty three"></textarea>
		</form>
		<script type="module">
			import { stringify, parse } from './numerica.js';

			function MainForm(el) {
				const numberInput = el.querySelector('[name="number"]');
				const nameInput = el.querySelector('[name="name"]');

				numberInput.addEventListener('input', (e) => {
					nameInput.value = '';
					if (e.currentTarget.value === '') {
						return;
					}
					nameInput.value = stringify(e.currentTarget.value);
				});

				nameInput.addEventListener('input', (e) => {
					numberInput.value = '';
					if (e.currentTarget.value === '') {
						return;
					}
					numberInput.value = Number(parse(e.currentTarget.value)).toString();
				});

				el.classList.add('main-form');
			}

			const mainForm = window.document.getElementById('mainForm');
			new MainForm(mainForm);
		</script>
	</body>
</html>