How to Create a jQuery Project? A Step-by-Step Guide for Beginners

Introduction

jQuery is a popular JavaScript library that simplifies tasks such as selecting HTML elements, handling events, updating page content, and making AJAX requests.

Learning jQuery becomes easier when you apply its concepts to a working project instead of studying syntax alone.

In this tutorial, we will create a simple To-Do List Project using HTML, CSS, and jQuery. Users will be able to add tasks, mark them as completed, and delete tasks without refreshing the webpage.

By the end of this tutorial, you will understand how to:

• Set up a jQuery project.

• Connect HTML, CSS, and JavaScript.

• Use jQuery selectors and event handlers.

• Add and remove HTML elements dynamically.

• Update CSS classes using jQuery.

• Test your project in a browser.

1. What Do You Need to Create a jQuery Project?

Before starting, make sure you have the following tools:

Tool	Purpose
Visual Studio Code	Writing and editing code
Web browser	Running and testing the project
HTML	Creating the webpage structure
CSS	Styling the user interface
jQuery	Adding interactive behaviour

You do not need a database or backend for this beginner project.

2. Create a Project Folder

First, create a folder named jquery-todo-project.

Inside this folder, create the following files:

jquery-todo-project/
├── index.html
├── style.css
└── script.js

Each file has a specific responsibility:

• index.html contains the webpage structure.

• style.css controls the appearance.

• script.js contains the jQuery functionality.

Keeping these files separate makes your project easier to maintain.

3. Create the HTML Structure

Open index.html 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>jQuery To-Do List Project</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <main class="todo-container">
        <h1>My To-Do List</h1>
        <p class="subtitle">Organize your daily tasks.</p>

        <form id="taskForm">
            <input
                type="text"
                id="taskInput"
                placeholder="Enter a task..."
                aria-label="Enter a task"
                maxlength="200"
                required
            >

            <button type="submit" id="addTask">
                Add Task
            </button>
        </form>

        <p id="message" role="status" aria-live="polite"></p>

        <ul id="taskList"></ul>

        <p class="footer-text">
            Simple project built with HTML, CSS and jQuery.
        </p>
    </main>

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

</body>
</html>

HTML Code Explanation

The task input

<input type="text" id="taskInput" placeholder="Enter a task...">

This field allows users to type a task.

The form

<form id="taskForm">

The form provides a convenient way to handle task submission, including submission using the Enter key.

The task list

<ul id="taskList"></ul>

jQuery will insert new task elements into this list.

The script files

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

The jQuery library must load before your own script because your code uses jQuery methods.

4. Design the Project Using CSS

Open style.css and paste the following code:

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    padding: 24px;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    font-family: Arial, sans-serif;
    background: #f2f6fc;
    color: #1f2937;
}

.todo-container {
    width: 100%;
    max-width: 600px;
    margin-top: 40px;
    padding: 28px;
    background: #ffffff;
    border: 1px solid #e1e8f0;
    border-radius: 14px;
    box-shadow: 0 8px 25px rgba(20, 50, 90, 0.08);
}

h1 {
    margin: 0 0 8px;
    color: #174ea6;
    text-align: center;
}

.subtitle {
    margin-bottom: 24px;
    color: #64748b;
    text-align: center;
}

#taskForm {
    display: flex;
    gap: 10px;
}

#taskInput {
    flex: 1;
    min-width: 0;
    padding: 12px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 16px;
}

#taskInput:focus {
    outline: 2px solid #93c5fd;
    border-color: #174ea6;
}

button {
    padding: 11px 15px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    font-size: 14px;
}

#addTask {
    background: #174ea6;
    color: white;
}

#addTask:hover {
    background: #123d83;
}

#message {
    min-height: 20px;
    margin: 14px 0;
    color: #475569;
    font-size: 14px;
}

#taskList {
    margin: 0;
    padding: 0;
    list-style: none;
}

#taskList li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    padding: 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.task-text {
    flex: 1;
    min-width: 0;
    overflow-wrap: anywhere;
}

.completed .task-text {
    color: #64748b;
    text-decoration: line-through;
}

.completeTask {
    background: #fef3c7;
    color: #92400e;
}

.deleteTask {
    background: #fee2e2;
    color: #b91c1c;
}

.footer-text {
    margin: 24px 0 0;
    color: #64748b;
    font-size: 12px;
    text-align: center;
}

