From 8ea78c6145371948e905c775eec24525f00ff44f Mon Sep 17 00:00:00 2001
From: LSvekis <lassvekis@gmail.com>
Date: Fri, 2 Jul 2021 12:03:58 -0400
Subject: [PATCH] Create task List

---
 chapter 13/task List | 79 ++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 79 insertions(+)
 create mode 100644 chapter 13/task List
diff --git a/chapter 13/task List b/chapter 13/task List
new file mode 100644
index 0000000..91d44dc
--- /dev/null
+++ b/chapter 13/task List	
@@ -0,0 +1,79 @@
+<!doctype html>
+<html>
+<head>
+    <title>JavaScript</title>
+    <style>
+        .ready {
+    background-color: #ddd;
+    color: red;
+    text-decoration: line-through ;
+}
+    </style>
+</head>
+<body>
+    <div class="main">
+        <input placeholder="New Item" value="test item" maxlength="30">
+        <button>Add</button>
+    </div>
+    <ul class="output">
+    </ul>
+    <script>
+        const userTask = document.querySelector('.main input');
+        const addBtn = document.querySelector('.main button');
+        const output = document.querySelector('.output');
+        const tasks = JSON.parse(localStorage.getItem('tasklist')) || [];
+        addBtn.addEventListener('click', createListItem);
+        if (tasks.length > 0) {
+            tasks.forEach((task) => {
+                genItem(task.val, task.checked);
+            })
+        }
+        function saveTasks() {
+            localStorage.setItem('tasklist', JSON.stringify(tasks));
+          
+        }
+        function buildTasks() {
+            tasks.length = 0;
+            const curList = output.querySelectorAll('li');
+            curList.forEach((el) => {
+                const tempTask = {
+                    val: el.textContent,
+                    checked: false
+                };
+                if (el.classList.contains('ready')) {
+                    tempTask.checked = true;
+                }
+                tasks.push(tempTask);
+            })
+            saveTasks();
+        }
+        function genItem(val, complete) {
+            const li = document.createElement('li');
+            const temp = document.createTextNode(val);
+            li.appendChild(temp);
+            output.append(li);
+            userTask.value = '';
+            if (complete) {
+                li.classList.add('ready');
+            }
+            li.addEventListener('click', (e) => {
+                li.classList.toggle('ready');
+                buildTasks();
+            })
+            return val;
+        }
+        function createListItem() {
+            const val = userTask.value;
+            if (val.length > 0) {
+                const myObj = {
+                    val: genItem(val, false),
+                    checked: false
+                };
+                tasks.push(myObj);
+                saveTasks();
+                buildTasks();
+            }
+        }
+    </script>
+</body>
+</html>
