<!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>