|
|
|
@@ -0,0 +1,77 @@ |
|
|
|
<!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> |
