Creating a simple to-do list app with jQuery

Creating a simple to-do list app using jQuery is a great project to understand fundamental concepts such as DOM manipulation, event handling, local storage, and dynamic UI updates. In this guide, we will go step by step to create a fully functional to-do list application using jQuery, explaining each aspect in detail.

Introduction to jQuery and To-Do List App
Setting Up the Project
Creating the HTML Structure
Styling the To-Do List with CSS
Writing jQuery Script:
- Adding new tasks
- Marking tasks as complete
- Deleting tasks
- Editing tasks
- Saving tasks in Local Storage
Enhancing User Experience
Testing and Debugging
Final Thoughts

1. Introduction to jQuery and To-Do List App

A to-do list app allows users to add tasks, mark them as completed, edit or delete them, and save their progress. Using jQuery simplifies event handling and makes the UI more interactive.

Features of Our To-Do List:

Add new tasks dynamically
Mark tasks as completed
Edit existing tasks
Delete tasks
Save tasks in Local Storage (data persists after page refresh)

2. Setting Up the Project

Before we start coding, make sure you have:

A text editor (VS Code, Sublime Text, etc.)
A web browser
jQuery Library (CDN or local file)

Include jQuery in Your Project

You can include jQuery by adding the following <script> tag in your HTML file:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Alternatively, you can download jQuery and reference it locally.

3. Creating the HTML Structure

Let’s create a simple HTML file with an input field, an “Add Task” button, and a task list.

<!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="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>To-Do List</h1>
        <div class="input-section">
            <input type="text" id="taskInput" placeholder="Enter a new task">
            <button id="addTaskBtn">Add Task</button>
        </div>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

Explanation:

The input field (#taskInput) is where users type their tasks.
The “Add Task” button (#addTaskBtn) adds the task to the list.
The unordered list (#taskList) displays the tasks.

4. Styling the To-Do List with CSS

Create a styles.css file and add the following styles:

body {
    font-family: Arial, sans-serif;
    background-color: #f5f5f5;
    text-align: center;
}

.container {
    width: 50%;
    margin: auto;
    background: white;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    margin-bottom: 20px;
}

.input-section {
    display: flex;
    justify-content: center;
}

input {
    padding: 10px;
    width: 70%;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    padding: 10px;
    border: none;
    background-color: #28a745;
    color: white;
    cursor: pointer;
    border-radius: 5px;
    margin-left: 10px;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    background: #ffffff;
    padding: 10px;
    margin: 5px 0;
    display: flex;
    justify-content: space-between;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.completed {
    text-decoration: line-through;
    color: gray;
}

5. Writing jQuery Script

Now, create script.js and add the following jQuery code:

Adding New Tasks

$(document).ready(function() {
    $("#addTaskBtn").click(function() {
        let taskText = $("#taskInput").val().trim();
        if (taskText !== "") {
            let taskItem = $("<li></li>").text(taskText);
            let deleteBtn = $("<button></button>").text("Delete").addClass("delete-btn");
            let completeBtn = $("<button></button>").text("Complete").addClass("complete-btn");

            taskItem.append(completeBtn, deleteBtn);
            $("#taskList").append(taskItem);
            $("#taskInput").val(""); // Clear input field
        }
    });
});

Marking Tasks as Complete

$(document).on("click", ".complete-btn", function() {
    $(this).parent().toggleClass("completed");
});

Deleting Tasks

$(document).on("click", ".delete-btn", function() {
    $(this).parent().remove();
});

Editing Tasks

$(document).on("dblclick", "li", function() {
    let currentText = $(this).text().replace("DeleteComplete", ""); // Remove button text
    let newText = prompt("Edit Task:", currentText);
    if (newText) {
        $(this).contents().first().replaceWith(newText);
    }
});

Saving Tasks in Local Storage

To keep tasks even after a page refresh, modify the script:

Save to Local Storage

function saveTasks() {
    let tasks = [];
    $("#taskList li").each(function() {
        tasks.push({
            text: $(this).contents().first().text(),
            completed: $(this).hasClass("completed")
        });
    });
    localStorage.setItem("tasks", JSON.stringify(tasks));
}

Load from Local Storage

function loadTasks() {
    let tasks = JSON.parse(localStorage.getItem("tasks")) || [];
    tasks.forEach(task => {
        let taskItem = $("<li></li>").text(task.text);
        if (task.completed) taskItem.addClass("completed");

        let deleteBtn = $("<button></button>").text("Delete").addClass("delete-btn");
        let completeBtn = $("<button></button>").text("Complete").addClass("complete-btn");

        taskItem.append(completeBtn, deleteBtn);
        $("#taskList").append(taskItem);
    });
}

$(document).ready(function() {
    loadTasks();

    $(document).on("click", ".delete-btn, .complete-btn", saveTasks);
});

6. Enhancing User Experience

Add animations using .fadeIn() and .fadeOut().
Prevent duplicate tasks.
Add a category system (e.g., Work, Personal).

7. Testing and Debugging

Test on different browsers.
Ensure Local Storage works.
Validate edge cases like empty inputs.

8. Final Thoughts

You’ve successfully created a simple to-do list app using jQuery. This project covered: ✔ Event handling
✔ Dynamic UI updates
✔ Local Storage
✔ jQuery methods like .append(), .remove(), .toggleClass()

Now, you can enhance this project by adding priorities, deadlines, and filtering options.

Happy coding!