todo app

app.js

// CRITIQUE toujours dependre de l'evenement de DOMContentLoaded 
// avant de lancer une instruction qui comporte une modification ou un ajout d'elements dans le DOM
document.querySelector('.new-todo').addEventListener('keypress', function (e) {
    var key = e.keyCode;
    if (key === 13) { // 13 is enter
        
        // INTERDIT ! il faut utiliser le système de template fourni
        //var txtToDo = document.querySelector('.new-todo').value;
        //var li = document.createElement('li');
        //var div = document.createElement('div');
        //var input = document.createElement('input');
        //var label = document.createElement('label');
        //var button = document.createElement('button');

        // dangereux: ne pas dependre du dom pour obtenir un id
        var nbrDataId = fn();
        function fn(){
            var ul = document.querySelector('.todo-list');
                return ul.childElementCount+1;
        }
                
        li.setAttribute('data-id', nbrDataId);
        div.className = "view";
        input.className = "toggle";
        input.type = "checkbox";
        
        input.addEventListener("click", function(e){
            if(e.target.checked == true){
                // dangereux pour target et pour les 2 parentNode utilisés
                e.target.parentNode.parentNode.classList.add("completed");
            }else{
                 // dangereux pour target et pour les 2 parentNode utilisés
                e.target.parentNode.parentNode.classList.remove("completed");
            }
        });
        
        label.innerText = txtToDo;
        button.className = "destroy";
        
        button.addEventListener("click", function(e){
            // dangereux pour les parentNode utilisé
            var ul = e.target.parentNode.parentNode.parentNode;
            // dangereux pour les parentNode utilisé
            var li = e.target.parentNode.parentNode;
            ul.removeChild(li);
        });
        
        document.querySelector(".todo-list").appendChild(li);
        li.appendChild(div);
        div.appendChild(input);
        div.appendChild(label);
        div.appendChild(button);
    }
});