Given a todo list web application

Oct 13, 2025 by wbrum.org 86 views

Introduction

In this technical education project, we will be building a todo-list app that allows users to create, edit, and delete tasks with deadlines. This project is designed to develop problem-solving skills and is a great opportunity to practice coding and collaboration. In this article, we will guide you through the process of building this app, step by step.

Why Build a Todo-List App?

A todo-list app is a simple yet effective tool for managing tasks and deadlines. It allows users to create a list of tasks, set deadlines, and mark tasks as completed. This app is a great way to practice coding and collaboration, and it can be used in a variety of settings, from personal to professional.

Acceptance Criteria

The following are the acceptance criteria for this project:

Given a todo list web application: When the page loads, the populateTodoList() function should create todo list items for each hardcoded todo.
When a todo list item is created: Then it should contain: ☑ 🗑 todo text.
When the checkbox icon is clicked: Then the todo text should have strikethrough, and the checkbox should be ticked ✅ 🗑 ~todo text~.
Given a todo list item on the page: When the trash icon is clicked, then the todo list item should be deleted.
Given a button to add new todos: When the button is clicked, then a new todo should be added to the list with the checkbox and trash icons.
Given a button to mass delete completed todos: When the button is clicked, then any todos that have been checked off should be deleted.
Given the ability to set a deadline when creating a todo: When a deadline is set, then the deadline should be displayed next to the todo text.

Getting Started

To get started with this project, you will need to fork the repository to your GitHub account. Then, make a new branch for this project and start coding. Make regular small commits in this branch with clear messages. When you are ready, open a PR to the CYF repo, following the instructions in the PR template.

Step 1: Create the Todo List

To create the todo list, you will need to create a new HTML file and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Todo List</h1>
    <ul id="todo-list"></ul>
    <button id="add-todo-btn">Add Todo</button>
    <button id="delete-completed-btn">Delete Completed</button>
    <script src="script.js"></script>
</body>
</html>

This code creates a new HTML file with a title, a todo list, and two buttons to add new todos and delete completed todos.

Step 2: Add the Todo List Items

To add the todo list items, you will need to create a new JavaScript file and add the following code:

// Get the todo list element
const todoList = document.getElementById('todo-list');

// Create a function to populate the todo list
function populateTodoList() {
    // Create a new todo list item for each hardcoded todo
    const todos = [
        { text: 'Buy milk', deadline: '2023-03-12' },
        { text: 'Walk the dog', deadline: '2023-03-13' },
        { text: 'Do laundry', deadline: '2023-03-14' },
    ];

    // Loop through each todo and create a new list item
    todos.forEach((todo) => {
        const listItem = document.createElement('li');
        listItem.textContent = todo.text;
        listItem.dataset.deadline = todo.deadline;
        listItem.appendChild(createCheckbox());
        listItem.appendChild(createTrashIcon());
        todoList.appendChild(listItem);
    });
}

// Create a function to create a checkbox
function createCheckbox() {
    const checkbox = document.createElement('input');
    checkbox.type = 'checkbox';
    checkbox.addEventListener('click', () => {
        // Get the todo text and strikethrough it when the checkbox is clicked
        const todoText = checkbox.parentNode.textContent;
        const strikethroughText = todoText.replace(todoText, '~' + todoText + '~');
        checkbox.parentNode.textContent = strikethroughText;
    });
    return checkbox;
}

// Create a function to create a trash icon
function createTrashIcon() {
    const trashIcon = document.createElement('span');
    trashIcon.textContent = '🗑';
    trashIcon.addEventListener('click', () => {
        // Get the todo list item and remove it when the trash icon is clicked
        const todoListItem = trashIcon.parentNode;
        todoList.removeChild(todoListItem);
    });
    return trashIcon;
}

// Call the populateTodoList function to create the todo list items
populateTodoList();

This code creates a new JavaScript file with a function to populate the todo list. The function creates a new todo list item for each hardcoded todo and adds a checkbox and trash icon to each item.

Step 3: Add the Add Todo Button

To add the add todo button, you will need to create a new JavaScript file and add the following code:

// Get the add todo button element
const addTodoBtn = document.getElementById('add-todo-btn');

// Create a function to add a new todo
function addTodo() {
    // Create a new todo list item
    const todoListItem = document.createElement('li');
    const todoText = prompt('Enter a new todo:');
    const deadline = prompt('Enter a deadline:');
    todoListItem.textContent = todoText;
    todoListItem.dataset.deadline = deadline;
    todoListItem.appendChild(createCheckbox());
    todoListItem.appendChild(createTrashIcon());
    todoList.appendChild(todoListItem);
}

// Add an event listener to the add todo button to call the addTodo function
addTodoBtn.addEventListener('click', addTodo);

This code creates a new JavaScript file with a function to add a new todo. The function creates a new todo list item and adds a checkbox and trash icon to it.

