From daa6278f3557273b9f04b95859fff829bb0b804d Mon Sep 17 00:00:00 2001
From: TheoryOfNekomata <allan.crisostomo@outlook.com>
Date: Tue, 15 Aug 2023 13:19:47 +0800
Subject: [PATCH] Add example

Provide a basic example page.
---
 packages/example-web/index.html  | 77 ++++++++++++++++++++++++++++++++
 packages/example-web/numerica.js |  1 +
 2 files changed, 78 insertions(+)
 create mode 100644 packages/example-web/index.html
 create mode 120000 packages/example-web/numerica.js
diff --git a/packages/example-web/index.html b/packages/example-web/index.html
new file mode 100644
index 0000000..c2b08d9
--- /dev/null
+++ b/packages/example-web/index.html
@@ -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>
diff --git a/packages/example-web/numerica.js b/packages/example-web/numerica.js
new file mode 120000
index 0000000..167b61b
--- /dev/null
+++ b/packages/example-web/numerica.js
@@ -0,0 +1 @@
+../core/dist/esm/production/index.js
\ No newline at end of file
