JQuery To-Do List Project 🎯

Welcome to the JQuery To-Do List Project tutorial! This lesson is designed for both beginners and intermediate learners. By the end of this tutorial, you'll have a practical understanding of how to create a To-Do List application using JQuery, a popular JavaScript library.

What is JQuery? 📝

JQuery is a fast, small, and feature-rich JavaScript library. It makes it easier to manipulate HTML documents, handle events, and perform animations.

Setting Up the Project 💡

First, let's set up our project.

Create an HTML file (index.html) and a JavaScript file (script.js).
Link the JavaScript file in the HTML file.

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>
    <link rel="stylesheet" href="styles.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="script.js"></script>
</head>
<body>
    <!-- To-Do List content here -->
</body>
</html>

Creating the To-Do List 💡

We'll create a simple To-Do List with JQuery.

Create a <ul> element for the To-Do List items.
Add a form for users to input new tasks.
Use JQuery to add new tasks to the list when the form is submitted.

html

<!DOCTYPE html>
<html lang="en">
<!-- ... -->
<body>
    <ul id="toDoList"></ul>
    <form id="taskForm">
        <input type="text" id="taskInput" placeholder="Enter a task">
        <button type="submit">Add Task</button>
    </form>
    <!-- ... -->
</body>
<!-- ... -->

In the script.js file, we'll use JQuery to handle the form submission and add new tasks to the list.

javascript

$(document).ready(function() {
    // Event listener for form submission
    $('#taskForm').on('submit', function(e) {
        e.preventDefault(); // Prevent page reload

        // Get the new task
        var task = $('#taskInput').val();

        // Create a new list item and add it to the list
        var listItem = $('<li></li>').text(task);
        $('#toDoList').append(listItem);

        // Clear the input field
        $('#taskInput').val('');
    });
});

Styling the To-Do List (Optional) 💡

For a better user experience, you can style your To-Do List using CSS.

css

/* ... */
ul {
    list-style-type: none;
    padding: 0;
}
li {
    margin-bottom: 10px;
}
/* ... */

Quiz 📝

Advanced Topics (Optional) 💡

Mark tasks as completed
Delete tasks
Sort tasks
Search tasks

These advanced topics will help you build more robust To-Do List applications. Happy coding! 🎉