From 25cd0987dab212f04c28952157a7b282846ff7e7 Mon Sep 17 00:00:00 2001
From: bobarna <barnabas.borcsok@gmail.com>
Date: Wed, 23 Sep 2020 17:37:19 +0200
Subject: [PATCH] =?UTF-8?q?M=C3=A1sodik=20tanfolyam=20alkalom=20v=C3=A9ger?=
 =?UTF-8?q?edm=C3=A9nye?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html | 25 ++++--------------
 script.js  | 76 ++++++++++++++++++++++++++++++++++++++++++++++++++++++
 style.css  |  1 +
 3 files changed, 82 insertions(+), 20 deletions(-)
 create mode 100644 script.js

diff --git a/index.html b/index.html
index 1a42848..fe6e725 100644
--- a/index.html
+++ b/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
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..cb3e5d2
--- /dev/null
+++ b/script.js
@@ -0,0 +1,76 @@
+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
diff --git a/style.css b/style.css
index 41790fc..e27d197 100644
--- a/style.css
+++ b/style.css
@@ -125,4 +125,5 @@ body {
 
 .completed {
     text-decoration: line-through;
+    filter: brightness(0.6);
 }
\ No newline at end of file
-- 
GitLab