Második tanfolyam alkalom végeredménye

index.html

@@ -18,12 +18,13 @@
         </div>
 
         <div id="todo-header">
-            <input type="text">
-            <button>+</button>
+            <input type="text" id="task-input">
+            <button id="add-task">+</button>
         </div>
 
         <div id="todo-list">
             <ul id="tasks">
+                <!--
                 <li class="task">
                     <input type="checkbox" id="task0">
                     <label for="task0">
@@ -33,26 +34,10 @@
                         <i class="fa fa-trash fa-lg" aria-hidden="true"></i>
                     </button>
                 </li>
-                <li class="task completed">
-                    <input type="checkbox" id="task0">
-                    <label for="task0">
-                        Már elkészített tennivaló
-                    </label>
-                    <button>
-                        <i class="fa fa-trash fa-lg" aria-hidden="true"></i>
-                    </button>
-                </li>
-                <li class="task">
-                    <input type="checkbox" id="task0">
-                    <label for="task0">
-                        Megírni ötösre a ZH-t.
-                    </label>
-                    <button>
-                        <i class="fa fa-trash fa-lg" aria-hidden="true"></i>
-                    </button>
-                </li>
+                -->
             </ul>
         </div>
     </div>
+    <script src="script.js"></script>
 </body>
 </html>
\ No newline at end of file

script.js

+indexNum = 0;
+
+addBtn = document.getElementById("add-task");
+taskList = document.getElementById("tasks");
+taskInput = document.getElementById("task-input");
+warning = document.getElementById("warning");
+
+addBtn.onclick = addTask;
+
+taskInput.addEventListener("keyup", function (event) {
+    if (event.keyCode == 13) addTask();
+});
+
+if(typeof(Storage) !== "undefined") {
+    if (localStorage.todos) {
+        taskList.innerHTML = localStorage.todos;
+        indexNum = localStorage.indexNum;
+    }
+} else {
+    console.log("Sorry, your browser does not support web storage...");
+}
+
+function addTask() {
+    currInput = taskInput.value;
+
+    if (currInput.replace(/\s*/, "") == "") {
+        warning.style.display = "block";
+        return;
+    }
+    warning.style.display = "none";
+
+    taskLi = document.createElement("li");
+    taskLi.setAttribute("class", "task");
+
+    taskCheckbox = document.createElement("input");
+    taskCheckbox.setAttribute("type", "checkbox");
+    taskCheckbox.setAttribute("id", "task" + indexNum);
+
+    taskText = document.createElement("label");
+    taskText.setAttribute("for", "task" + indexNum);
+    taskText.innerText = currInput;
+    taskText.setAttribute("onclick", "toggleTask(this)");
+
+    taskBtn = document.createElement("button");
+    taskBtn.setAttribute("id", "bin" + indexNum);
+    taskBtn.setAttribute("onclick", "removeTask(this)");
+
+    trashIcon = document.createElement("i");
+    trashIcon.classList.add("fa", "fa-trash", "fa-lg");
+
+    taskBtn.appendChild(trashIcon);
+
+    taskLi.appendChild(taskCheckbox);
+    taskLi.appendChild(taskText);
+    taskLi.appendChild(taskBtn);
+
+    taskList.appendChild(taskLi);
+
+    taskInput.value = "";
+    indexNum++;
+
+    localStorage.todos = taskList.innerHTML;
+    localStorage.indexNum;
+}
+
+function removeTask(task) {
+    taskList.removeChild(task.parentElement);
+    indexNum--;
+
+    localStorage.todos = taskList.innerHTML;
+    localStorage.indexNum = indexNum;
+}
+
+function toggleTask(task) {
+    task.classList.toggle("completed");
+}
\ No newline at end of file

style.css

@@ -125,4 +125,5 @@ body {
 
 .completed {
     text-decoration: line-through;
+    filter: brightness(0.6);
 }
\ No newline at end of file