Module 79 : Assignment Building a To-Do List Application
Assignment
Create a To-Do List Application where a user can:
Add a new task.
Mark a task as completed.
Delete a task.
Display the list dynamically in the browser.
1: Research Insights
Professional developers often follow this:
Separation of Concerns → Keep logic, structure, and design separate (HTML for structure, CSS for design, JS for logic).
Write Reusable Functions → Instead of repeating code, create functions like addTask(), deleteTask().
Error Handling → Handle cases like empty input.
Clean Code → Use proper variable names and indentation.
2: Example Solution
HTML (structure)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>To-Do List App</title> <style> body { font-family: Arial, sans-serif; } #taskList { margin-top: 20px; } .task { padding: 8px; border-bottom: 1px solid #ddd; } .completed { text-decoration: line-through; color: gray; } button { margin-left: 10px; } </style> </head> <body> <h1>To-Do List</h1> <input type="text" id="taskInput" placeholder="Enter a new task"> <button onclick="addTask()">Add Task</button> <div id="taskList"></div> <script src="todo.js"></script> </body> </html>
JavaScript (todo.js)
// Array to store tasks let tasks = []; // Function to add a new task function addTask() { const taskInput = document.getElementById("taskInput"); const taskText = taskInput.value.trim(); if (taskText === "") { alert("Please enter a task!"); return; } // Add task to the array tasks.push({ text: taskText, completed: false }); // Clear input field taskInput.value = ""; // Update display displayTasks(); } // Function to toggle completion status function toggleTask(index) { tasks[index].completed = !tasks[index].completed; displayTasks(); } // Function to delete a task function deleteTask(index) { tasks.splice(index, 1); // remove task displayTasks(); } // Function to display all tasks function displayTasks() { const taskList = document.getElementById("taskList"); taskList.innerHTML = ""; // Clear old list tasks.forEach((task, index) => { const taskDiv = document.createElement("div"); taskDiv.className = "task"; const taskText = document.createElement("span"); taskText.textContent = task.text; if (task.completed) { taskText.classList.add("completed"); } // Toggle button const toggleBtn = document.createElement("button"); toggleBtn.textContent = task.completed ? "Undo" : "Complete"; toggleBtn.onclick = () => toggleTask(index); // Delete button const deleteBtn = document.createElement("button"); deleteBtn.textContent = "Delete"; deleteBtn.onclick = () => deleteTask(index); // Append everything taskDiv.appendChild(taskText); taskDiv.appendChild(toggleBtn); taskDiv.appendChild(deleteBtn); taskList.appendChild(taskDiv); }); }
Explanation
Key Concepts Used:
Arrays → We use tasks array to store all task objects ({text, completed}).
Functions → Each feature is modular: addTask(), toggleTask(), deleteTask(), displayTasks().
DOM Manipulation → Creating elements dynamically using document.createElement().
Events → Buttons use onclick to trigger functions.
Conditionals → Used to handle empty input and toggle completion.
4: Exercises
Exercise 1: Add Date & Time
Modify the app to store and display the date and time when a task was created.
Hint: Use new Date().toLocaleString() in addTask().
Exercise 2: Save Tasks in Local Storage
Store tasks in localStorage so that they remain after refreshing the page.
Hint:
localStorage.setItem("tasks", JSON.stringify(tasks)); tasks = JSON.parse(localStorage.getItem("tasks")) || [];
Exercise 3: Add a Search Bar
Add a search bar to filter tasks by text.
Hint: Use filter() method on the tasks array.
5: Professional Tips from Coding Specialists
Break down large problems into smaller functions → Easier to debug.
Test often → Run your app after every small change.
Think about scalability → How would this app handle 1000 tasks?
Use comments → Future developers.
No comments:
Post a Comment