Upadated Work

build/Css/style.css

@@ -0,0 +1,25 @@
+* {
+  padding: 0;
+  margin: 0;
+}
+
+.welcome {
+  font-size: 40px;
+  font-weight: bold;
+
+  font-family: monospace;
+}
+.masterTask {
+  font-style: italic;
+  font-family: monospace;
+}
+.actionButtons {
+  width: 9%;
+  border-radius: 3px;
+}
+.taskBoxBorder {
+  border: 2px solid #928686;
+}
+.editAction {
+  border-radius: 3px;
+}

build/JS/main.js

@@ -0,0 +1,134 @@
+"use strict";
+// ifSavedlocallyAnyTask
+const taskFromStorage = localStorage.getItem("tasksList");
+// Input Element
+const inputTask = document.getElementById("inputTask");
+// Add Button
+const addButton = document.querySelector(".addTask");
+// Save button
+const saveTask = document.querySelector(".saveTask");
+// Task Container
+const taskListContainer = document.querySelector(".taskListContainer");
+// TaskList
+let tasksList = [];
+// handleTaskDisplay
+const handleTask = () => {
+    displayTask(tasksList);
+    inputTask.value = "";
+};
+// dispalyAllTodoToUser
+const displayTask = (taskList) => {
+    let htmlTaskString = "";
+    taskList.map((task) => {
+        htmlTaskString += `<div class="d-flex justify-content-between align-items-center mt-2">
+    <div>    
+    <input type="checkbox" class="checkbox ms-2" id="${task.id}" ${task.isCompleted ? "checked" : ""} onclick="taskCompletionStatus(this.id)" />
+    
+        <label class="p-1 ps-2">${task.task}</label>
+      </div>
+
+      <div>
+          <button type="button" id="${task.id}" class="p-1" data-bs-toggle="modal" data-bs-target="#myModal" onclick="editTask(this.id)">Edit</button>
+       
+       
+          <button id="${task.id}" class="p-1" onclick="deleteTask(this.id)">Delete </button>
+      
+          </div>
+      
+        </div>
+
+    `;
+    });
+    taskListContainer.innerHTML = htmlTaskString;
+};
+// localSavedDataAddedToTaskList
+if (taskFromStorage) {
+    tasksList = JSON.parse(taskFromStorage);
+    handleTask();
+}
+// addingTaskOnClick[add]
+addButton === null || addButton === void 0 ? void 0 : addButton.addEventListener("click", () => {
+    const userTask = inputTask.value;
+    if (userTask) {
+        tasksList.push({
+            id: tasksList.length + 1,
+            task: userTask,
+            isCompleted: false,
+        });
+        handleTask();
+    }
+    else {
+        toastr.error("Kindly Enter the Task.", "Note:", {
+            positionClass: "toast-bottom-right",
+            showDuration: 70,
+            closeButton: true,
+            progressBar: false,
+            preventDuplicates: true,
+        });
+    }
+});
+// editTask
+const taskToEdit = document.querySelector(".taskToEdit");
+let taskIdToEdit;
+const editTask = (id) => {
+    taskIdToEdit = id;
+    // toFindObjectWithTaskToBeEditedId
+    tasksList.forEach((task) => {
+        if (task.id == taskIdToEdit) {
+            console.log(taskToEdit);
+            taskToEdit.value = task.task;
+        }
+    });
+};
+// savingTheEditedTaskToObject
+const saveEditedTask = () => {
+    if (taskToEdit.value == "") {
+        toastr.error("Kindly Enter the Task.Task is not edited.", "Note:", {
+            positionClass: "toast-bottom-right",
+            showDuration: 70,
+            closeButton: true,
+            progressBar: false,
+            preventDuplicates: true,
+        });
+    }
+    else {
+        tasksList[taskIdToEdit - 1].task = taskToEdit.value;
+        handleTask();
+    }
+};
+// deleteTaskonClick[delete]
+const deleteTask = (taskIdToRemove) => {
+    tasksList = tasksList.filter((task) => task.id != taskIdToRemove);
+    displayTask(tasksList);
+};
+// updateTaskStatus[checkbox - complete/incomplete]
+const taskCompletionStatus = (taskStatusToUpdate) => {
+    tasksList.find((task) => {
+        if (task.id == taskStatusToUpdate) {
+            task.isCompleted = !task.isCompleted;
+        }
+    });
+};
+// userSearchForAnyTask
+const searchTasks = (toSearch) => {
+    let searchedTasks = [];
+    // userTypedSomething
+    if (toSearch !== "") {
+        // filterTaskSavedToArray - noChangesMadeToTasksList
+        searchedTasks = tasksList.filter((task) => {
+            const Data = Object.values(task).join("").toLowerCase();
+            if (Data.includes(toSearch.toLowerCase())) {
+                return task;
+            }
+        });
+    }
+    else {
+        searchedTasks = tasksList;
+    }
+    // showTheSearchedTasks => [ tasksList/SearchedTasks]
+    displayTask(searchedTasks);
+};
+// saveToLocalStorageOnClick[save]
+saveTask === null || saveTask === void 0 ? void 0 : saveTask.addEventListener("click", () => {
+    localStorage.setItem("tasksList", JSON.stringify(tasksList));
+});