Step 4: Add the Delete Completed Button

To add the delete completed button, you will need to create a new JavaScript file and add the following code:

// Get the delete completed button element
const deleteCompletedBtn = document.getElementById('delete-completed-btn');

// Create a function to delete completed todos
function deleteCompletedTodos() {
    // Get all the todo list items
    const todoListItems = todoList.children;

    // Loop through each todo list item and remove it if it has been checked off
    for (let i = 0; i < todoListItems.length; i++) {
        const todoListItem = todoListItems[i];
        if (todoListItem.querySelector('input[type="checkbox"]:checked')) {
            todoList.removeChild(todoListItem);
        }
    }
}

// Add an event listener to the delete completed button to call the deleteCompletedTodos function
deleteCompletedBtn.addEventListener('click', deleteCompletedTodos);

This code creates a new JavaScript file with a function to delete completed todos. The function gets all the todo list items and removes each item if it has been checked off.

Conclusion

Introduction

In our previous article, we guided you through the process of building a todo-list app. We created a new HTML file with a title, a todo list, and two buttons to add new todos and delete completed todos. We also created a new JavaScript file with functions to populate the todo list, add a new todo, and delete completed todos. In this article, we will answer some frequently asked questions about building a todo-list app.

Q: What is the purpose of a todo-list app?

A: A todo-list app is a simple yet effective tool for managing tasks and deadlines. It allows users to create a list of tasks, set deadlines, and mark tasks as completed. This app is a great way to practice coding and collaboration, and it can be used in a variety of settings, from personal to professional.

Q: What are the acceptance criteria for this project?

A: The acceptance criteria for this project are:

Given a todo list web application: When the page loads, the populateTodoList() function should create todo list items for each hardcoded todo.
When a todo list item is created: Then it should contain: ☑ 🗑 todo text.
When the checkbox icon is clicked: Then the todo text should have strikethrough, and the checkbox should be ticked ✅ 🗑 ~todo text~.
Given a todo list item on the page: When the trash icon is clicked, then the todo list item should be deleted.
Given a button to add new todos: When the button is clicked, then a new todo should be added to the list with the checkbox and trash icons.
Given a button to mass delete completed todos: When the button is clicked, then any todos that have been checked off should be deleted.
Given the ability to set a deadline when creating a todo: When a deadline is set, then the deadline should be displayed next to the todo text.

Q: How do I create a new todo list item?

A: To create a new todo list item, you will need to create a new JavaScript file and add the following code:

// Create a function to add a new todo
function addTodo() {
    // Create a new todo list item
    const todoListItem = document.createElement('li');
    const todoText = prompt('Enter a new todo:');
    const deadline = prompt('Enter a deadline:');
    todoListItem.textContent = todoText;
    todoListItem.dataset.deadline = deadline;
    todoListItem.appendChild(createCheckbox());
    todoListItem.appendChild(createTrashIcon());
    todoList.appendChild(todoListItem);
}

This code creates a new JavaScript file with a function to add a new todo. The function creates a new todo list item and adds a checkbox and trash icon to it.

Q: How do I delete completed todos?

A: To delete completed todos, you will need to create a new JavaScript file and add the following code:

// Create a function to delete completed todos
function deleteCompletedTodos() {
    // Get all the todo list items
    const todoListItems = todoList.children;

    // Loop through each todo list item and remove it if it has been checked off
    for (let i = 0; i < todoListItems.length; i++) {
        const todoListItem = todoListItems[i];
        if (todoListItem.querySelector('input[type="checkbox"]:checked')) {
            todoList.removeChild(todoListItem);
        }
    }
}

This code creates a new JavaScript file with a function to delete completed todos. The function gets all the todo list items and removes each item if it has been checked off.

Q: How do I set a deadline for a todo?

A: To set a deadline for a todo, you will need to create a new JavaScript file and add the following code:

// Create a function to set a deadline for a todo
function setDeadline() {
    // Get the todo text and deadline
    const todoText = prompt('Enter a new todo:');
    const deadline = prompt('Enter a deadline:');
    // Create a new todo list item
    const todoListItem = document.createElement('li');
    todoListItem.textContent = todoText;
    todoListItem.dataset.deadline = deadline;
    todoListItem.appendChild(createCheckbox());
    todoListItem.appendChild(createTrashIcon());
    todoList.appendChild(todoListItem);
}

This code creates a new JavaScript file with a function to set a deadline for a todo. The function gets the todo text and deadline and creates a new todo list item with the deadline displayed next to the todo text.

Conclusion

In this article, we have answered some frequently asked questions about building a todo-list app. We have covered the purpose of a todo-list app, the acceptance criteria, and how to create a new todo list item, delete completed todos, and set a deadline for a todo. This app is a great way to practice coding and collaboration, and it can be used in a variety of settings, from personal to professional.