📝🤔Todo

Author: rafay45

Todo/app.js

@@ -13,7 +13,6 @@ const firebaseConfig = {
 
 const app = initializeApp(firebaseConfig);
 const db = getFirestore(app);
-
 const todoHandler = document.getElementById('addTodoBtn');
 const todoInput = document.getElementById('todoInput');
 const main = document.getElementById('main');
@@ -45,8 +44,8 @@ async function fetching() {
         const querySnapshot = await getDocs(collection(db, 'Todo'));
         main.innerHTML = ""
         querySnapshot.forEach((doc) => {
-            const getTodo = doc.data().todo
-            const setId = doc.id
+            const getTodo = doc.data().todo;
+            const setId = doc.id;
             append(getTodo, setId)
         });
     } catch (error) {
@@ -70,7 +69,6 @@ function append(todo, id) {
 ul.addEventListener('click', async (e) => {
     let btn = e.target.classList.contains("btn-edit")
     let input = e.target.previousElementSibling;
-
     if (btn) {
         if (input.hasAttribute('readonly')) {
             input.removeAttribute('readonly')
@@ -81,7 +79,6 @@ ul.addEventListener('click', async (e) => {
             input.style.border = ""
             input.nextElementSibling.innerText = "Edit"
         }
-
         let newVal = input.value
         let id = input.id
         try {
@@ -93,6 +90,14 @@ ul.addEventListener('click', async (e) => {
 
         }
     }
+
+    const btnDel = e.target.classList.contains("btn-delete")
+    const id = e.target.parentElement.firstElementChild.id
+    if (btnDel) {
+        e.target.parentElement.remove()
+        await deleteDoc(doc(db, "Todo", id));
+
+    }
 })
 
 window.addEventListener("DOMContentLoaded", fetching)

Todo/style.css

@@ -77,7 +77,7 @@
         display: flex;
         justify-content: space-between;
         align-items: center;
-        transition: background 0.3s ease;   
+        transition: background 0.3s ease;
     }
 
     .todo-item .btn-edit,
@@ -117,6 +117,48 @@
         border: none;
         font-size: 16px;
     }
+
     .inp:focus {
         outline: none;
+    }
+
+    @media (max-width: 480px) {
+        .input-section {
+            flex-direction: column;
+        }
+
+        .input-section input,
+        .input-section button {
+            width: 100%;
+        }
+
+        .todo-item {
+            flex-direction: column;
+            align-items: flex-start;
+        }
+
+        .inp {
+            width: 100%;
+        }
+
+        .todo-item .btn-edit,
+        .todo-item .btn-delete {
+            width: 100%;
+            margin-left: 0;
+            margin-top: 5px;
+        }
+    }
+
+    @media (min-width: 768px) {
+        .todo-container {
+            padding: 40px;
+        }
+
+        .input-section input {
+            font-size: 18px;
+        }
+
+        .input-section button {
+            font-size: 18px;
+        }
     }