📝🤔Todo

Author: rafay45

Todo/app.js

@@ -16,9 +16,10 @@ const db = getFirestore(app);
 
 const todoHandler = document.getElementById('addTodoBtn');
 const todoInput = document.getElementById('todoInput');
-const todoList = document.getElementById('todoList');
-const li = document.createElement('li')
-li.className = "todo-item"
+const main = document.getElementById('main');
+const ul = document.createElement('ul')
+ul.className = "todo-list"
+ul.id = "todoList"
 
 
 todoHandler.addEventListener('click', async () => {
@@ -44,7 +45,7 @@ todoHandler.addEventListener('click', async () => {
 async function fetching() {
     try {
         const querySnapshot = await getDocs(collection(db, 'Todo'));
-        todoList.innerHTML = ""
+        main.innerHTML = ""
         querySnapshot.forEach((doc) => {
             const getId = doc.data().id
             const getTodo = doc.data().todo
@@ -59,21 +60,16 @@ async function fetching() {
 
 function append(id, todo) {
     todoInput.value = ""
-    li.innerHTML += `
+    ul.innerHTML += `
+             <li class="todo-item">
             <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-edit">Edit</button>
             <button id="${id}" class="btn-delete">Delete</button>
+            </li>
            `
-    todoList.appendChild(li)
+    main.appendChild(ul)
     console.log(todoList);
 
 }
 
-function edit(button) {
-    // const getClass = document.querySelector('.btn-edit')
-    // console.log(getClass);
-    console.log(button);
-    
-}
-
 window.addEventListener("DOMContentLoaded", fetching)

Todo/index.html

@@ -18,9 +18,7 @@ <h2>🔥 Todo App</h2>
             <input type="text" id="todoInput" placeholder="Enter your task..." />
             <button id="addTodoBtn">Add</button>
         </div>
-        <ul class="todo-list" id="todoList">
-         
-        </ul>
+        <div id="main"></div>
     </div>
 </body>
 

Todo/style.css

@@ -68,19 +68,16 @@
         display: flex;
         flex-direction: column;
         gap: 10px;
-        padding: 0;
-        margin: 0;
     }
 
     .todo-item {
         background: #f1f1f1;
-        /* padding: 12px 11px; */
-        gap: 10px;
+        padding: 12px;
         border-radius: 8px;
-        /* display: flex; */
-        /* justify-content: space-around; */
-        /* align-items: center; */
-        margin: 10px;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        transition: background 0.3s ease;   
     }
 
     .todo-item .btn-edit,