todo.js

// // LECTURE: Whuile Loop and Create text Node // //

//  var h = document.createElement('h1')
//  var myValue = document.createTextNode('Hello World!')
//  h.appendChild(myValue)
//  document.querySelector('h1').appendChild(h);

// let val = 5;

// while (val > 0) {
//     console.log(val);
//     val--;
    
// }



// // LECTURE: Removing done TODOs and Assignment // //

var ul = document.getElementById('list');
var li;

var addButton = document.getElementById('add');
addButton.addEventListener('click', addItem);

var removeButton = document.getElementById('remove');
removeButton.addEventListener('click', removeItem);



function removeItem() {
    li = ul.children
    for (let index = 0; index < li.length; index++) {
        while (li[index] && li[index].children[0].checked) {
            ul.removeChild(li[index])
        }  
    }
}

// for remove everything
var removeEverything = document.getElementById('removeall');
removeEverything.addEventListener('click', () => ul.remove())

// // LECTURE: Adding a TODO With Fade in // //

function addItem() {
    var input = document.getElementById('input');
    var item = input.value;
    ul = document.getElementById('list');
    var textnode = document.createTextNode(item);

    if (item === '') {
        return false;
        //Add a p tag and assign a value of "Enter your todo" 
    } else {
        li = document.createElement('li');
        var checkbox = document.createElement('input');
        checkbox.type = 'checkbox';
        checkbox.setAttribute('id', 'check');

        // create label
        var label = document.createElement('label');
        label.setAttribute('for', 'item'); //optional

        // add these elements on Web page
        ul.appendChild(label);
        li.appendChild(checkbox);
        label.appendChild(textnode);
        li.appendChild(label);
        ul.insertBefore(li, ul.childNodes[0]);
        
        setTimeout(() => {
            li.className = 'visual'
        }, 5);

        input.value = '';
    }
}