Merge bc77334964 into c92b0bc3a8

4 months ago · 5fb2cb7b40
parent c92b0bc3a8 bc77334964
commit 5fb2cb7b40
4 changed files with 141 additions and 105 deletions
--- a/.gitignore
+++ b/.gitignore
@ -1 +1,2 @@
-.DS_Store
+.DS_Store
+.vscode/
--- a/todo-list/index.html
+++ b/todo-list/index.html
@ -1,20 +1,33 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <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">
+<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" />
+</head>
+<body>
+
+  <div class="app">
+    <h1>Todo List</h1>

-      <ul class="todos" id="todos"></ul>
+    <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>

-    <script src="script.js"></script>
-  </body>
+    <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>
 </html>
--- a/todo-list/script.js
+++ b/todo-list/script.js
@ -1,65 +1,67 @@
-const form = document.getElementById('form')
-const input = document.getElementById('input')
-const todosUL = document.getElementById('todos')
+const form = document.getElementById("form");
+const input = document.getElementById("input");
+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) {
-    todos.forEach(todo => addTodo(todo))
-}
-
-form.addEventListener('submit', (e) => {
-    e.preventDefault()
+renderTodos();

-    addTodo()
-})
+form.addEventListener("submit", (e) => {
+  e.preventDefault();

-function addTodo(todo) {
-    let todoText = input.value
+  if (input.value.trim() === "") {
+    alert("Todo empty nahi ho sakta 😅");
+    return;
+  }

-    if(todo) {
-        todoText = todo.text
-    }
+  todos.push({
+    text: input.value,
+    completed: false
+  });

-    if(todoText) {
-        const todoEl = document.createElement('li')
-        if(todo && todo.completed) {
-            todoEl.classList.add('completed')
-        }
+  input.value = "";
+  saveAndRender();
+});

-        todoEl.innerText = todoText
+function renderTodos() {
+  todosUL.innerHTML = "";

-        todoEl.addEventListener('click', () => {
-            todoEl.classList.toggle('completed')
-            updateLS()
-        }) 
+  todos.forEach((todo, index) => {
+    const li = document.createElement("li");
+    li.innerText = todo.text;

-        todoEl.addEventListener('contextmenu', (e) => {
-            e.preventDefault()
+    if (todo.completed) li.classList.add("completed");

-            todoEl.remove()
-            updateLS()
-        }) 
+    li.addEventListener("click", () => {
+      todo.completed = !todo.completed;
+      saveAndRender();
+    });

-        todosUL.appendChild(todoEl)
+    li.addEventListener("contextmenu", (e) => {
+      e.preventDefault();
+      todos.splice(index, 1);
+      saveAndRender();
+    });

-        input.value = ''
+    todosUL.appendChild(li);
+  });

-        updateLS()
-    }
+  updateCount();
 }

-function updateLS() {
-    todosEl = document.querySelectorAll('li')
-
-    const todos = []
+function updateCount() {
+  const pending = todos.filter(t => !t.completed).length;
+  countEl.innerText = `${pending} tasks left`;
+}

-    todosEl.forEach(todoEl => {
-        todos.push({
-            text: todoEl.innerText,
-            completed: todoEl.classList.contains('completed')
-        })
-    })
+clearBtn.addEventListener("click", () => {
+  todos = todos.filter(todo => !todo.completed);
+  saveAndRender();
+});

-    localStorage.setItem('todos', JSON.stringify(todos))
-}
+function saveAndRender() {
+  localStorage.setItem("todos", JSON.stringify(todos));
+  renderTodos();
+}
--- a/todo-list/style.css
+++ b/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;
-  margin: 0;
+  align-items: center;
 }

-h1 {
-  color: rgb(179, 131, 226);
-  font-size: 10rem;
-  text-align: center;
-  opacity: 0.4;
+.app {
+  background: #fff;
+  width: 380px;
+  border-radius: 12px;
+  box-shadow: 0 10px 30px rgba(0,0,0,0.15);
+  padding: 20px;
 }

-form {
-  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
-  max-width: 100%;
-  width: 400px;
+h1 {
+  text-align: center;
+  margin-bottom: 15px;
+  color: #6a5acd;
 }

-.input {
-  border: none;
-  color: #444;
-  font-size: 2rem;
-  padding: 1rem 2rem;
-  display: block;
+#input {
  width: 100%;
+  padding: 12px 15px;
+  font-size: 1rem;
+  border-radius: 8px;
+  border: 1px solid #ddd;
 }

-.input::placeholder {
-  color: #d5d5d5;
-}
-
-.input:focus {
-  outline-color: rgb(179, 131, 226);
+#input:focus {
+  outline: none;
+  border-color: #6a5acd;
 }

-.todos {
-  background-color: #fff;
+#todos {
+  list-style: none;
  padding: 0;
-  margin: 0;
-  list-style-type: none;
+  margin-top: 15px;
 }

-.todos li {
-  border-top: 1px solid #e5e5e5;
+#todos li {
+  padding: 12px;
+  background: #f8f8f8;
+  margin-bottom: 8px;
+  border-radius: 8px;
  cursor: pointer;
-  font-size: 1.5rem;
-  padding: 1rem 2rem;
+  transition: 0.3s;
+}
+
+#todos li:hover {
+  background: #ececff;
 }

-.todos li.completed {
-  color: #b6b6b6;
+#todos li.completed {
  text-decoration: line-through;
+  color: #999;
+  background: #e0e0e0;
 }

-small {
-  color: #b5b5b5;
-  margin-top: 3rem;
-  text-align: center;
+.footer {
+  display: flex;
+  justify-content: space-between;
+  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;
 }