From c2b12a6ce53d9d514d087058d7477cf1f0b38cfd Mon Sep 17 00:00:00 2001
From: sanket-164 <sanketsadadiya53@gmail.com>
Date: Mon, 14 Oct 2024 18:32:33 +0530
Subject: [PATCH] Created Toast For Todo Actions

---
 index.html        |  1 +
 package-lock.json |  7 +++++++
 package.json      |  3 +++
 script.js         | 18 ++++++++++++++----
 style.css         | 23 +++++++++++++++++++++++
 5 files changed, 48 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 51a8aa2..ee4be83 100644
--- a/index.html
+++ b/index.html
@@ -104,6 +104,7 @@ <h1 class="subtitle">Todo-List</h1>
       </div>
     </footer>
 
+    <div id="toast" class="toast"></div>
     <script src="script.js"></script>
   </body>
 </html>
diff --git a/package-lock.json b/package-lock.json
index b355c69..dd406a9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "to-do-list",
       "version": "1.0.0",
       "license": "ISC",
+      "dependencies": {
+        "to-do-list": "file:"
+      },
       "devDependencies": {
         "@eslint/js": "^9.12.0",
         "eslint": "^9.12.0",
@@ -1025,6 +1028,10 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/to-do-list": {
+      "resolved": "",
+      "link": true
+    },
     "node_modules/type-check": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
diff --git a/package.json b/package.json
index 19b8339..472acd3 100644
--- a/package.json
+++ b/package.json
@@ -17,5 +17,8 @@
     "eslint": "^9.12.0",
     "globals": "^15.11.0",
     "prettier": "^3.3.3"
+  },
+  "dependencies": {
+    "to-do-list": "file:"
   }
 }
diff --git a/script.js b/script.js
index 6de13e8..f700f0f 100644
--- a/script.js
+++ b/script.js
@@ -22,7 +22,7 @@ checkIcon.classList.add('fa-solid', 'fa-check');
 document.querySelector('.js-name-input').addEventListener('input', (e) => {
   let input = e.target.value;
   if (input.length === 120) {
-    alert('max character limits exceeded');
+    showToast("Max characters reached");
   }
 });
 
@@ -57,9 +57,7 @@ function addTodo() {
 
   // Validation checks
   if (!name || !date || !time || !category || !priority) {
-    alert(
-      'Please fill in all fields: task, date, time, category, and priority.'
-    );
+    showToast("Provide required fields");
     return;
   }
 
@@ -93,6 +91,8 @@ function addTodo() {
   // Save to localStorage
   localStorage.setItem('todoList', JSON.stringify(todoList));
 
+  showToast('Todo saved successfully');
+
   // Reset the inputs
   clearInputs();
 
@@ -104,6 +104,7 @@ function deleteTodo(index) {
   // Remove the specific todo from the list
   todoList.splice(index, 1);
   localStorage.setItem('todoList', JSON.stringify(todoList));
+  showToast('Todo deleted successfully');
   updateTodoList();
 }
 
@@ -311,3 +312,12 @@ document.addEventListener('DOMContentLoaded', () => {
     .querySelector('.js-filter-input')
     .addEventListener('change', filterTodos);
 });
+
+function showToast(message) {
+  var toast = document.getElementById("toast");
+  toast.className = "toast show";
+  toast.innerHTML = message;
+  setTimeout(function () {
+    toast.className = toast.className.replace("show", "hide");
+  }, 3000);
+}
diff --git a/style.css b/style.css
index 5776d80..00c431e 100644
--- a/style.css
+++ b/style.css
@@ -387,3 +387,26 @@ Animating title
   height: fit-content;
   max-height: 35vh;
 }
+
+.toast {
+  visibility: hidden;
+  min-width: 250px;
+  background-color: #333;
+  color: #fff;
+  text-align: center;
+  border-radius: 5px;
+  padding: 16px;
+  position: fixed;
+  z-index: 1;
+  bottom: 30px;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 17px;
+  opacity: 0;
+  transition: opacity 0.5s ease-in-out;
+}
+
+.toast.show {
+  visibility: visible;
+  opacity: 1;
+}