Rework demo.

RillingDev · Mar 15, 2021 · d6382cc · d6382cc
1 parent 86a47b1
commit d6382cc
Show file tree

Hide file tree

Showing 8 changed files with 249 additions and 239 deletions.
diff --git a/demo/demo_1/index.html b/demo/demo_1/index.html
diff --git a/demo/demo_1/index.js b/demo/demo_1/index.js
diff --git a/demo/demo_2/index.html b/demo/demo_2/index.html
diff --git a/demo/demo_2/index.js b/demo/demo_2/index.js
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,91 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8">
+    <title>OkJS Demo</title>
+    <meta name="description" content="OkJS Demo">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <style>
+        /** @formatter:off **/
+        /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
+        /** @formatter:on **/
+    </style>
+    <style>
+        /**
+         * Base
+         */
+        body {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            font-family: "sans-serif";
+        }
+
+        .container {
+            padding-left: 1rem;
+            padding-right: 1rem;
+        }
+
+        section {
+            padding: 0 1rem;
+        }
+
+        /**
+         * Inputs
+         */
+        .form {
+            padding: 1rem;
+            border: 1px solid #bbb;
+        }
+
+        .form-group {
+            margin-bottom: 0.75rem;
+        }
+    </style>
+</head>
+
+<body>
+<div class="container">
+    <section>
+        <h1>Demo 1</h1>
+        <form class="form">
+            <div class="form-group">
+                <label for="inputNameFirst">First Name (only "Dave" allowed)</label>
+                <input type="text" id="inputNameFirst" placeholder="Enter First Name" required
+                       data-ok="nameFirst">
+            </div>
+            <div class="form-group">
+                <label for="inputNameLast">Last Name (not validated, anything goes)</label>
+                <input type="text" id="inputNameLast" placeholder="Enter Last Name" required>
+            </div>
+            <div class="form-group">
+                <label for="inputMail">Email address (only ".de" allowed)</label>
+                <input type="email" id="inputMail" placeholder="Enter email" required
+                       data-ok="emailDe">
+            </div>
+            <input type="submit">
+        </form>
+        <script type="module">
+            import { Ok } from "./dist/ok.esm.js";
+
+            const ok = new Ok({
+                nameFirst: {
+                    msg: "Only 'Dave' allowed",
+                    fn: val => val === "Dave"
+                },
+                emailDe: {
+                    msg: (val) => `Please input your .de email (You entered '${val}')`,
+                    fn: (val, element, e) => val.endsWith(".de")
+                }
+            });
+
+            ok.bind(document.querySelector("#inputNameFirst"));
+            ok.bind(document.querySelector("#inputMail"));
+
+        </script>
+    </section>
+</div>
+</body>
+
+</html>