Historical Context & Motivation
Long before smartphones and sleek apps, people managed tasks with pen and paper. As computers entered everyday life, programmers realized that a simple to-do list was one of the most practical programs you could build. It touches every fundamental programming skill — storing data, accepting input, making decisions, and repeating actions. The to-do list has become the "Hello, World" of interactive applications because it forces you to combine multiple concepts into a single, working product.
So why build a to-do list? Because it answers a fundamental question: How do I write a program that keeps running, responds to user choices, and stores changing data? By the end of this lesson, you will have the skills to answer that question with working JavaScript code.
Core Principles & Definitions
Building a menu-based to-do list requires four core programming ideas working together. Understanding each one individually makes it much easier to see how they combine into a complete program.
Arrays as Data Storage
Menu-Driven Input
prompt() to collect input and if/else (or switch) to route it.The Program Loop
CRUD Operations
Visual Explanation — Program Flow
Before writing code, it helps to see how all the pieces fit together. The diagram below shows the flow of a menu-based to-do list from start to finish. Notice how the loop brings the program back to the menu after every action.
The key insight from this diagram is the cyclic nature of the program. Unlike a simple script that runs top-to-bottom and stops, a menu-driven program uses a loop to return to the starting point after every action. This pattern is extremely common — video games, ATMs, and even restaurant kiosks all follow the same basic structure.
How It Works — The Key JavaScript Methods
JavaScript provides built-in array methods that make adding and removing tasks straightforward. Let's look at the three essential operations our to-do list needs, along with the input/output functions that drive the menu.
Adding a Task — push()
The push() method appends a new element to the end of an array. When the user types a task name, we capture it with prompt() and pass it into tasks.push(newTask). The array grows by one element, and the new task sits at the highest index.
Removing a Task — splice()
The splice() method removes (and optionally replaces) elements at a specific index. The syntax is array.splice(startIndex, deleteCount). For our to-do list, tasks.splice(index, 1) removes exactly one task at the given position. All elements after it shift down to fill the gap.
Displaying Tasks — Looping with for
To display all tasks, we iterate through the array using a for loop. On each iteration, we print the index number (plus one, so humans see 1-based numbering) and the task string. If the array is empty, we print a friendly message like "No tasks yet!" instead.
Collecting User Input — prompt() and alert()
The prompt() function opens a dialog box and returns whatever the user types as a string. The alert() function displays a message to the user. Together, these two functions handle all communication between the program and the user in a browser environment. Keep in mind that prompt() always returns a string, so if you need a number (like a task index), you must convert it using Number() or parseInt().
Detailed Breakdown — Code Architecture
Now let's see how all the pieces fit together in actual code. The diagram below shows the complete structure of our to-do list program, highlighting how each section maps to the concepts we've discussed.
Notice the nesting: the if/else if chain lives inside the while loop, and each branch contains its own logic. This layered structure is called nesting, and it is completely normal in menu-driven programs. Indentation is your best friend for keeping track of which block you're inside.
prompt() returns a string, not a number. If the user types "2" and you compare it with === to the number 2, the condition will be false. Always compare to string literals like "2", or convert the input using Number(choice).Worked Example — Building the Complete Program
Let's walk through building the full to-do list program step by step. Each step adds a new capability, and by the end, you'll have a fully functioning interactive application.
let tasks = []; creates an empty array. let running = true; sets a flag that the while loop will check each cycle.let tasks = [];
let running = true;while (running) { ... }. Inside the loop, use prompt() to display the menu and capture the user's choice. Use \n to put each option on a new line.while (running) {
let choice = prompt("To-Do List Menu:\n1. Add Task\n2. Remove Task\n3. Display Tasks\n4. Quit");alert().if (choice === "1") {
let task = prompt("Enter a new task:");
tasks.push(task);
alert('"' + task + '" has been added!');
}splice().} else if (choice === "2") {
if (tasks.length === 0) {
alert("No tasks to remove!");
} else {
let list = "";
for (let i = 0; i < tasks.length; i++) {
list += (i + 1) + ". " + tasks[i] + "\n";
}
let num = Number(prompt("Which task number?\n" + list));
if (num >= 1 && num <= tasks.length) {
let removed = tasks.splice(num - 1, 1);
alert('"' + removed[0] + '" removed!');
} else {
alert("Invalid number.");
}
}
}alert(). For quit, set running = false so the while loop ends on the next check. Add a final else clause for invalid inputs.} else if (choice === "3") {
if (tasks.length === 0) {
alert("No tasks yet!");
} else {
let list = "Your Tasks:\n";
for (let i = 0; i < tasks.length; i++) {
list += (i + 1) + ". " + tasks[i] + "\n";
}
alert(list);
}
} else if (choice === "4") {
running = false;
alert("Goodbye!");
} else {
alert("Please enter 1, 2, 3, or 4.");
}
} // end while<script> tags, and you'll have a working to-do list.Strengths, Limitations & Alternatives
Our prompt/alert-based to-do list is an excellent learning tool, but it has trade-offs compared to other approaches. Understanding these helps you appreciate what you've built and what comes next.
| Aspect | Strengths | Limitations |
|---|---|---|
| User Interface | Works in any browser with zero setup. No HTML or CSS required. | Prompt/alert dialogs are clunky and block the page. You can't see the list and the menu at the same time. |
| Data Persistence | Simple array storage is easy to understand and debug. | All tasks vanish when you refresh the page. There is no save mechanism. |
| Scalability | Great for small lists. Array operations are fast for dozens of items. | No categories, priorities, or due dates. Hard to extend without restructuring. |
| Error Handling | Basic validation (checking index range) is straightforward to add. | If the user clicks Cancel on a prompt, it returns null, which could cause bugs if not handled. |
prompt() with fancy input fields and swap the array for a database. The logic underneath is the same.Connection to Advanced Concepts
The menu-driven to-do list you've built is a stepping stone to far more powerful applications. The table below compares what you've done here with what you'll encounter as you continue learning JavaScript and web development.
| This Lesson | Next Level |
|---|---|
prompt() and alert() for I/O | HTML forms with <input> elements and DOM manipulation for a real web page UI. |
| Array of strings | Array of objects — each task stores a name, priority, due date, and completion status. |
| Data lost on refresh | localStorage to save tasks in the browser, or a back-end database for permanent storage. |
if/else if chain | Event listeners (addEventListener) that respond to button clicks, replacing the menu loop entirely. |
| Procedural code in one file | Functions, modules, or even frameworks like React that organize code into reusable components. |
The most important lesson here is that the core logic never changes. Whether you're using prompt boxes or a React interface, your program still needs to store data, accept input, decide what to do with it, and update the display. Mastering this pattern now gives you a head start on everything that follows.
Practice Problems
while loop instead of just running the code from top to bottom? What would happen without the loop?tasks = ["Math HW", "Read Ch. 5", "Laundry"]. The user wants to remove "Read Ch. 5". They see it listed as item 2 in the display. Write the exact splice() call that removes it, and state what the array looks like afterward.Lesson Summary
In this lesson, you built a complete menu-based to-do list using JavaScript. The program stores tasks in an array, uses prompt() and alert() for user interaction, and keeps running through a while loop controlled by a boolean flag. You learned three essential array operations: push() to add tasks, splice() to remove them by index, and a for loop to display them all.
This project demonstrated the CRUD pattern (Create, Read, Delete) that powers virtually every data-driven application. You also practiced input validation by checking array bounds before removing a task, and you handled the string vs. number distinction that trips up many beginners. Moving forward, you can upgrade this project with HTML interfaces, localStorage for persistence, and object-based tasks with completion status — all building on the exact same logic you mastered today.