build/index.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>TodoForge</title>
+
+    <!-- CSS -->
+    <link rel="stylesheet" href="./Css/style.css" />
+
+    <!-- BOOTSTRAP CSS -->
+
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css"
+      rel="stylesheet" />
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
+    <!-- TOASTER -->
+
+    <!-- Used CDN -> to get Jquery Library -> Rquired for toastr js Library  -->
+
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
+      integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"></script>
+
+    <!-- Toastr CSS -->
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/css/toastr.min.css" />
+
+    <!-- Toastr js -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/js/toastr.min.js"></script>
+  </head>
+
+  <body>
+    <div class="container-fluid">
+      <!-- Welcome -->
+      <div class="row">
+        <div class="col">
+          <h2 class="welcome ms-4 mt-2">TodoForge</h2>
+          <p class="ms-5 masterTask">"Master your day, one task at a time."</p>
+        </div>
+      </div>
+
+      <!-- Input+ Add button -->
+      <div class="row">
+        <div class="col">
+          <div class="d-flex justify-content-center">
+            <input
+              type="text"
+              class="w-50 p-1 ps-2"
+              id="inputTask"
+              placeholder="Add task here" />
+          </div>
+        </div>
+      </div>
+
+      <div class="row">
+        <div class="col">
+          <div class="mt-3 d-flex justify-content-center">
+            <!-- Add & Save -->
+            <button class="actionButtons p-1 addTask">Add</button>
+            <button class="actionButtons p-1 saveTask ms-5">Save</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- SearchTask + TaskContainer-->
+      <div class="row d-flex justify-content-center">
+        <div class="taskBoxBorder mt-3 w-75 mb-4">
+          <div class="col-12 mt-3">
+            <div class="text-center">
+              <input
+                type="text"
+                placeholder="Search task here"
+                class="p-1 w-50 ps-2"
+                oninput="searchTasks(this.value)" />
+            </div>
+          </div>
+
+          <div class="col-12 mt-3 mb-3">
+            <div class="taskListContainer"></div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Task Added -->
+
+      <div class="row">
+        <div class="col">
+            <!-- On Edit Modal -->
+             <!-- The Modal -->
+        <div class="modal fade " id="myModal">
+          <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+              <!-- Modal Header -->
+              <div class="modal-header" style="border:none">
+                <h4 class="modal-title">Edit Task: </h4>
+                <button
+                  type="button"
+                  class="btn-close"
+                  data-bs-dismiss="modal"></button>
+              </div>
+
+              <!-- Modal body -->
+              <div class="modal-body">
+
+                <input type="text" class="p-1 ps-2 form-control taskToEdit" />
+
+              </div>
+
+              <!-- Modal footer -->
+              <div class="modal-footer">
+                <button
+                  type="button"
+                  class="btn btn-danger"
+                  data-bs-dismiss="modal"
+                  onclick="saveEditedTask()"
+                  >
+                  Save
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <!-- Modal Ends Here -->
+        </div>
+      </div>
+    </div>
+
+    <script src="./JS/main.js"></script>
+  </body>
+</html>