@media (max-width: 480px) {
    body {
        padding: 12px;
    }

    .todo-container {
        margin-top: 20px;
        padding: 18px;
    }

    #taskForm {
        flex-direction: column;
    }

    #taskForm button {
        width: 100%;
    }

    #taskList li {
        flex-wrap: wrap;
    }
}

CSS Code Explanation

• max-width: 600px keeps the project container readable.

• display: flex aligns the input and Add Task button.

• .completed .task-text applies a line-through effect to completed tasks.

• .deleteTask gives Delete buttons a different appearance.

• The media query adjusts the layout for smaller mobile screens.

5. Add Functionality Using jQuery

Now open script.js and add the following code:

$(document).ready(function () {

    // Add a new task
    $("#taskForm").on("submit", function (event) {
        event.preventDefault();

        const taskText = $("#taskInput").val().trim();

        if (taskText === "") {
            $("#message").text("Please enter a task.");
            return;
        }

        const listItem = $("<li></li>");
        const taskLabel = $("<span>", {
            class: "task-text"
        }).text(taskText);

        const completeButton = $("<button>", {
            type: "button",
            class: "completeTask",
            text: "Complete",
            "aria-pressed": "false"
        });

        const deleteButton = $("<button>", {
            type: "button",
            class: "deleteTask",
            text: "Delete"
        });

        listItem.append(taskLabel, completeButton, deleteButton);
        $("#taskList").append(listItem);

        $("#taskInput").val("");
        $("#message").text("Task added successfully.");
        $("#taskInput").trigger("focus");
    });

    // Mark a task as completed or pending
    $("#taskList").on("click", ".completeTask", function () {
        const button = $(this);
        const task = button.closest("li");
        const isCompleted = task.hasClass("completed");

        task.toggleClass("completed", !isCompleted);

        button
            .text(isCompleted ? "Complete" : "Undo")
            .attr("aria-pressed", String(!isCompleted));

        $("#message").text(
            isCompleted
                ? "Task marked as pending."
                : "Task marked as completed."
        );
    });

    // Delete a task
    $("#taskList").on("click", ".deleteTask", function () {
        $(this).closest("li").remove();
        $("#message").text("Task deleted.");
    });

});

How the jQuery Code Works

1. Wait until the document is ready

$(document).ready(function () {
    // Your code
});

This ensures the HTML is ready before the code tries to select elements.

2. Handle form submission

$("#taskForm").on("submit", function (event) {
    event.preventDefault();
});

The submit event runs when the user submits the form. preventDefault() prevents the browser's normal form submission and page navigation.

3. Get the input value

const taskText = $("#taskInput").val().trim();

The .val() method retrieves the input value, while .trim() removes surrounding whitespace.

4. Create elements dynamically

const taskLabel = $("<span>").text(taskText);

jQuery creates a new element. The .text() method inserts the task as text instead of interpreting user input as HTML.

5. Use event delegation

$("#taskList").on("click", ".deleteTask", function () {
    $(this).closest("li").remove();
});

This lets the existing task list handle clicks on Delete buttons, including buttons created after the page loads.

6. How to Run Your jQuery Project

Follow these steps:

1. Open the jquery-todo-project folder in Visual Studio Code.

2. Check that all three files are saved in the same folder.

3. Open index.html in a browser. You can use the Live Server extension in VS Code if installed.

4. Type a task into the input field.

5. Click Add Task.

6. Click Complete to mark a task as completed.

7. Click Undo to return it to pending status.

8. Click Delete to remove a task.

An internet connection is needed for the jQuery CDN version used in this example.

7. What Will You Learn from This Project?

This small project demonstrates several important jQuery concepts.

jQuery method or feature	Purpose
$(document).ready()	Runs code when the DOM is ready.
.on()	Registers event handlers.
.val()	Reads or updates input values.
.text()	Reads or sets text content.
.append()	Adds elements inside another element.
.closest()	Finds the nearest matching ancestor.
.remove()	Removes an element from the DOM.
.toggleClass()	Adds or removes a CSS class.
.attr()	Reads or updates an HTML attribute.

Understanding these methods will help you build more advanced jQuery applications.

8. Common Mistakes When Creating a jQuery Project

Mistake 1: Incorrect file paths

If your CSS or JavaScript does not load, check the file names and paths.

For example:

<link rel="stylesheet" href="style.css">
<script src="script.js"></script>

These paths work when the files are located beside index.html.

