Building Your Capstone Project
To wrap up this course, we will build a fully interactive, persistent To-Do List Application. This project brings together everything you have learned:
* Variables & Arrays (storing list data)
* Functions & Event Handlers (user actions)
* DOM Manipulation (updating UI elements)
* JSON & [LocalStorage] (saving data persistently in the browser)
To learn more about storage tools, check the official reference on MDN Web Storage API.
---
Step-by-Step Code Walkthrough
Let's configure our files. Replace your existing project code with the templates below:
#### 1. The HTML Skeleton (index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dynamic Task Manager</title>
<style>
body { font-family: Arial, sans-serif; max-width: 500px; margin: 40px auto; padding: 20px; }
.task-item { display: flex; justify-content: space-between; padding: 8px; border-bottom: 1px solid #ddd; align-items: center; }
.delete-btn { background: red; color: white; border: none; padding: 4px 8px; cursor: pointer; border-radius: 4px; }
</style>
</head>
<body>
<h2>My Task Manager</h2>
<form id="todo-form">
<input type="text" id="todo-input" placeholder="Add a new task..." required>
<button type="submit">Add Task</button>
</form>
<ul id="todo-list"></ul>
<script src="app.js"></script>
</body>
</html>
#### 2. The Interactive JavaScript logic (app.js)
// Select UI elements
const todoForm = document.querySelector("#todo-form");
const todoInput = document.querySelector("#todo-input");
const todoList = document.querySelector("#todo-list");
// Initialize task data array from LocalStorage, or use empty array
let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
// Render task items onto interface
function renderTasks() {
todoList.innerHTML = ""; // Clear current UI list
tasks.forEach((task, index) => {
const li = document.createElement("li");
li.className = "task-item";
li.innerHTML =
<span>${task}</span>
<button class="delete-btn" onclick="deleteTask(${index})">Delete</button>
todoList.appendChild(li);
});
// Save latest state to browser storage
localStorage.setItem("tasks", JSON.stringify(tasks));
}
// Handle task addition
todoForm.addEventListener("submit", (e) => {
e.preventDefault();
const newTask = todoInput.value.trim();
if (newTask !== "") {
tasks.push(newTask);
todoInput.value = "";
renderTasks();
}
});
// Delete task
window.deleteTask = function(index) {
tasks.splice(index, 1); // Remove item from array
renderTasks();
};
// Initial render on page load
renderTasks();
---
Visual Output Demonstration & App Logic
- When you open
index.htmlwith Live Server: - Adding tasks: Type a task into the text box and click "Add Task". The list immediately appends the item to your display.
- State retention: Refresh the web page. Your added tasks remain visible because they are saved to your browser's persistent LocalStorage system!
- Deleting tasks: Click the red "Delete" button next to any item. The item is removed from the screen, and your LocalStorage data updates instantly.
---
Frequently Asked Questions (FAQs)
#### Q1: What is LocalStorage?
* LocalStorage is a web storage API that lets you store key-value data directly in the user's browser. Unlike program memory, this data is preserved even when the user closes the tab or restarts their computer.
#### Q2: Why is 'window.deleteTask' used instead of a standard function declaration?
* When writing scripts in modular configurations, local functions are isolated. Attaching deleteTask to the global window object ensures that inline HTML triggers (like onclick="deleteTask(index)") can access the handler properly.
#### Q3: Where do I go from here to continue learning JavaScript?
* Congratulations on completing the course! To continue growing, practice building independent projects, explore advanced modern APIs, and study foundational frameworks like React, Vue, or backend platforms like Node.js.
