📝🤔Todo

Author: rafay45

Todo/app.js

@@ -34,13 +34,19 @@ todoHandler.addEventListener('click', async () => {
     try {
         const querySnapshot = await getDocs(collection(db, 'Todo'));
         querySnapshot.forEach((doc) => {
-           const getId = doc.data().id
-           const getTodo = doc.data().todo
-           todoList.innerHTML = ``
+            const getId = doc.data().id
+            const getTodo = doc.data().todo
+            todoList.innerHTML += `
+             <li class="todo-item">
+            <input id= ${getId} class="inp" value=${getTodo} type="text" readonly>
+            <button id= ${getId}  class="btn-edit">Edit</button>
+            <button id= ${getId}  class="btn-delete">Delete</button>
+            </li>
+           `
         });
     } catch (error) {
-       console.log('The error is in getDocs ::', error);
-       
+        console.log('The error is in getDocs ::', error);
+
     }
 })
 

Todo/index.html

@@ -19,10 +19,9 @@ <h2>🔥 Todo App</h2>
             <button id="addTodoBtn">Add</button>
         </div>
         <ul class="todo-list" id="todoList">
-
+          
         </ul>
     </div>
-    <input type="text">
 </body>
 
 </html>

Todo/style.css

@@ -69,19 +69,14 @@
 
     .todo-item {
         background: #f1f1f1;
-        padding: 12px 15px;
+        padding: 12px 11px;
         border-radius: 8px;
         display: flex;
-        justify-content: space-between;
+        justify-content: space-around;
         align-items: center;
         margin-bottom: 10px;
     }
 
-    .todo-item span {
-        word-break: break-word;
-        color: #333;
-    }
-
   .todo-item .btn-edit,
 .todo-item .btn-delete {
     padding: 6px 12px;
@@ -109,3 +104,15 @@
 .todo-item .btn-delete:hover {
     background-color: #c82333;
 }
+.inp{
+    width: 65%;
+    padding: 3px;
+    border-radius: 4px;
+    border: 1px solid #ccc;
+    background-color: #f1f1f1;
+    border: none;
+    font-size: 16px;
+}
+    .inp:focus {
+        outline: none;
+    }