acesdit · Tejas-Santosh-Nalawade · Oct 22, 2025 · Oct 22, 2025
diff --git a/Domains/Frontend/MiniProjects/to-do-app/README.md 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
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>To-Do List</title>
+  <link rel="stylesheet" href="style.css">
+</head>
+<body>
+  <div class="todo-container">
+    <h1>📝 To-Do List</h1>
+    <form id="todo-form">
+      <input type="text" id="todo-input" placeholder="Enter a task..." required>
+      <button type="submit">Add</button>
+    </form>
+    <ul id="todo-list"></ul>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Domains/Frontend/MiniProjects/to-do-app/script.js 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 = `
+      <span>${todo.text}</span>
+      <div>
+        <button onclick="toggleComplete(${index})">✔️</button>
+        <button onclick="deleteTodo(${index})">🗑️</button>
+      </div>
+    `;
+    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
@@ -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;
+}