Mark TODO As Done Functionality Added

app.js

@@ -8,7 +8,6 @@ import {
   getDocs,
   doc,
   deleteDoc,
-  updateDoc,
 } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-firestore.js";
 import {
   getAuth,
@@ -17,7 +16,7 @@ import {
   signInWithEmailAndPassword,
 } from "https://www.gstatic.com/firebasejs/10.12.2/firebase-auth.js";
 
-//Firebase configuration
+//? Firebase configuration
 const firebaseConfig = {
   apiKey: "AIzaSyDuciiCWxqoX_hywelDtxCfZGq7yLzdktk",
   authDomain: "my-project-c5480.firebaseapp.com",
@@ -92,9 +91,10 @@ function access_form_elements(usecase) {
     signin_btn.addEventListener("click", signin);
   }
 }
+
 //? Changes UI to signup UI
-function signup_ui(){
- body_div.innerHTML = signup_html;
+function signup_ui() {
+  body_div.innerHTML = signup_html;
   access_form_elements(1);
 }
 //? Changes UI to signin UI
@@ -107,10 +107,10 @@ function signin_ui() {
 function access_todolist_elements() {
   const todo_input = document.getElementById("todo_input");
   const todo_add_btn = document.getElementById("add_todo");
-  const logout_btn = document.getElementById("logout_btn")
+  const logout_btn = document.getElementById("logout_btn");
   const todo_list = document.getElementById("todo_ul");
   todo_add_btn.addEventListener("click", add_todo_to_db);
-  logout_btn.addEventListener("click", signup_ui)
+  logout_btn.addEventListener("click", signup_ui);
 }
 
 //? Listener Function, keeps checking if the user is logged in/out
@@ -120,7 +120,7 @@ onAuthStateChanged(auth, (user) => {
     const uid = user.uid;
   } else {
     console.log("User logged out");
-   signup_ui()
+    signup_ui();
   }
 });
 
@@ -161,6 +161,7 @@ function signin() {
       console.log("User Signed In");
       body_div.innerHTML = todo_html;
       access_todolist_elements();
+      add_default_todo();
       get_todos_from_db();
     })
     .catch((error) => {
@@ -216,7 +217,10 @@ async function add_todo_to_db() {
       todo: todo_input.value.trim(),
     };
     if (obj.todo === "") {
-      console.log("Please enter a todo item.");
+      Swal.fire({
+        icon: "error",
+        text: "Please enter a todo item.",
+      });
       return;
     }
 
@@ -241,28 +245,55 @@ async function get_todos_from_db() {
 
     querySnapshot.forEach((doc) => {
       const { todo } = doc.data();
-      const todo_string = `<li id="${doc.id}" class="todo_done_btn"><button class="mark_as_done"></button><p>${todo}</p><button class="delete_todo_btn"><i class="fa-solid fa-trash fa-lg" style="color: #df1111;"></i></button></li>`;
+      const todo_string = `<li id="${doc.id}" class="todo_done_btn"><button class="mark_as_done"></button><p id="p_todo">${todo}</p><button class="delete_todo_btn"><i class="fa-solid fa-trash fa-lg" style="color: #df1111;"></i></button></li>`;
       //* Add the todo_string to the DOM
       todo_list.innerHTML += todo_string;
     });
-
+    
     //* Query for the delete buttons after the todos have been added to the DOM
     let delete_todo_btns = document.querySelectorAll(".delete_todo_btn");
-
     //* Add event listeners to the delete buttons
     delete_todo_btns.forEach((button) => {
       button.addEventListener("click", delete_todo);
     });
   } catch (e) {
     console.log(e);
   }
+
+  const p_array = document.querySelectorAll("#p_todo")
+  const elements = [];
+  p_array.forEach((ele,i)=>{
+    elements[i] = ele;
+  })
+
+  //* Query for the mark todo as_done buttons after the todos have been added to the DOM
+  let mark_as_done_btns = document.querySelectorAll(".mark_as_done");
+  let todo_done = false
+  //* Add event listeners to the delete buttons
+  mark_as_done_btns.forEach((button,i) => {
+    button.addEventListener("click", () => {
+     if(todo_done == false){
+       button.style.backgroundImage = `url("./assets/check.svg")`;
+       button.style.backgroundPosition = "center";
+       button.style.backgroundSize = "cover";
+       button.style.border = "0px";
+       elements[i].style.textDecoration = "line-through";
+       todo_done = true
+      }else{
+        button.style.backgroundImage = "none";
+        button.style.border = "2px solid white";
+        elements[i].style.textDecoration = "none";
+        todo_done = false
+     }
+    });
+  });
 }
 get_todos_from_db();
 
 //? Function to delete todos from DB and also remove them from DOM
 async function delete_todo(event) {
   try {
-    // Retrieve the document ID from the parent li element
+    //* Retrieve the document ID from the parent li element
     const doc_id = event.currentTarget.parentElement.id;
     const doc_ref = doc(db, "todos", doc_id);
     await deleteDoc(doc_ref);

custom.css

@@ -52,22 +52,25 @@ body {
 /* todo Login Form Styling */
 #logout_div{
   height: 45px;
-  width: 384px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
 }
-#logout > button{
-  /* position: fixed; */
-  margin: 10px 0px 0px 345px;
+#logout_div > button{
+  margin-top: 15px;
   border: 2px solid #ee9ca7;
   color: white;
   background-color: #10101d;
-  padding: 4px;
+  padding: 6px 6px;
   font-size: 16px;
   line-height: 28px;
   border-radius: 12px;
   cursor: pointer;
   font-weight: 600;
+  text-align: center;
 }
-#logout > button > i{
+#logout_div > button > i{
   margin-left: 5px;
 }
 
@@ -233,6 +236,7 @@ body {
 }
 
 .mark_as_done {
+  cursor: pointer;
   height: 16px;
   width: 15px;
   border: 2px solid white;
@@ -248,6 +252,7 @@ body {
 }
 
 .delete_todo_btn {
+  cursor: pointer;
     margin: 0px 10px 0px auto;
   background-color: #191933;
   border: 0px;
@@ -299,4 +304,8 @@ body {
 #main_div_todo{
       width: 300px;
 }
+#logout_div > button{
+  font-size: 12px;
+  padding: 4px 6px;
+}
 }

index.html

@@ -24,7 +24,7 @@ <h1 id="todo_head">To Do List</h1>
             </ul>
         </div>
 
-         <div id="logout">
+         <div id="logout_div">
         <button id="logout_btn">Logout<i class="fa-solid fa-right-from-bracket"></i></button>
     </div>