improve the logic to add new text on list

Author: simoneas02

apps/localStorage-and-event-delegation/assets/script/index.js

@@ -1,21 +1,32 @@
-const form = document.querySelector('.form');
-let list = document.querySelector('.list');
-const input = document.querySelector('.form__input');
-let items = [];
+const addItems = document.querySelector('.form');
+const itemsList = document.querySelector('.list');
 
-const addItems = e => {
+const addItem = e => {
   e.preventDefault();
-  let input = document.querySelector('.form__input');
-  items = [...items, input.value];
+  const text = getInputValue();
+  const element = createElement(text);
 
-  createElement(items);
+  itemsList.insertAdjacentHTML('beforeend', element);
 
-  input.value = '';
+  e.target.reset();
 };
 
-const createElement = items =>
-  items.map(
-    (value, index) => `<li><label for="item${index}">${value}</label></li>`
-  );
+const getInputValue = () => {
+  const text = document.querySelector('.form__input').value;
+  const item = {
+    text,
+    done: false
+  };
+  return item;
+};
+
+const createElement = item => `
+        <li class="list__item">
+          <input class="list__item__checkbox" name="item" type="checkbox" ${
+            item.done ? 'checked' : ''
+          } />
+          <label for="item">${item.text}</label>
+        </li>
+      `;
 
-addEventListener('submit', addItems);
+addItems.addEventListener('submit', addItem);

apps/localStorage-and-event-delegation/index.html

@@ -11,12 +11,12 @@
       rel="stylesheet"
       href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
     />
-    <link rel="stylesheet" href="./assets/style/index.css" />
     <link
       href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400,700"
       rel="stylesheet"
     />
 
+    <link rel="stylesheet" href="./assets/style/index.css" />
     <link rel="icon" href="./assets/img/favicon.png" />
 
     <!-- More tags -->
@@ -67,11 +67,11 @@ <h1 class="content__title">Fancy foods</h1>
 
         <ul class="list">
           <li class="list__item">
-            <input class="list__item__checkbox " type="checkbox" />
+            <input class="list__item__checkbox" name="item" type="checkbox" />
             <label for="item">Beef Bourguignon</label>
           </li>
           <li class="list__item">
-            <input class="list__item__checkbox " type="checkbox" />
+            <input class="list__item__checkbox" name="item" type="checkbox" />
             <label for="item">Salad Nicoise</label>
           </li>
         </ul>