The Starter Project - Build a To-Do App with Plain JavaScript

Every aspiring web developer needs a foundational project that teaches the core principles of web application development. The **To-Do List App** is that project. By building it with **Vanilla JavaScript** (plain JS, no frameworks), you'll master essential concepts like DOM manipulation, event handling, and data persistence.

What You Will Master (Key Concepts)

This project is deceptively simple, yet it touches on the four fundamental operations of data management, often called **CRUD** (Create, Read, Update, Delete). You will get hands-on experience with:

DOM Manipulation: Dynamically adding and removing HTML elements (<li> tags) to the webpage.
Event Listeners: Making the app interactive by detecting button clicks (Add, Delete) and keypresses (Enter).
Data Persistence (LocalStorage): Using the browser's localStorage to save the task list so your data doesn't disappear when the user refreshes the page.
State Management: Tracking whether a task is done: true or done: false.

The 3-Step Build Process

Step 1: The HTML Skeleton (`index.html`)

Create the basic structure for user input and the task list. You need an input field, an "Add" button, and an unordered list to display the tasks.


<div class="container">
    <h1>Vanilla JS To-Do List</h1>
    <input type="text" id="taskInput" placeholder="Add a new task...">
    <button id="addBtn">Add Task</button>
    <ul id="taskList">
        <!-- Tasks will be injected here by JavaScript -->
    </ul>
</div>

Step 2: The JavaScript Logic (`app.js`)

This is where the magic happens. We need to: grab the elements, load any saved tasks, and define functions for key actions.


// 1. Get Elements & Load Data
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');

// Load tasks from Local Storage, or start with an empty array
let tasks = JSON.parse(localStorage.getItem('tasks')) || []; 

// 2. The Render Function (Displays the UI)
function renderTasks() {
    taskList.innerHTML = ''; // Clear previous list
    tasks.forEach((task, index) => {
        const li = document.createElement('li');
        li.className = task.done ? 'done' : ''; // Add 'done' class for styling
        li.innerHTML = `
            <span>${task.text}</span>
            <div>
                <button onclick="toggleDone(${index})">✔</button>
                <button class="remove-btn" onclick="deleteTask(${index})">✖</button>
            </div>
        `;
        taskList.appendChild(li);
    });
    // Save the current state back to Local Storage after rendering
    localStorage.setItem('tasks', JSON.stringify(tasks)); 
}

// 3. Action Functions
function addTask() {
    const text = taskInput.value.trim();
    if (text === '') return; // Don't add empty tasks

    tasks.push({ text, done: false }); // Create a new task object
    taskInput.value = ''; // Clear the input field
    renderTasks();
}

function toggleDone(index) {
    tasks[index].done = !tasks[index].done;
    renderTasks();
}

function deleteTask(index) {
    tasks.splice(index, 1); // Remove the task from the array
    renderTasks();
}

// 4. Event Listeners
addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', e => {
    if (e.key === 'Enter') addTask();
});

// Initial load
renderTasks();

Step 3: A Little CSS (For Style and Function)

Use simple CSS to make it look clean and visually distinguish completed tasks (e.g., a **strikethrough** for the .done class).

Next Steps to Power-Up Your App

Once you have the basics working, here are some features to add:

**Editing Tasks:** Add an "Edit" button that lets the user change the task text.
**Task Filtering:** Add buttons to show "All," "Active," and "Completed" tasks.
**Due Dates:** Include a date input and display tasks based on urgency.

Search This Blog

📝 Latest Blog Post