Delete task List

2021-12-03 14:49:51 +05:30
parent 3a3832dd13
commit dc7c7f1160
1 changed files with 0 additions and 79 deletions
@@ -1,79 +0,0 @@
 <!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();
                buildTasks();
            }
        }
    </script>
 </body>
 </html>