From bc72f12dc35c3b8850a28e53d09c254817db1e6b Mon Sep 17 00:00:00 2001 From: Tanvi2307 Date: Wed, 22 Oct 2025 23:52:48 +0530 Subject: [PATCH] Added ToDoApp under Frontend/MiniProjects --- .../Frontend/MiniProjects/to-do-app/README.md | 51 +++++++++++++ .../MiniProjects/to-do-app/index.html | 20 +++++ .../Frontend/MiniProjects/to-do-app/script.js | 52 +++++++++++++ .../Frontend/MiniProjects/to-do-app/style.css | 75 +++++++++++++++++++ 4 files changed, 198 insertions(+) create mode 100644 Domains/Frontend/MiniProjects/to-do-app/README.md create mode 100644 Domains/Frontend/MiniProjects/to-do-app/index.html create mode 100644 Domains/Frontend/MiniProjects/to-do-app/script.js create mode 100644 Domains/Frontend/MiniProjects/to-do-app/style.css diff --git a/Domains/Frontend/MiniProjects/to-do-app/README.md b/Domains/Frontend/MiniProjects/to-do-app/README.md new file mode 100644 index 00000000..93612a5a --- /dev/null +++ b/Domains/Frontend/MiniProjects/to-do-app/README.md @@ -0,0 +1,51 @@ +# ✅ To-Do List App + +**Contributor:** [Tanvi2307](https://github.com/Tanvi2307) + +--- + +## 🧾 Description + +A **simple and responsive To-Do List web app** built with **HTML**, **CSS**, and **JavaScript**. +This app allows users to add, complete, and delete tasks — with all data saved in the browser using **localStorage**, so your list stays even after refreshing the page. + +--- + +## 🚀 Features + +- ➕ **Add Tasks** – Quickly add tasks via input form. +- ✅ **Mark as Complete** – Click to toggle task status. +- 🗑️ **Delete Tasks** – Remove tasks from the list. +- 💾 **Persistent Storage** – Uses localStorage to save tasks across sessions. +- 💻 **Responsive UI** – Works on desktop and mobile devices. +- ⚡ **Instant Updates** – Tasks update dynamically without reloading. + +--- + +## 💡 Bonus Features + +- ✨ **Strike-through Styling** for completed tasks. +- 🎨 **Auto-clear Input Field** after adding a task. +- 📱 **Mobile-optimized layout** with clean styling. +- ⚙️ **Simple, lightweight, and fast** — no libraries or frameworks used. + +--- + +## 🧩 Tech Stack + +- **HTML5** – Markup and structure +- **CSS3** – Styling and layout (custom or framework-free) +- **JavaScript (Vanilla)** – DOM manipulation and data handling +- **localStorage API** – Persistent task saving + + +--- + +## 📁 Folder Structure + +to-do-app/ +├── index.html # Main HTML file +├── styles.css # Styling +├── script.js # JavaScript logic +└── README.md # Documentation + diff --git a/Domains/Frontend/MiniProjects/to-do-app/index.html b/Domains/Frontend/MiniProjects/to-do-app/index.html new file mode 100644 index 00000000..2743dc59 --- /dev/null +++ b/Domains/Frontend/MiniProjects/to-do-app/index.html @@ -0,0 +1,20 @@ + + + + + + To-Do List + + + +
+

📝 To-Do List

+
+ + +
+ +
+ + + diff --git a/Domains/Frontend/MiniProjects/to-do-app/script.js b/Domains/Frontend/MiniProjects/to-do-app/script.js new file mode 100644 index 00000000..6719df2c --- /dev/null +++ b/Domains/Frontend/MiniProjects/to-do-app/script.js @@ -0,0 +1,52 @@ +const todoForm = document.getElementById('todo-form'); +const todoInput = document.getElementById('todo-input'); +const todoList = document.getElementById('todo-list'); + +let todos = JSON.parse(localStorage.getItem('todos')) || []; + +function saveTodos() { + localStorage.setItem('todos', JSON.stringify(todos)); +} + +function renderTodos() { + todoList.innerHTML = ''; + todos.forEach((todo, index) => { + const li = document.createElement('li'); + li.className = todo.completed ? 'completed' : ''; + li.innerHTML = ` + ${todo.text} +
+ + +
+ `; + todoList.appendChild(li); + }); +} + +function addTodo(e) { + e.preventDefault(); + const text = todoInput.value.trim(); + if (text !== '') { + todos.push({ text, completed: false }); + saveTodos(); + renderTodos(); + todoInput.value = ''; + } +} + +function deleteTodo(index) { + todos.splice(index, 1); + saveTodos(); + renderTodos(); +} + +function toggleComplete(index) { + todos[index].completed = !todos[index].completed; + saveTodos(); + renderTodos(); +} + +// Init +renderTodos(); +todoForm.addEventListener('submit', addTodo); diff --git a/Domains/Frontend/MiniProjects/to-do-app/style.css b/Domains/Frontend/MiniProjects/to-do-app/style.css new file mode 100644 index 00000000..0dba32b1 --- /dev/null +++ b/Domains/Frontend/MiniProjects/to-do-app/style.css @@ -0,0 +1,75 @@ +body { + font-family: 'Segoe UI', sans-serif; + background: #f2f2f2; + display: flex; + justify-content: center; + padding: 50px; +} + +.todo-container { + background: #fff; + padding: 30px; + width: 100%; + max-width: 400px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0,0,0,0.1); +} + +h1 { + text-align: center; + color: #333; +} + +form { + display: flex; + gap: 10px; +} + +input[type="text"] { + flex: 1; + padding: 10px; + font-size: 16px; +} + +button { + padding: 10px 15px; + background: #4caf50; + color: #fff; + border: none; + cursor: pointer; + border-radius: 4px; +} + +button:hover { + background: #45a049; +} + +ul { + list-style: none; + padding: 0; + margin-top: 20px; +} + +li { + display: flex; + justify-content: space-between; + align-items: center; + background: #eee; + padding: 10px; + margin-bottom: 10px; + border-radius: 4px; +} + +li.completed { + text-decoration: line-through; + color: #888; +} + +li button { + background: red; + color: #fff; + border: none; + padding: 5px 10px; + border-radius: 4px; + cursor: pointer; +}