Created Toast For Todo Actions

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>

package.json

@@ -17,5 +17,8 @@
     "eslint": "^9.12.0",
     "globals": "^15.11.0",
     "prettier": "^3.3.3"
+  },
+  "dependencies": {
+    "to-do-list": "file:"
   }
 }

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);
+}

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;
+}