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>