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

## Problem statement

We have added a new "server" button on the webpage with the icon <img src="/udata/wL22xbWa20w/download.png" height="20" width="20" /> , and `id` set to `import`. In this challenge, the task is this: 

* When the user clicks on the "server" `button` element, _import_ a list of tasks from an external server using a GET request. 

* Then, add the imported tasks one-by-one at the end of the to-do list on the webpage.

We will use the AJAX `get()` method in jQuery. The required parameters are: 

* The **server URL** to make the GET request is https://5f28559af5d27e001612eebf.mockapi.io/tasks/

* The expected server response is of the **data type** "JSON." The response object consists of two fields - `id` and `tasks`. `tasks` contains a list of tasks to be added to the to-do list. Check out the sample server response below.

~~~json
    {
       "id": 1,
       "tasks": [
        "complete assignment",
        "study on educative",
        "reply to emails"
       ]
    }
~~~

## Sample input

Click on the _"server"_ button next to the _"Add"_ button.

## Sample output

The tasks are imported from the server and added to the to-do list. 

## Coding exercise

The problem is designed for your practice, so you are encouraged to solve it on your own. If you are completely stuck, refer to the solution review in the next lesson for guidance.

*{
  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() {
        
        // code for get request and task addition goes here

    });

    $("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

# Problem statement

We have added a new "server" button on the webpage with the icon <img src="/udata/wL22xbWa20w/download.png" height="20" width="20" /> , and `id` set to `import`. In this challenge, the task is this: 

* When the user clicks on the "server" `button` element, _import_ a list of tasks from an external server using a GET request. 

* Then, add the imported tasks one-by-one at the end of the to-do list on the webpage.

We will use the AJAX `get()` method in jQuery. The required parameters are: 

* The **server URL** to make the GET request is https://5f28559af5d27e001612eebf.mockapi.io/tasks/

* The expected server response is of the **data type** "JSON." The response object consists of two fields - `id` and `tasks`. `tasks` contains a list of tasks to be added to the to-do list. Check out the sample server response below.

~~~json
    {
       "id": 1,
       "tasks": [
        "complete assignment",
        "study on educative",
        "reply to emails"
       ]
    }
~~~

# Sample input

Click on the _"server"_ button next to the _"Add"_ button.

# Sample output

The tasks are imported from the server and added to the to-do list. 

# Coding exercise

The problem is designed for your practice, so you are encouraged to solve it on your own. If you are completely stuck, refer to the solution review in the next lesson for guidance.

Import a list of tasks from a server with the help of an AJAX Get request and add the tasks at the end of the to-do list. 

jQuery Basics

Events and Event Handlers

DOM Traversal and Manipulation

Effects and Animations

AJAX Methods

Conclusion

Project Challenge 6: Import Tasks in the To-Do List from a Server

Problem statement

Sample input

Sample output

Coding exercise