diff --git a/README.md b/README.md index 8b384a3..e592521 100644 --- a/README.md +++ b/README.md @@ -1,3 +1,4 @@ +[![Review Assignment Due Date](https://classroom.github.com/assets/deadline-readme-button-22041afd0340ce965d47ae6ef1cefeee28c7c493a6346c4f15d667ab976d596c.svg)](https://classroom.github.com/a/ovH1Hel6) # Une liste de tâches Dans cet exercice, vous devez créer une page web pour gérer une liste de tâches à faire (to-do list). diff --git a/index.html b/index.html index 9902f04..12c59bd 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,6 @@ Todo -

Todo List

    diff --git a/script.js b/script.js index e69de29..01ac8b4 100644 --- a/script.js +++ b/script.js @@ -0,0 +1,47 @@ +let addButton = document.getElementById("new-todo-item-add"); +let todoList = document.getElementById("todo-list"); + +addButton.addEventListener("click", function (){ + let li = document.createElement("li"); + + let span=document.createElement("span") + span.textContent = document.getElementById("new-todo-item-title").value; + let edit = document.createElement("button") + edit.className="edit-button" + edit.textContent ="Edit"; + let suppr = document.createElement("button") + suppr.textContent="Delete"; + suppr.className="delete-button" + + li.append(span); + li.append(suppr) + li.append(edit) + + todoList.append(li); +}); + +todoList.addEventListener("click", function (e) { + if (e.target.className === "delete-button") { + e.target.parentElement.remove(); + } else if (e.target.className === "edit-button") { + let currentElement = e.target.parentElement; + document.getElementById("edit-todo-item-title").value = currentElement.children[0].textContent; + + toggleHidden(true) + + document.getElementById("edit-todo-item-confirm").onclick = function() { + currentElement.children[0].textContent = document.getElementById("edit-todo-item-title").value; + + toggleHidden(false) + } + + document.getElementById("edit-todo-item-cancel").onclick = function() { + toggleHidden(false) + } + } +}); + +function toggleHidden(bool) { + document.getElementById("new-item").hidden = bool + document.getElementById("edit-item").hidden = !bool +}