add todo.html

3 years ago · f858d60f34
1 changed files with 48 additions and 0 deletions
--- a/todo.html
+++ b/todo.html
@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>TODO</title>
+</head>
+<body>
+    <h1>JS ToDo App</h1>
+
+    <textarea id="todoitem"></textarea>
+    <button id="todobtn" onclick="additem()">Zapsat</button>
+
+    <ul id="todolist">
+    </ul>
+
+    <script>
+    let todoarray = [];
+    
+    function additem() {
+        let text = document.getElementById("todoitem").value;
+        //document.getElementById("todolist").innerHTML += '<li>'+ text +'</li>';
+        if(text.trim() == ""){return;}
+
+        todoarray.push(text);
+        console.log(todoarray);
+        //vygenerování listu
+        document.getElementById("todolist").innerHTML ="";
+        todoarray.forEach(createlist);
+    }
+    //funkce pro *forEach* metodu - value=text a index=umístění 
+    function createlist(value, index) {
+        document.getElementById("todolist").innerHTML += '<li>'+ value + '<button onclick="removeitem('+index+')">DELETE</button></li>';
+    }                                                                    //<button onclick="removeitem(1)">DELETE</button></li>
+    
+    function removeitem(index) {
+        todoarray.splice(index,1);
+        //vygenerovani listu
+        document.getElementById("todolist").innerHTML ="";
+        todoarray.forEach(createlist);
+    }
+
+
+    </script>
+
+</body>
+</html>