From bc77334964a6b280d22e9298a9e305bb3b082021 Mon Sep 17 00:00:00 2001 From: RICHA RANI Date: Sat, 10 Jan 2026 21:12:23 +0530 Subject: [PATCH] Improve todo UI and enhance JS functionality --- .gitignore | 3 +- todo-list/index.html | 41 +++++++++++------ todo-list/script.js | 98 ++++++++++++++++++++-------------------- todo-list/style.css | 104 ++++++++++++++++++++++++++----------------- 4 files changed, 141 insertions(+), 105 deletions(-) diff --git a/.gitignore b/.gitignore index 496ee2c..7b8eeeb 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,2 @@ -.DS_Store \ No newline at end of file +.DS_Store +.vscode/ diff --git a/todo-list/index.html b/todo-list/index.html index f11f16a..06dd8eb 100644 --- a/todo-list/index.html +++ b/todo-list/index.html @@ -1,20 +1,33 @@ - - - - - Todo List - - -

todos

-
- + + + + Todo App + + + + +
+

Todo List

-
    + + - Left click to toggle completed.
    Right click to delete todo     - - +
      + +
      + 0 tasks + +
      +
      + + + diff --git a/todo-list/script.js b/todo-list/script.js index ec2ca20..b18f682 100644 --- 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)) -} \ No newline at end of file +function saveAndRender() { + localStorage.setItem("todos", JSON.stringify(todos)); + renderTodos(); +} diff --git a/todo-list/style.css b/todo-list/style.css index 866d46c..701ab3f 100644 --- 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; }