Create a To Do List using Tailwind CSS

Last Updated : 28 Feb, 2024

A To-Do List serves as a task organization tool, enabling users to compile, prioritize, and oversee their tasks, facilitating efficiency and productivity in their completion. In this endeavor, we’ll construct a To-Do list leveraging Tailwind CSS. Our approach involves crafting the layout or component utilizing Tailwind’s prebuilt utilities and components, coupled with custom JavaScript for implementing the to-do list’s functionality.

Screenshot-2024-02-28-073036

Approach

We create a To-Do list web application using HTML, Tailwind CSS, and JavaScript.
Tailwind CSS utility classes are employed for styling the layout, ensuring responsiveness and visual appeal.
JavaScript functionalities include adding, deleting, and editing tasks dynamically within the list.
Upon task submission, it’s appended to the list, enhancing user interactivity.
Clicking the delete button removes the respective task from the list.
An edit button toggles between displaying the task text and an input field for editing.
Default tasks are preloaded into the list upon page initialization.
The code offers a seamless user experience for managing and completing tasks efficiently.

Example: This example shows the implementation of the above-explained approach.

HTML

<!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</title>
    <!-- Include Tailwind CSS -->
    <link href=
"https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
          rel="stylesheet">
    <style>
        .completed {
            text-decoration: line-through;
        }
    </style>
</head>
 
<body class="bg-gray-100">
 
    <div class="container mx-auto my-10">
        <h1 class="text-center text-3xl font-semibold mb-4">
              To Do List
          </h1>
        <div class="md:w-1/2 mx-auto">
            <div class="bg-white shadow-md rounded-lg p-6">
                <form id="todo-form">
                    <div class="flex mb-4">
                        <input type="text"
                               class="w-full px-4 py-2 mr-2 rounded-lg
                             border-gray-300 focus:outline-none
                              focus:border-blue-500" id="todo-input"
                               placeholder="Add new task" required>
                        <button class="bg-blue-500 hover:bg-blue-700 
                            text-white font-bold py-2 px-4 rounded">
                              Add
                          </button>
                    </div>
                </form>
                <ul id="todo-list">
                    <!-- Tasks will be added here dynamically -->
                </ul>
            </div>
        </div>
    </div>
 
    <script>
        // Function to add a new task
        function addTask(task) {
            const todoList = document.getElementById("todo-list");
            const li = document.createElement("li");
            li.className = 
              "border-b border-gray-200 flex items-center justify-between py-4";
            li.innerHTML = `
                <label class="flex items-center">
                    <input type="checkbox" class="mr-2">
                    <span>${task}</span>
                </label>
                <div>
                    <button class="text-red-500 hover:text-red-700
                     mr-2 delete-btn">Delete</button>
                    <button class="text-blue-500
                     hover:text-blue-700 edit-btn">Edit</button>
                </div>
            `;
            todoList.appendChild(li);
 
            // Add event listener to the checkbox
            const checkbox = li.querySelector('input[type="checkbox"]');
            checkbox.addEventListener('change', function () {
                const taskText = this.nextElementSibling;
                if (this.checked) {
                    taskText.classList.add('completed');
                } else {
                    taskText.classList.remove('completed');
                }
            });
        }
 
        // Event listener for form submission
        document.getElementById("todo-form").addEventListener("submit",
            function (event) {
                event.preventDefault();
                const taskInput = document.getElementById("todo-input");
                const task = taskInput.value.trim();
                if (task !== "") {
                    addTask(task);
                    taskInput.value = "";
                }
            });
 
        // Event listener for delete button click
        document.getElementById("todo-list")
          .addEventListener("click",
            function (event) {
                if (event.target.classList.contains("delete-btn")) {
                    event.target.parentElement.parentElement.remove();
                }
            });
 
        // Event listener for edit button click
        document.getElementById("todo-list")
          .addEventListener("click",
            function (event) {
                if (event.target.classList.contains("edit-btn")) {
                    const taskText = event.target.
                        parentElement.parentElement.querySelector("span");
                    const newText = 
                          prompt("Enter new task", taskText.textContent);
                    if (newText !== null) {
                        taskText.textContent = newText.trim();
                    }
                }
            });
 
        // Add default tasks
        const defaultTasks = ["HTML", "CSS", "JS", "Bootstrap"];
        defaultTasks.forEach(task => addTask(task));
    </script>
</body>
 
</html>

Output:

quote

Suggest improvement

How to create a full-width Container in Tailwind CSS?

Pin Ball Game using HTML CSS & JavaScript

Share your thoughts in the comments

Create a To Do List using Tailwind CSS

Approach

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?