Browse Source

Add example

Provide a basic example page.
master
TheoryOfNekomata 1 year ago
parent
commit
daa6278f35
2 changed files with 78 additions and 0 deletions
  1. +77
    -0
      packages/example-web/index.html
  2. +1
    -0
      packages/example-web/numerica.js

+ 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

Loading…
Cancel
Save