From 36da8b300d106aafcbc72124a853b146a53b82b5 Mon Sep 17 00:00:00 2001
From: dotnetCarpenter <jon.ronnenberg@gmail.com>
Date: Fri, 13 Aug 2021 08:13:04 +0200
Subject: [PATCH] use more declaretive html in vanilla js example - fixes #4

---
 vanilla-app/index.html | 32 +++++++++++++-------------------
 1 file changed, 13 insertions(+), 19 deletions(-)

diff --git a/vanilla-app/index.html b/vanilla-app/index.html
index 3f7bb67..43b4616 100644
--- a/vanilla-app/index.html
+++ b/vanilla-app/index.html
@@ -10,47 +10,41 @@
 
     <ul id="todos"></ul>
 
-    <form> 
+    <!-- `return false` is equal to `event.preventDefault()` -->
+    <form onsubmit="addTodo(this.elements.todo.value); this.reset(); return false">
         <input name="todo" type="text">
         <input type="submit" value="Add Todo">
     </form>
 
-
     <script>
+        'use strict'
 
         // Get DOM elements
         const form  = document.querySelector('form');
-        const input = document.querySelector("[name='todo']");
         const todoList = document.getElementById('todos');
 
-         // Side Effects / Lifecycle
-    
+        // Side Effects / Lifecycle
+
         const existingTodos = JSON.parse(localStorage.getItem('todos')) || [];
 
         const todoData = [];
-        
+
         existingTodos.forEach(todo => {
             addTodo(todo);
         });
 
+        function createListElement(text) {
+            const li = document.createElement('li');
+            li.textContent = text; // faster and safer than .innerHTML
+            return li;
+        }
 
         function addTodo(todoText) {
             todoData.push(todoText);
-            const li = document.createElement('li')
-            li.innerHTML = todoText;
-            todoList.appendChild(li);
+            todoList.appendChild(createListElement(todoText));
             localStorage.setItem('todos', JSON.stringify(todoData));
-            input.value = ''
         }
-
-        // Events
-        form.onsubmit = (event) => {
-            event.preventDefault();
-            addTodo(input.value);
-        }
-
-
     </script>
-    
+
 </body>
 </html>