review examples

marcodpt · Nov 18, 2024 · 78b22bd · 78b22bd
1 parent 4609ea4
commit 78b22bd
Show file tree

Hide file tree

Showing 11 changed files with 65 additions and 53 deletions.
diff --git a/examples/convert.html b/examples/convert.html
@@ -10,7 +10,7 @@
   </head>
   <body>
     <h1>
-      <img src="../favicon.ico">
+      <a href=".."><img src="../favicon.ico"></a>
       Convert HTML to Hyperscript
     </h1>
     <div id="input">

diff --git a/examples/counter.html b/examples/counter.html
@@ -9,6 +9,34 @@
     <title>Counter - Hammer</title>
   </head>
   <body>
-    <script type="module" src="./counter.js"></script>
+    <h1>
+      <a href=".."><img src="../favicon.ico"></a>
+      Counter: <span>0</span>
+    </h1>
+    <script type="module">
+      import {dom} from "../index.js"
+
+      document.body.appendChild(dom(({button, text}) =>
+        button({
+          onclick: ev => {
+            const el = document.body.querySelector('span')
+            el.textContent = parseInt(el.textContent) - 1
+          }
+        }, [
+          text('-')
+        ])
+      ))
+
+      document.body.appendChild(dom(({button, text}) =>
+        button({
+          onclick: ev => {
+            const el = document.body.querySelector('span')
+            el.textContent = parseInt(el.textContent) + 1
+          }
+        }, [
+          text('+')
+        ])
+      ))
+    </script>
   </body>
 </html>
diff --git a/examples/counter.js b/examples/counter.js
diff --git a/examples/debug.html b/examples/debug.html
@@ -10,11 +10,11 @@
   </head>
   <body>
     <h1>
-      <img src="../favicon.ico">
+      <a href=".."><img src="../favicon.ico"></a>
       To do list (Debug mode!)
     </h1>
     <input type="text">
-    <pre><code></code></pre>
+    <pre><code style="display: none"></code></pre>
     <button onclick="addTodo(this)">
       New!
     </button>
@@ -24,6 +24,7 @@ <h1>
       window.addTodo = btn => {
         const input = document.body.querySelector('input')
         const code = document.body.querySelector('code')
+        code.setAttribute('style', '')
 
         code.textContent += (code.textContent ? '\n\n' : '')+
           JSON.stringify(debug(({li, text}) => li({}, [

diff --git a/examples/format.html b/examples/format.html
@@ -10,7 +10,7 @@
   </head>
   <body>
     <h1>
-      <img src="../favicon.ico">
+      <a href=".."><img src="../favicon.ico"></a>
       Format HTML
     </h1>
     <div id="input">

diff --git a/examples/hyperapp.html b/examples/hyperapp.html
@@ -10,7 +10,7 @@
   </head>
   <body>
     <h1>
-      <img src="../favicon.ico">
+      <a href=".."><img src="../favicon.ico"></a>
       <a href="https://github.com/jorgebucaran/hyperapp">Hyperapp</a>
     </h1>
     <main id="app"></main>

diff --git a/examples/superfine.html b/examples/superfine.html
@@ -10,9 +10,8 @@
   </head>
   <body>
     <h1>
-      <img src="../favicon.ico">
+      <a href=".."><img src="../favicon.ico"></a>
       <a href="https://github.com/jorgebucaran/superfine">Superfine</a>
-      Counter
     </h1>
     <main id="app"></main>
     <script type="module" src="./superfine_counter.js"></script>

diff --git a/examples/superfine_counter.js b/examples/superfine_counter.js
@@ -4,7 +4,7 @@ const setState = state => superfine(
   document.getElementById("app"),
   ({main, h1, button, text}) => main({}, [
     h1({}, [
-      text(state)
+      text('Counter: '+String(state))
     ]),
     button({
       onclick: () => setState(state - 1)

diff --git a/examples/template.html b/examples/template.html
@@ -10,7 +10,7 @@
   </head>
   <body>
     <h1>
-      <img src="../favicon.ico">
+      <a href=".."><img src="../favicon.ico"></a>
       To do list (text based!)
     </h1>
     <input type="text">

diff --git a/examples/todo.html b/examples/todo.html
@@ -9,6 +9,32 @@
     <title>Todo - Hammer</title>
   </head>
   <body>
-    <script type="module" src="./todo.js"></script>
+    <h1>
+      <a href=".."><img src="../favicon.ico"></a>
+      To do list
+    </h1>
+    <input type="text">
+    <ul></ul>
+    <script type="module">
+      import {dom} from "../index.js"
+
+      document.body.appendChild(dom(({
+        button, li, text
+      }) => 
+        button({
+          onclick: ev => {
+            const input = document.body.querySelector('input')
+            document.body.querySelector('ul').appendChild(
+              li({}, [
+                text(input.value)
+              ])
+            )
+            input.value = ""
+          }
+        }, [
+          text('New!')
+        ])
+      ))
+    </script>
   </body>
 </html>
diff --git a/examples/todo.js b/examples/todo.js
@@ -4,15 +4,6 @@ document.body.appendChild(dom(({
   main, h1, img, input, ul, li, button, text
 }) => 
   main({}, [
-    h1({}, [
-      img({
-        src: '../favicon.ico'
-      }),
-      text(' To do list')
-    ]),
-    input({
-      type: 'text'
-    }),
     ul(),
     button({
       onclick: ev => {