Todo-list

todo.html

@@ -17,10 +17,10 @@ <h1>To do:</h1>
                 <hr>
                 <div class="add-task-container">
                     <label> Task</label>
-                    <input type="text" placeholder="What do you need to do?">
+                    <input type="text" id="todo-text" placeholder="What do you need to do?">
                 </div>
                 <div class="save-btn-container">
-                    <button class="save-btn">Save Item</button>
+                    <button id="save-btn">Save Item</button>
                 </div>
             </div>
         </div>

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);
+  });