Merge branch 'main' into timeAndDateIssue

MOHIT-IITP · Oct 12, 2024 · a9a37bb · a9a37bb
2 parents 852e109 + 36ac091
commit a9a37bb
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -3,12 +3,12 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Todo-List</title>
+    <title>To-Do List</title>
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
     <div class="container">
-      <h1>Todo-List</h1>
+      <h1>To-Do List</h1>
 
       <div class="js-add-grid">
         <input

diff --git a/script.js b/script.js
@@ -28,13 +28,14 @@ function addTodo() {
   updateTodoList();
 }
 
+// eslint-disable-next-line no-unused-vars
 function deleteTodo(index) {
   // Remove the specific todo from the list
   todoList.splice(index, 1);
   localStorage.setItem('todoList', JSON.stringify(todoList));
   updateTodoList();
 }
-
+// eslint-disable-next-line no-unused-vars
 function editTodo(index) {
   let inputNameElement = document.querySelector('.js-name-input');
   let inputDateElement = document.querySelector('.js-date-input');
@@ -69,14 +70,29 @@ function updateTodoList() {
   for (let i = 0; i < todoList.length; i++) {
     todoListhtml += `<div class="small-container">${todoList[i].name}</div>
                          <div class="small-container">${todoList[i].date} ${todoList[i].time}</div>
-                         <button class="js-delete-button" onclick="deleteTodo(${i});">
+                         <button class="js-delete-button" data-index="${i}">
                             <img src="assets/delete-icon.png" alt="Delete" width="16" height="16">delete
                          </button>
-                         <button class="js-edit-button" onclick="editTodo(${i});">
+                         <button class="js-edit-button" data-index="${i}">
                             <img src="assets/edit-icon.png" alt="Edit" width="16" height="16">edit
                          </button>`;
   }
+
   addElement.innerHTML = todoListhtml;
+
+  document.querySelectorAll('.js-delete-button').forEach((button) => {
+    button.addEventListener('click', function () {
+      const index = button.getAttribute('data-index');
+      deleteTodo(index);
+    });
+  });
+
+  document.querySelectorAll('.js-edit-button').forEach((button) => {
+    button.addEventListener('click', function () {
+      const index = button.getAttribute('data-index');
+      editTodo(index);
+    });
+  });
 }
 
 function updateTodo(index) {