Gain insights into jQuery for interactive web pages with animations, event-handling, AJAX, and DOM manipulation. Explore core concepts and apply your knowledge in an interactive project with quizzes.

This course will introduce you to jQuery, a framework for building interactive web pages with animations, visual effects, and advanced functionality. You will start with a brief introduction to the course and jQuery. 

Next, you will explore the core concepts in jQuery, such as event-handling, animations, and in-browser manipulation of the document object model. 

Finally, you will learn about the AJAX framework in jQuery for dynamic content loading in web pages. On top of that, you will be working on an interactive project throughout the course with quizzes and challenges at the end of each chapter.

The Complete Guide to jQuery

## Project

To better understand jQuery applications, we will be working on an *interactive project*. In this project, we will add jQuery functionality to a **"to-do list"** webpage. The project will build incrementally and be divided into six sub-tasks:

* Assigning a click event handler
* Adding a task in the todo list
* Deleting a task from the todo list
* Moving a task from todo to done
* Moving and removing tasks with effects
* Importing tasks to the to-do list from a server

Each of the sub-tasks will provide a hands-on experience meant to test the functionality learned in a given chapter. 

## Final Preview
Below is a *preview* of what the final project will look like after adding jQuery functionality. 

> <img src="/udata/4WmGXOpBeeY/blacklogo.png" height="22" width="25" />  You can play around with the web page by *adding, deleting, or updating a task* while focusing on its interactivity and functionality.

*{
  margin: 0;
  padding: 0;
  font-family: "montserrat",sans-serif;
  box-sizing: border-box;
}

body{
  background-image: linear-gradient(80deg,#96d1cd,#Dbe1f5);
  min-height: 100vh;
}

h3{
  margin: 10px 0;
}

#addTask{
  float: right;
  margin-right: 30px;
  margin-top: 10px;
  background: none;
  cursor: pointer;
  border: none;
  font-size: 25px;
}

#import{
  float: right;
  margin-right: 30px;
  margin-top: 10px;
  background: none;
  cursor: pointer;
  border: none;
  font-size: 25px;
}


.container{
  max-width: 800px;
  margin: auto;
  padding: 10px;
}

.textBox{
  width: 85%;
  border: none;
  border-bottom: 2px solid #000;
  background: none;
  padding: 10px;
  outline: none;
  font-size: 18px;
}

.task{
  width: 100%;
  background: rgba(255,255,255,0.5);
  padding: 18px;
  margin: 6px 0;
  overflow: hidden;
}

.task button{
  float: right;
  margin-left: 20px;
  cursor: pointer;
  border: none;
  font-size: 18px;
}



$(document).ready(function () {
    $("#import").click(function(){
        jQuery.get("https://5f28559af5d27e001612eebf.mockapi.io/tasks/",
        function(data,textStatus){
            // extracting the list of tasks from server response
            todoTasks = data.tasks
            // iterating over the list and adding each task one by one
            for (index = 0; index < todoTasks.length; index++) {
                    var taskElement = $("<div> </div>")
                    taskElement.addClass("task")
                    taskElement.text(todoTasks[index])
                    var deleteBtnElement = $("<button id='delete'> </button>")
                    deleteBtnElement.addClass("fas fa-trash-alt")
                    var doneBtnElement =  $("<button id='done'> </button>")
                    doneBtnElement.addClass("fas fa-check")
                    taskElement.append(deleteBtnElement,doneBtnElement)
                    $(".notCompleted").append(taskElement) 
                }
            },
            "json");
    });



    $("div").on("click", "#done", function(){
        // extracting the parent task element beforing deleting the done button
        var taskElement = $(this).parent()  
        // fading out the task from todo
        taskElement.fadeOut(1000,function(){
            // removing the done button element
            $(this).remove()
            //detaching the task from to-do
            var detachedTask = taskElement.detach()
            // attaching the task to done
            $(".completed").append(detachedTask) 
            // fading the task back in
            detachedTask.fadeIn(1000);
            });
    });

    $("div").on("click", "#delete", function(){
        var taskToDelete = $(this).parent()
        // fading out the task
        taskToDelete.fadeOut(1000, function(){
              // deleting the task in callback function
              taskToDelete.remove() 
            });   
    });

    $("#addTask").click(function(){ // click event handler
        if($(".textBox").val() != ""){
            var taskElement = $("<div> </div>")
            taskElement.addClass("task")
            taskElement.text($(".textBox").val())

            var deleteBtnElement = $("<button id='delete'> </button>")
            deleteBtnElement.addClass("fas fa-trash-alt")

            var doneBtnElement =  $("<button id='done'> </button>")
            doneBtnElement.addClass("fas fa-check")

            taskElement.append(deleteBtnElement,doneBtnElement)

            $(".notCompleted").append(taskElement)

            $(".textBox").val("") // clear out the text box
        } 
        else {
            alert("Error: Please enter a task before clicking the 'Add' button.");
        }
        });
    });

codemirror

# Project

To better understand jQuery applications, we will be working on an *interactive project*. In this project, we will add jQuery functionality to a **"to-do list"** webpage. The project will build incrementally and be divided into six sub-tasks:

* Assigning a click event handler
* Adding a task in the todo list
* Deleting a task from the todo list
* Moving a task from todo to done
* Moving and removing tasks with effects
* Importing tasks to the to-do list from a server

Each of the sub-tasks will provide a hands-on experience meant to test the functionality learned in a given chapter. 

# Final Preview
Below is a *preview* of what the final project will look like after adding jQuery functionality. 

> <img src="/udata/4WmGXOpBeeY/blacklogo.png" height="22" width="25" />  You can play around with the web page by *adding, deleting, or updating a task* while focusing on its interactivity and functionality.

Get introduced to the project and its challenges.

jQuery Basics

Events and Event Handlers

DOM Traversal and Manipulation

Effects and Animations

AJAX Methods

Conclusion

Project: A To-do List

Project

Final Preview