Mistake 2: Loading jQuery after your own script

If your script uses $ before jQuery is loaded, you may see a ReferenceError.

Solution: Load jQuery before script.js.

Mistake 3: Forgetting preventDefault()

A form may reload the page when submitted normally.

Solution: Use event.preventDefault() when handling submission through jQuery and updating the page dynamically.

Mistake 4: Using direct events for dynamic buttons

A direct event handler attached to buttons that already exist will not automatically apply to buttons created later.

Solution: Use event delegation through an existing parent element.

Mistake 5: Assuming tasks are permanently saved

This beginner project stores tasks only in the current page's DOM. Refreshing the browser clears the added tasks.

Solution: Use localStorage for simple browser-side persistence, or a backend and database for multi-user applications and server-side storage.

9. Best Practices for jQuery Projects

• Keep HTML, CSS, and JavaScript in separate files.

• Use descriptive IDs and class names.

• Use event delegation for dynamically added elements.

• Validate user input.

• Use .text() for displaying untrusted text.

• Avoid loading multiple jQuery versions.

• Test the project on mobile and desktop screens.

• Use browser developer tools to debug errors.

• Add persistence only when required by the project.

• Read plugin documentation before integrating third-party libraries.

10. Frequently Asked Questions

Q1. What is a jQuery project?

A jQuery project is a web application or webpage that uses the jQuery library to simplify JavaScript tasks such as event handling, DOM manipulation, and AJAX requests.

Q2. Can I create a jQuery project without a backend?

Yes. You can create interactive projects using only HTML, CSS, and jQuery. A backend is needed when the application requires server-side processing, shared data, or database storage.

Q3. Which software is required for jQuery development?

A code editor such as Visual Studio Code and a modern web browser are sufficient for a basic project.

Q4. Does jQuery work with HTML and CSS?

Yes. jQuery works with HTML elements and can modify their text, attributes, classes, and styles.

Q5. Will my tasks remain after refreshing the page?

Not in this version. The tasks are stored only in the page's DOM. You need browser storage or a backend database to persist them.

Q6. Is jQuery suitable for beginners?

Yes. jQuery can make common JavaScript tasks easier to learn, especially when practising selectors, events, and DOM manipulation.

11. jQuery Project Interview Questions

1. What is jQuery, and why is it used?

2. How do you include jQuery in an HTML page?

3. What does $(document).ready() do?

4. What is the difference between .text() and .html()?

5. How do you add an element dynamically with jQuery?

6. What is event delegation?

7. Why do we use event.preventDefault()?

8. How can you save task data after a page refresh?

12. Practice Exercises

Try these exercises after completing the project:

1. Add a button that deletes all tasks.

2. Display the total number of tasks.

3. Display the number of completed and pending tasks.

4. Add a filter to show all, completed, or pending tasks.

5. Save tasks in localStorage so they remain after refreshing the page.

6. Add an edit button that lets users update a task.

7. Add a search field to find tasks by keyword.

13. Multiple-Choice Questions (MCQs)

Q1. Which method reads an input field's value in jQuery?

A. .html()

B. .val()

C. .remove()

D. .append()

Correct Answer: B. .val()

Q2. Which method removes an element from the DOM?

A. .remove()

B. .show()

C. .text()

D. .css()

Correct Answer: A. .remove()

Q3. Why do we use event.preventDefault() when handling the task form?

A. To delete jQuery

B. To prevent the browser's default form submission

C. To change the page title

D. To load a database

Correct Answer: B. To prevent the browser's default form submission.

Q4. Which method can handle clicks on dynamically added child elements?

A. .on() with a delegated selector

B. .hide() only

C. .val() only

D. .width() only

Correct Answer: A. .on() with a delegated selector.

Q5. What happens to tasks in this beginner project after a page refresh?

A. They are automatically saved in a database.

B. They are automatically sent to an API.

C. Added tasks disappear because they are not persisted.

D. They become permanent browser files.

Correct Answer: C. Added tasks disappear because they are not persisted.

Conclusion

Creating a jQuery project is a practical way to understand how HTML, CSS, and JavaScript work together.

In this tutorial, you created a To-Do List application that allows users to add, complete, undo, and delete tasks without refreshing the page.

You also learned how to use jQuery selectors, event handlers, dynamic elements, and CSS classes in a working project.

Once you understand these fundamentals, you can improve the project by adding search, filters, editing, browser storage, or a backend database.