diff --git a/todo.html b/todo.html index 3b97d27..d895bd7 100644 --- a/todo.html +++ b/todo.html @@ -17,10 +17,10 @@

To do:


- +
- +
diff --git a/todo.js b/todo.js index 9a42e49..89a6a42 100644 --- a/todo.js +++ b/todo.js @@ -17,8 +17,8 @@ const todos = [ }, ]; -const todosContainer = document.getElementById("todos-container"); - + const todosContainer = document.getElementById("todos-container"); + for (let todo of todos) { const todoItem = document.createElement("div"); todoItem.classList.add("todo-item"); @@ -46,4 +46,42 @@ for (let todo of todos) { todoItem.append(todoItemButtons); todosContainer.appendChild(todoItem); + // + } + +const input = document.getElementById("todo-text"); +const saveBtn = document.getElementById("save-btn"); + saveBtn.addEventListener("click", () => { + const inputText = input.value; + todos.push(inputText); + console.log(todos) + const newDiv = document.createElement("div"); + const divContent = document.createTextNode(input.value); + newDiv.appendChild(divContent); + + const todoItem = document.createElement("div"); + todoItem.classList.add("todo-item"); + + const todoTextElement = document.createElement("p"); + todoTextElement.innerHTML = input.value; + todoItem.appendChild(todoTextElement); + const todoItemButtons = document.createElement("div"); + todoItemButtons.classList.add("todo-item-buttons"); + + const completedBtn = document.createElement("button"); + completedBtn.classList.add("completed-btn"); + completedBtn.innerHTML = "✓"; + + todoItemButtons.appendChild(completedBtn); + + const deleteBtn = document.createElement("button"); + deleteBtn.classList.add("delete-btn"); + deleteBtn.innerHTML = "x"; + + todoItemButtons.appendChild(deleteBtn); + + todoItem.append(todoItemButtons); + + todosContainer.appendChild(todoItem); + });