Merge bc77334964 into c92b0bc3a8

.gitignore

@@ -1 +1,2 @@
 .DS_Store
+.vscode/

todo-list/index.html

@@ -3,17 +3,30 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Todo App</title>
   <link rel="stylesheet" href="style.css" />
-    <title>Todo List</title>
 </head>
 <body>
-    <h1>todos</h1>
-    <form id="form">
-      <input type="text" class="input" id="input" placeholder="Enter your todo" autocomplete="off">
 
-      <ul class="todos" id="todos"></ul>
+  <div class="app">
+    <h1>Todo List</h1>
+
+    <form id="form">
+      <input 
+        type="text" 
+        id="input" 
+        placeholder="✍️ Add a new task..." 
+        autocomplete="off"
+      />
     </form>
-    <small>Left click to toggle completed. <br> Right click to delete todo</small>
+
+    <ul id="todos"></ul>
+
+    <div class="footer">
+      <span id="count">0 tasks</span>
+      <button id="clear">Clear Completed</button>
+    </div>
+  </div>
 
   <script src="script.js"></script>
 </body>

todo-list/script.js

@@ -1,65 +1,67 @@
-const form = document.getElementById('form')
+const form = document.getElementById("form");
-const input = document.getElementById('input')
+const input = document.getElementById("input");
-const todosUL = document.getElementById('todos')
+const todosUL = document.getElementById("todos");
+const countEl = document.getElementById("count");
+const clearBtn = document.getElementById("clear");
 
-const todos = JSON.parse(localStorage.getItem('todos'))
+let todos = JSON.parse(localStorage.getItem("todos")) || [];
 
-if(todos) {
+renderTodos();
-    todos.forEach(todo => addTodo(todo))
-}
-
-form.addEventListener('submit', (e) => {
-    e.preventDefault()
-
-    addTodo()
-})
 
-function addTodo(todo) {
+form.addEventListener("submit", (e) => {
-    let todoText = input.value
+  e.preventDefault();
 
-    if(todo) {
+  if (input.value.trim() === "") {
-        todoText = todo.text
+    alert("Todo empty nahi ho sakta 😅");
+    return;
   }
 
-    if(todoText) {
+  todos.push({
-        const todoEl = document.createElement('li')
+    text: input.value,
-        if(todo && todo.completed) {
+    completed: false
-            todoEl.classList.add('completed')
+  });
-        }
 
-        todoEl.innerText = todoText
+  input.value = "";
+  saveAndRender();
+});
 
-        todoEl.addEventListener('click', () => {
+function renderTodos() {
-            todoEl.classList.toggle('completed')
+  todosUL.innerHTML = "";
-            updateLS()
-        }) 
 
-        todoEl.addEventListener('contextmenu', (e) => {
+  todos.forEach((todo, index) => {
-            e.preventDefault()
+    const li = document.createElement("li");
+    li.innerText = todo.text;
 
-            todoEl.remove()
+    if (todo.completed) li.classList.add("completed");
-            updateLS()
-        }) 
 
-        todosUL.appendChild(todoEl)
+    li.addEventListener("click", () => {
+      todo.completed = !todo.completed;
+      saveAndRender();
+    });
 
-        input.value = ''
+    li.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      todos.splice(index, 1);
+      saveAndRender();
+    });
 
-        updateLS()
+    todosUL.appendChild(li);
-    }
+  });
-}
 
-function updateLS() {
+  updateCount();
-    todosEl = document.querySelectorAll('li')
+}
 
-    const todos = []
+function updateCount() {
+  const pending = todos.filter(t => !t.completed).length;
+  countEl.innerText = `${pending} tasks left`;
+}
 
-    todosEl.forEach(todoEl => {
+clearBtn.addEventListener("click", () => {
-        todos.push({
+  todos = todos.filter(todo => !todo.completed);
-            text: todoEl.innerText,
+  saveAndRender();
-            completed: todoEl.classList.contains('completed')
+});
-        })
-    })
 
-    localStorage.setItem('todos', JSON.stringify(todos))
+function saveAndRender() {
+  localStorage.setItem("todos", JSON.stringify(todos));
+  renderTodos();
 }

todo-list/style.css

@@ -1,72 +1,92 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;400&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap');
 
 * {
   box-sizing: border-box;
 }
 
 body {
-  background-color: #f5f5f5;
-  color: #444;
   font-family: 'Poppins', sans-serif;
+  background: linear-gradient(135deg, #c3cfe2, #f5f7fa);
+  min-height: 100vh;
   display: flex;
-  flex-direction: column;
-  align-items: center;
   justify-content: center;
-  height: 100vh;
+  align-items: center;
-  margin: 0;
 }
 
-h1 {
+.app {
-  color: rgb(179, 131, 226);
+  background: #fff;
-  font-size: 10rem;
+  width: 380px;
-  text-align: center;
+  border-radius: 12px;
-  opacity: 0.4;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+  padding: 20px;
 }
 
-form {
+h1 {
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
+  text-align: center;
-  max-width: 100%;
+  margin-bottom: 15px;
-  width: 400px;
+  color: #6a5acd;
 }
 
-.input {
+#input {
-  border: none;
-  color: #444;
-  font-size: 2rem;
-  padding: 1rem 2rem;
-  display: block;
   width: 100%;
+  padding: 12px 15px;
+  font-size: 1rem;
+  border-radius: 8px;
+  border: 1px solid #ddd;
 }
 
-.input::placeholder {
+#input:focus {
-  color: #d5d5d5;
+  outline: none;
-}
+  border-color: #6a5acd;
-
-.input:focus {
-  outline-color: rgb(179, 131, 226);
 }
 
-.todos {
+#todos {
-  background-color: #fff;
+  list-style: none;
   padding: 0;
-  margin: 0;
+  margin-top: 15px;
-  list-style-type: none;
 }
 
-.todos li {
+#todos li {
-  border-top: 1px solid #e5e5e5;
+  padding: 12px;
+  background: #f8f8f8;
+  margin-bottom: 8px;
+  border-radius: 8px;
   cursor: pointer;
-  font-size: 1.5rem;
+  transition: 0.3s;
-  padding: 1rem 2rem;
+}
+
+#todos li:hover {
+  background: #ececff;
 }
 
-.todos li.completed {
+#todos li.completed {
-  color: #b6b6b6;
   text-decoration: line-through;
+  color: #999;
+  background: #e0e0e0;
 }
 
-small {
+.footer {
-  color: #b5b5b5;
+  display: flex;
-  margin-top: 3rem;
+  justify-content: space-between;
-  text-align: center;
+  align-items: center;
+  margin-top: 15px;
+}
+
+.footer span {
+  font-size: 0.9rem;
+  color: #555;
+}
+
+.footer button {
+  border: none;
+  background: #ff6b6b;
+  color: #fff;
+  padding: 6px 12px;
+  border-radius: 6px;
+  cursor: pointer;
+  font-size: 0.85rem;
+}
+
+.footer button:hover {
+  background: #ff4c4c;
 }