How to create To-Do List App with Bootstrap, HTML, CSS, and JavaScript

by

In this tutorial, we’ll create a to-do list application using Bootstrap for styling along with HTML, CSS, and JavaScript. This app will allow users to add tasks, mark them as completed, and delete them. Let’s dive in step by step:

Step 1: Setting Up the HTML Structure

				
					<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List App</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1 class="text-center mb-4">To-Do List</h1>
        <div class="input-group mb-3">
            <input type="text" id="taskInput" class="form-control" placeholder="Enter task">
            <div class="input-group-append">
                <button class="btn btn-primary" type="button" onclick="addTask()">Add Task</button>
            </div>
        </div>
        <ul id="taskList" class="list-group"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explanation:

  • We start with the <!DOCTYPE html> declaration, indicating that this document is written in HTML5.
  • The <html lang="en"> tag sets the language of the document to English.
  • Inside the <head> section, we have meta tags for character set and viewport settings, as well as a title for the page.
  • We include a link to Bootstrap’s CSS file hosted on a CDN (https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css) to apply Bootstrap styling to our app.
  • Additionally, we link a custom CSS file (styles.css) for any additional styles we want to apply.
  • In the <body> section, we have a Bootstrap container (<div class="container">) to center the content horizontally on the page.
  • We have an <h1> heading with the text “To-Do List” centered using Bootstrap utility classes.
  • Next, we have an input group containing an input field and an “Add Task” button. The input field (<input type="text" id="taskInput" class="form-control" placeholder="Enter task">) allows users to input task text, and the button (<button class="btn btn-primary" type="button" onclick="addTask()">Add Task</button>) triggers the addTask() function when clicked.
  • Finally, we have an empty <ul> element with the ID taskList (<ul id="taskList" class="list-group"></ul>), where we’ll dynamically append the list of tasks.

Step 2: Styling with CSS (Bootstrap)

Bootstrap provides a wide range of CSS classes for styling elements. In this step, we utilize some of these classes to style our to-do list app:

  • Container (<div class="container">): Bootstrap’s container class provides a responsive fixed-width container, ensuring that the content is centered and evenly spaced horizontally.

  • Heading (<h1 class="text-center mb-4">): We use Bootstrap’s text-center class to horizontally center the heading text (“To-Do List”). Additionally, mb-4 adds margin-bottom to create some space below the heading.

  • Input Group (<div class="input-group mb-3">): Bootstrap’s input group class allows us to group an input field with additional content such as buttons. We add mb-3 for some bottom margin.

  • Input Field (<input type="text" id="taskInput" class="form-control" placeholder="Enter task">): We apply the form-control class to the input field to style it as a Bootstrap form control, ensuring consistent appearance and responsiveness across devices.

  • Add Task Button (<button class="btn btn-primary" type="button" onclick="addTask()">Add Task</button>): Bootstrap’s btn class styles the button as a Bootstrap button. By adding btn-primary, we give it a primary color (blue by default).

  • List Group (<ul id="taskList" class="list-group"></ul>): We apply the list-group class to the unordered list (<ul>) to style it as a Bootstrap list group. This class adds padding and border to the list items.

  • List Group Item (<li className="list-group-item">): We utilize the list-group-item class to style each list item as a Bootstrap list group item. This class adds padding and a border to each item, ensuring consistent styling within the list.

  • Delete Button (<button class="btn btn-danger btn-sm float-right">Delete</button>): Bootstrap’s btn-danger class gives the button a red color to indicate danger or deletion action. We also add btn-sm to make it smaller and float-right to align it to the right within its container.

These Bootstrap classes help us achieve a clean and responsive design for our to-do list app without having to write extensive custom CSS. They ensure that our app looks visually appealing and functions well across different screen sizes and devices.

Step 3: Implementing JavaScript Functionality

				
					function addTask() {
    var taskInput = document.getElementById("taskInput");
    var taskList = document.getElementById("taskList");

    if (taskInput.value.trim() === "") {
        alert("Please enter a task.");
        return;
    }

    var li = document.createElement("li");
    li.textContent = taskInput.value;
    li.className = "list-group-item";
    
    li.onclick = function() {
        this.classList.toggle("text-muted");
        this.classList.toggle("text-decoration-line-through");
    };

    var deleteButton = document.createElement("button");
    deleteButton.textContent = "Delete";
    deleteButton.className = "btn btn-danger btn-sm float-right";
    deleteButton.onclick = function() {
        this.parentElement.remove();
    };

    li.appendChild(deleteButton);
    taskList.appendChild(li);
    taskInput.value = "";
}

Explanation:

  • We define a function called addTask() that gets triggered when the “Add Task” button is clicked.
  • Inside the function, we first retrieve references to the task input field (taskInput) and the task list (taskList) using document.getElementById().
  • We check if the task input is empty or contains only whitespace using trim(). If it is, we display an alert asking the user to enter a task.
  • If the input is valid, we create a new list item (<li>) using document.createElement("li") and set its text content to the value of the task input.
  • We apply the Bootstrap list-group-item class to the list item for styling consistency.
  • We add an onclick event handler to the list item. When clicked, it toggles the text-muted and text-decoration-line-through classes, which are Bootstrap utility classes for styling completed tasks.
  • Next, we create a delete button (<button>) using document.createElement("button"), set its text content to “Delete”, and apply Bootstrap button classes for styling.
  • We add an onclick event handler to the delete button. When clicked, it removes the parent element of the button (i.e., the list item) from the DOM.
  • Finally, we append the delete button to the list item and the list item to the task list, and we clear the task input field.

Step 4: Testing

After setting up the HTML, CSS, and JavaScript, we can open the HTML file in a web browser to test our to-do list app. We can add tasks, mark them as completed by clicking on them, and delete tasks by clicking the delete button next to each task. Testing ensures that our app functions as expected and allows us to identify any bugs or issues that need to be addressed.

That’s a detailed explanation of each step involved in creating a to-do list app using Bootstrap, HTML, CSS, and JavaScript. By following these steps, you can build a simple yet functional to-do list app for personal or professional use.