Learn How to Create a Custom To-Do List with Bootstrap and Local Storage in This Tutorial

by
Tiempo de lectura: 2 minutos

Reading time: 2 minutes

Good morning and happy Monday!!!

Let’s go for another tutorial, this time it’s a simple to-do list application.

Here’s the code for one way to do it:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
    <script src="to-do-list.js"></script>
    <title>To-do list for devcodelight</title>
</head>
<body>
    <div class="container">
        <h1 class="text-center">To-do List for Devcodelight</h1>
        <form id="todo-form">
          <div class="input-group mb-3">
            <input type="text" id="todo-input" class="form-control" placeholder="Add new task">
            <div class="input-group-append">
              <button class="btn btn-primary" type="submit">Add</button>
            </div>
          </div>
        </form>
        <ul id="todo-list" class="list-group"></ul>
        <button id="clear-btn" class="btn btn-danger">Clear List</button>
      </div>
</body>
</html>
The DOMContentLoaded event is triggered when the HTML document has been completely loaded and parsed, without waiting for all external resources such as images or scripts to finish downloading.
<script>
        document.addEventListener('DOMContentLoaded', function () {
            const form = document.getElementById('todo-form');
            const todoInput = document.getElementById('todo-input');
            const todoList = document.getElementById('todo-list');
            const clearButton = document.getElementById('clear-btn');
javascript
Copy code
        form.addEventListener('submit', function (event) {
            event.preventDefault();
            const todoText = todoInput.value;

            if (todoText) {
                const todoItem = document.createElement('li');
                todoItem.classList.add('list-group-item');
                todoItem.textContent = todoText;
                todoList.appendChild(todoItem);
                todoInput.value = '';
                saveTodos();
            }
        });

        clearButton.addEventListener('click', function () {
            todoList.innerHTML = '';
            saveTodos();
        });

        function loadTodos() {
            const todos = localStorage.getItem('todos');

            if (todos) {
                todoList.innerHTML = todos;
            }
        }

        function saveTodos() {
            localStorage.setItem('todos', todoList.innerHTML);
        }

        loadTodos();
    });
</script>

JavaScript Logic Implementation

  • We add an event listener (addEventListener) to the form (form) that triggers when the form is submitted (submit).
  • Within the event function, we prevent the default form behavior using event.preventDefault().
  • We get the value from the task input field (todoInput.value).
  • We create a new list item element (<li>) and assign it the value of the entered task.
  • We add the task to the task list (todoList.appendChild(todoItem)).
  • We clear the input field (todoInput.value = '') to make it empty for entering a new task.
  • We call the saveTodos() function to save the tasks to local storage.

Loading and Saving Tasks to Local Storage

  • We define two functions: loadTodos() and saveTodos().
  • The loadTodos() function retrieves the stored tasks from local storage and loads them into the task list (todoList.innerHTML = todos).
  • The saveTodos() function saves the tasks to local storage using localStorage.setItem('todos', todoList.innerHTML).

Initial Loading of Tasks on Page Load

  • We use document.addEventListener('DOMContentLoaded', loadTodos) to call the loadTodos() function when the HTML document has been completely loaded.
  • This way, when the page is loaded, the previously saved tasks will be automatically loaded from local storage.
    • We add an additional button in the HTML with the ID clear-btn.
  • We add an event listener (addEventListener) to the clear-btn button that triggers when it is clicked.
  • Within the event function, we clear the content of the task list (todoList.innerHTML = '').
  • We call the saveTodos() function to save the changes to local storage.

And that’s it! By following these steps, you can create a functional to-do list application using HTML, Bootstrap, CSS, JavaScript, and localStorage. I will be adding new functionality in the future.

Feel free to leave your comments and likes if you enjoyed it!

Post Views: 11

Leave a Comment