Fix: prevent adding empty todo items

laxman-goud · laxman-goud · commit bdb553ec04d6 · 2025-08-18T22:31:54.000+05:30
diff --git a/20-SessionStorage-TodoList/app.js b/20-SessionStorage-TodoList/app.js
@@ -10,9 +10,11 @@ function get_todos() {
 
 function add() {
   var task = document.getElementById("task").value.trim(); // remove extra spaces
+  var alertMessage = document.getElementById("alert");
+  alertMessage.style.display = "none"; // hiding alert message initially
 
   if (task === "") {
-    alert("Please enter a task before adding!"); 
+    alertMessage.style.display = "block"; // show alert if task is empty
     return false; // stop if empty
   }
 
diff --git a/20-SessionStorage-TodoList/index.html b/20-SessionStorage-TodoList/index.html
@@ -10,6 +10,7 @@
   <body>
     <div id="wrapper">
       <h1>Todo List</h1>
+      <p id="alert">Task field is empty</p>
       <input type="" id="task" /><button id="add">Add Task</button>
       <div id="todos"></div>
     </div>
diff --git a/20-SessionStorage-TodoList/style.css b/20-SessionStorage-TodoList/style.css
@@ -53,3 +53,10 @@ ul {
 h1 {
   margin-top: 30px;
 }
+
+#alert {
+  display: none;
+  color: red;
+  font-weight: bold;
+  margin-top: 10px;
+}
