2 changed files with 78 additions and 0 deletions
Unified View
Diff Options
+ 77
- 0
packages/example-web/index.html
View File
| @@ -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> | |||||
+ 1
- 0
packages/example-web/numerica.js
View File
| @@ -0,0 +1 @@ | |||||
| ../core/dist/esm/production/index.js | |||||