Merge pull request #4 from laxman-goud/fix/empty-todo-bug

zpratikpathak · web-flow · commit fa5abfb068d6 · 2025-08-18T22:39:14.000+05:30
Fix: Prevent adding empty todo items (#3)
diff --git a/20-SessionStorage-TodoList/app.js b/20-SessionStorage-TodoList/app.js
@@ -9,17 +9,25 @@ function get_todos() {
 }
 
 function add() {
-  var task = document.getElementById("task").value;
+  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 === "") {
+    alertMessage.style.display = "block"; // show alert if task is empty
+    return false; // stop if empty
+  }
 
   var todos = get_todos();
   todos.push(task);
   localStorage.setItem("todo", JSON.stringify(todos));
 
   show();
   clearDefault();
-  return false; //avoids any futher action with click event
+  return false; // avoids any further action with click event
 }
 
+
 //clear the task value from input box
 function clearDefault() {
   document.getElementById("task").value = "";
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;
+}
