Update example page

Make placeholders responsive.

packages/example-web/index.html

@@ -42,7 +42,7 @@
 				flex: auto;
 				width: 100%;
 				height: 0;
-				font-size: 2rem;
+				font-size: 1.5rem;
 				padding: 1rem;
 				border: 0;
 				outline: 0;
@@ -111,12 +111,12 @@
 				</div>
 			</fieldset>
 			<div>
-				<textarea aria-label="Number" name="number" placeholder="123"></textarea>
-				<textarea aria-label="Name" name="name" placeholder="one hundred twenty three"></textarea>
+				<textarea aria-label="Number" name="number" placeholder="1234"></textarea>
+				<textarea aria-label="Name" name="name" placeholder="one thousand&#x0A;two hundred thirty-four"></textarea>
 			</div>
 		</form>
 		<script type="module">
-			import { stringify, parse } from './numerica.js';
+			import { stringify, parse, systems } from './numerica.js';
 
 			function MainForm(el) {
 				const numberInput = el.querySelector('[name="number"]');
@@ -127,6 +127,7 @@
 
 				const options = {
 					stringify: {
+						system: systems.enUS.shortCount,
 						makeGroupOptions: {
 							shortenMillia: false,
 							addTensDashes: true,
@@ -136,8 +137,13 @@
 						},
 					},
 					parse: {
+						system: systems.enUS.shortCount,
 						type: 'bigint',
-					}
+					},
+				};
+
+				const createNamePlaceholder = (theOptions) => {
+					return stringify(1234, theOptions.stringify);
 				};
 
 				numberInput.addEventListener('input', (e) => {
@@ -148,7 +154,8 @@
 					}
 					try {
 						nameInput.value = stringify(e.currentTarget.value, options.stringify);
-					} catch {
+					} catch (err) {
+						console.error(err);
 						e.currentTarget.setCustomValidity('Invalid number.');
 					}
 				});
@@ -163,7 +170,8 @@
 						numberInput.value = parse(e.currentTarget.value, options.parse)
 							.toString();
 						// TODO group digits function from system.
-					} catch {
+					} catch (err) {
+						console.error(err);
 						e.currentTarget.setCustomValidity('Invalid name.');
 					}
 				});
@@ -171,17 +179,22 @@
 				addTensDashesCheckbox.addEventListener('change', (e) => {
 					options.stringify.makeGroupOptions.addTensDashes = e.currentTarget.checked;
 					numberInput.dispatchEvent(new Event('input'));
+					nameInput.placeholder = createNamePlaceholder(options);
 				});
 
 				shortenMilliaCheckbox.addEventListener('change', (e) => {
 					options.stringify.makeGroupOptions.shortenMillia = e.currentTarget.checked;
 					numberInput.dispatchEvent(new Event('input'));
+					nameInput.placeholder = createNamePlaceholder(options);
 				});
 
 				oneGroupPerLineCheckbox.addEventListener('change', (e) => {
 					options.stringify.finalizeOptions.oneGroupPerLine = e.currentTarget.checked;
 					numberInput.dispatchEvent(new Event('input'));
+					nameInput.placeholder = createNamePlaceholder(options);
 				});
+
+				nameInput.placeholder = createNamePlaceholder(options);
 			}
 			const mainForm = window.document.getElementById('mainForm');
 			new MainForm(mainForm);