Create task List

2021-07-02 12:31:02 -04:00 · 2021-07-02 12:31:02 -04:00 · 868de89374
commit 868de89374
parent 019cd5bbd9
1 changed files with 77 additions and 0 deletions
--- a/13/task
+++ b/13/task
@ -0,0 +1,77 @@
+<!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();
+            }
+        }
+    </script>
+</body>
+</html>