📝🤔Todo

Author: rafay45

Todo/app.js

@@ -18,6 +18,7 @@ const todoHandler = document.getElementById('addTodoBtn');
 const todoInput = document.getElementById('todoInput');
 const todoList = document.getElementById('todoList');
 const li = document.createElement('li')
+li.className = "todo-item"
 
 
 todoHandler.addEventListener('click', async () => {
@@ -48,6 +49,7 @@ async function fetching() {
             const getId = doc.data().id
             const getTodo = doc.data().todo
             append(getId, getTodo)
+            // edit(getId, getTodo)
         });
     } catch (error) {
         console.log('The error is in getDocs ::', error);
@@ -58,14 +60,19 @@ async function fetching() {
 function append(id, todo) {
     todoInput.value = ""
     li.innerHTML += `
-            <li class="todo-item">
-            <input id=${id}  class="inp" value=${todo} type="text" readonly>
-            <button id=${id}  class="btn-edit">Edit</button>
-            <button id=${id}  class="btn-delete">Delete</button>
-            </li>
+            <input id="${id}" class="inp" value=${todo} type="text" readonly>
+            <button id="${id}" onclick="edit(this)" class="btn-edit">Edit</button>
+            <button id="${id}" class="btn-delete">Delete</button>
            `
     todoList.appendChild(li)
     console.log(todoList);
+
+}
+
+function edit(button) {
+    // const getClass = document.querySelector('.btn-edit')
+    // console.log(getClass);
+    console.log(button);
 
 }
 

Todo/index.html

@@ -19,7 +19,7 @@ <h2>🔥 Todo App</h2>
             <button id="addTodoBtn">Add</button>
         </div>
         <ul class="todo-list" id="todoList">
-
+         
         </ul>
     </div>
 </body>

Todo/style.css

@@ -65,16 +65,22 @@
 
     .todo-list {
         list-style: none;
+        display: flex;
+        flex-direction: column;
+        gap: 10px;
+        padding: 0;
+        margin: 0;
     }
 
     .todo-item {
         background: #f1f1f1;
-        padding: 12px 11px;
+        /* padding: 12px 11px; */
+        gap: 10px;
         border-radius: 8px;
-        display: flex;
-        justify-content: space-around;
-        align-items: center;
-        margin-bottom: 10px;
+        /* display: flex; */
+        /* justify-content: space-around; */
+        /* align-items: center; */
+        margin: 10px;
     }
 
     .todo-item .btn-edit,