Project 1: Todo List (DOM)

Build a DOM-Based Todo List

Put your array and object knowledge to work! In this project you'll build a fully interactive todo list that reads from and writes to the DOM — no frameworks, just pure JavaScript.

YOUR TASK

Create a todo list app where:

The user can type a task into an input and press a button to add it
Each task appears in a list on the page with a Remove button beside it
Clicking Remove deletes that specific task from the list
Tasks are stored in a JavaScript array and the DOM is re-rendered each time
If the input is empty, show an alert: "Please enter a task!"
Display a task count that updates automatically

Use document.getElementById, innerHTML, and array methods like push and splice.

Need a hint?

Structure to follow:
1. Store tasks in let tasks = [];
2. Write a renderTasks() function that clears and rebuilds the list HTML
3. In addTask(): get input value → push to array → call renderTasks()
4. In removeTask(index): use tasks.splice(index, 1) → call renderTasks()
5. Update the task count with tasks.length each render
6. Use onclick="removeTask(${i})" inside your generated HTML

Example interaction:

Input: "Buy groceries" → [Add]
→ Tasks (1): [ Buy groceries ] [Remove]

Input: "Walk the dog" → [Add]
→ Tasks (2): [ Buy groceries ] [Remove]
[ Walk the dog ] [Remove]

Click Remove on first item →
→ Tasks (1): [ Walk the dog ] [Remove]

Language:

Input:

Code Editor Ready

Output

Console

Console initialized...
Ready for Project 1: Todo List (DOM)

> Write your JS logic — the checker simulates add/remove actions
> Hit "Check My Code" when you're ready!