⬅ Previous Topic
JavaScript Fetch API - Get and Post DataNext Topic ⮕
Build a Weather App Using API in JavaScript⬅ Previous Topic
JavaScript Fetch API - Get and Post DataNext Topic ⮕
Build a Weather App Using API in JavaScriptIn this project, you will build a console-based To-Do List App using pure JavaScript. This app will allow users to add tasks, list them, mark them as done, and delete tasks — all from the console (browser or Node.js).
We start by defining an empty array that will hold all our tasks. Each task will be an object with id
, description
, and completed
status.
let tasks = [];
let taskId = 1;
This function adds a new task to the list with a unique ID.
function addTask(description) {
tasks.push({ id: taskId++, description, completed: false });
console.log("Task added successfully.");
}
addTask("Buy groceries"); addTask("Finish JavaScript course");
Q: What happens if I add two tasks with the same description?
A: That’s allowed. Each task has a unique id
to differentiate them.
This function lists all tasks in a readable format.
function listTasks() {
if (tasks.length === 0) {
console.log("No tasks found.");
return;
}
tasks.forEach(task => {
console.log(`[${task.completed ? "x" : " "}] ${task.id}: ${task.description}`);
});
}
[x] 1: Buy groceries [ ] 2: Finish JavaScript course
This function changes the completed
status of a task by ID.
function completeTask(id) {
const task = tasks.find(t => t.id === id);
if (task) {
task.completed = true;
console.log(`Task ${id} marked as completed.`);
} else {
console.log("Task not found.");
}
}
Q: What if I enter an invalid ID?
A: The function will simply tell you "Task not found."
This function removes a task by its ID using filter()
.
function deleteTask(id) {
const initialLength = tasks.length;
tasks = tasks.filter(task => task.id !== id);
if (tasks.length < initialLength) {
console.log(`Task ${id} deleted.`);
} else {
console.log("Task not found.");
}
}
deleteTask(1);
This is a bonus feature to remove tasks that are already marked as done.
function clearCompleted() {
const cleared = tasks.filter(t => t.completed);
tasks = tasks.filter(t => !t.completed);
console.log(`${cleared.length} completed task(s) removed.`);
}
// Initialize task list
let tasks = [];
let taskId = 1;
function addTask(description) {
tasks.push({ id: taskId++, description, completed: false });
console.log("Task added successfully.");
}
function listTasks() {
if (tasks.length === 0) {
console.log("No tasks found.");
return;
}
tasks.forEach(task => {
console.log(`[${task.completed ? "x" : " "}] ${task.id}: ${task.description}`);
});
}
function completeTask(id) {
const task = tasks.find(t => t.id === id);
if (task) {
task.completed = true;
console.log(`Task ${id} marked as completed.`);
} else {
console.log("Task not found.");
}
}
function deleteTask(id) {
const initialLength = tasks.length;
tasks = tasks.filter(task => task.id !== id);
if (tasks.length < initialLength) {
console.log(`Task ${id} deleted.`);
} else {
console.log("Task not found.");
}
}
function clearCompleted() {
const cleared = tasks.filter(t => t.completed);
tasks = tasks.filter(t => !t.completed);
console.log(`${cleared.length} completed task(s) removed.`);
}
This To-Do List App is a solid first project to apply your JavaScript basics in a meaningful way. It teaches you how to manage dynamic data, use common array methods like push()
, find()
, and filter()
, and interact with logic-driven functions.
⬅ Previous Topic
JavaScript Fetch API - Get and Post DataNext Topic ⮕
Build a Weather App Using API in JavaScriptYou can support this website with a contribution of your choice.
When making a contribution, mention your name, and programguru.org in the message. Your name shall be displayed in the sponsors list.