From 5a6d3b15acc4f87abdfd4ae6dd8e30143658c9f9 Mon Sep 17 00:00:00 2001
From: didier amyot <didier.amyot@gmail.com>
Date: Wed, 17 Jan 2024 18:44:54 -0500
Subject: [PATCH] added examples

---
 color-picker/index.html    | 14 ++++++++++++++
 mithril-example/index.html |  2 ++
 mithril-example/main.js    | 23 ++++++++++++++++++++++-
 3 files changed, 38 insertions(+), 1 deletion(-)
 create mode 100644 color-picker/index.html

diff --git a/color-picker/index.html b/color-picker/index.html
new file mode 100644
index 0000000..ca98f8e
--- /dev/null
+++ b/color-picker/index.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport"
+          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+</head>
+<body>
+<h1>Hello world</h1>
+<label>quelle couleur? <input type="color"> </label>
+</body>
+</html>
\ No newline at end of file
diff --git a/mithril-example/index.html b/mithril-example/index.html
index 87f4c8f..f024493 100644
--- a/mithril-example/index.html
+++ b/mithril-example/index.html
@@ -17,5 +17,7 @@
 
 <div id="example-3"></div>
 
+<div id="example-4"></div>
+
 </body>
 </html>
\ No newline at end of file
diff --git a/mithril-example/main.js b/mithril-example/main.js
index 245ca4e..3e3daa2 100644
--- a/mithril-example/main.js
+++ b/mithril-example/main.js
@@ -1,4 +1,4 @@
-import m from "https://esm.sh/mithril@2.2.2"
+import m from "https://esm.sh/mithril@2.2.2";
 
 function example1(){
     let div1 = m("b", {style: "font-family: monospace;"}, "didier");
@@ -26,3 +26,24 @@ function example3(){
 }
 
 m.render(document.getElementById("example-3"), example3());
+
+function exemple4(){
+    const subList = m("ol",
+        m("li", "unos"),
+        m("li", "dos"),
+        m("li", "tres"));
+    const lst = m("ul",
+        m("li", "un"),
+        m("li", "deux"),
+        m("li", subList));
+
+    const form = m("form",
+        m("label", "X: ", m("input", {type: "text"})),
+        m("label", "Y: ", m("input", {type: "text"})),
+        m("button", "envoyer!")
+        );
+    return m("div", lst, form);
+}
+
+const root = document.getElementById("example-4")
+m.render(root, exemple4());