✅

To-Do List App

Web DevBeginner

HTMLCSSJavaScript

💡 Overview

This is one of the best first projects because it touches almost every core web dev skill in a small package: reading user input, updating the page without reloading, and storing a growing list of items.

✅ Features to Build

0/4 done

🧭 Step-by-Step Guide

Build the HTML structure: an input box, an 'Add' button, and an empty <ul> for tasks.

Write a JS function that reads the input value, creates a new <li>, and appends it to the list when 'Add' is clicked.

Add a checkbox or click handler on each task to toggle a 'completed' CSS class (strike-through).

Add a small delete button/icon on each task that removes that specific <li> from the DOM.

Bonus: save the task list to localStorage so tasks persist after a page refresh.

🚀 Starter Code

const input = document.getElementById('taskInput');
const list = document.getElementById('taskList');

function addTask() {
  if (!input.value.trim()) return;
  const li = document.createElement('li');
  li.textContent = input.value;
  li.onclick = () => li.classList.toggle('completed');
  list.appendChild(li);
  input.value = '';
}

💡 Pro Tip

Don't jump to localStorage on day one — get add/complete/delete fully working in memory first, THEN add persistence. Building in small working steps beats trying to do everything at once.

← Back to all Projects