jQuery Essentials: Learn the Fundamental of jQuery
4.2 (49 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,013 students enrolled
Wishlisted Wishlist

Please confirm that you want to add jQuery Essentials: Learn the Fundamental of jQuery to your Wishlist.

Add to Wishlist

jQuery Essentials: Learn the Fundamental of jQuery

Learn the basic of jQuery
4.2 (49 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,013 students enrolled
Created by Erin Z.
Last updated 8/2016
English
Current price: $10 Original price: $20 Discount: 50% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 3.5 hours on-demand video
  • 1 Supplemental Resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn the fundamentals of jQuery
  • Learn to use the DOM, and work with an external library
  • Learn to use jQuery to create interactive sites
  • How to build real-life jQuery projects
View Curriculum
Requirements
  • familiar with HTML, CSS and JavaScript
Description

Looking to add dynamic content, third-party data, or animation to your websites? Look no further. In this project based course you will learn the fundamentals of jQuery. 

Throughout this course you will build several projects to give you the ability to integrate jQuery in your own projects to add that extra level of interactivity to any site you work on.

jQuery is the most popular JavaScript library today. This course will teach you all the basic of it and how to use jQuery’s core features.

You’ll learn how to interact with the Document Object Model (DOM), use web developer tools, and get started with reading and understanding documentation to help you take on  your own projects.

Who is the target audience?
  • Developers
  • Anyone who wants to learn jQuery
Students Who Viewed This Course Also Viewed
Curriculum For This Course
40 Lectures
03:43:09
+
Welcome
2 Lectures 04:54
+
jQuery Project 1
5 Lectures 25:40

Once we open the index HTML file, we can right-click and use "Open in Browser" to see what our project looks like so far.

Comments like

<!-- Thumbnail Images -->

and

<!-- JavaScript --> 

are not actual code. These are just notes to help the coder.

Preview 02:49

1. Resources:

2. Add the jQuery script tag to our HTML file

index.html

<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

3. Add Lightbox CSS and JavaScript files

index.html

<!-- CSS -->
<link href="styles.css" rel="stylesheet">
<link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet">

and 

<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="lightbox2-master/dist/js/lightbox.js"></script>
Preview 07:53

Time to tag your heart out. In this lesson, we go through how to implement lightbox in each of our images, as well as some of the options available to customize it.


1. Continue reading along with Lightbox documentation

http://lokeshdhakar.com/projects/lightbox2/

2. Add Lightbox styling to each image

index.html

<a href="assets/images/image1.jpg" data-lightbox="image1" data-title="My caption">
 <img src="assets/thumbnails/thumbs/thumb1.jpg" alt="Surfing">
</a>

Add this <a> tag to each image on your page, but remember to change the path each time.

3. Change the data-lightbox name for each image to create a collection.

index.html

<a href="assets/images/image1.jpg" data-lightbox="roadtrip" data-title="My caption">
 <img src="assets/thumbnails/thumbs/thumb1.jpg" alt="Surfing">
</a>

4. Copy and paste the alt tag to the data-title for each image or create your own.

index.html

<a href="assets/images/image1.jpg" data-lightbox="roadtrip" data-title="Surfing">
 <img src="assets/thumbnails/thumbs/thumb1.jpg" alt="Surfing">
</a>

5. Add options JavaScript to your page to customize how your images look.

index.html

<!-- JavaScript -->

...

<script>
 lightbox.option({
 'positionFromTop': 200
 })
</script>  
Implementing Lightbox
09:28

Some practice
03:33
+
Project 2: FAQ Page
11 Lectures 50:44
Getting Started
02:04

Example of commenting out code

Windows shortcut: Select code block, then Control + /

Mac Shortcut: Select code block, then Command + /

styles.css

/*.collapse {
 display: none;
}
*/

3. Create new file

Windows shortcut: Click on file in appropriate folder, then Control + N

Mac Shortcut: Click on file in appropriate folder, then Command + N

Save as "index.js"

4. Add index.js to index.html file

index.html

<!-- JavaScript -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="index.js"></script>

Getting into some code
04:06

Click Event
02:33

Think you can handle the handlers? In this video, we go over the JQUERY documentation for different events and how to input selectors into our code.


Resources:

1. Find target we want to use

index.html

<div id="q1" class="question">1. What is jQuery?

2. Add target to JavaScript file

index.js

$("#q1")
Natural Selection
02:33

As we continue writing our code, we cover the importance of logging our functions so that our jQUERY is wonderfully bug-free. We also start incorporating the effects that will reveal the answers in our FAQ project.


Resources

1. Add console logging to see what selector returns

index.js

$("#q1").click(function() {
 console.log($("#q1"));
})

2. Find target we want to use

index.html

<div id="a1" class="answer collapse">

3. Add answer selector to JavaScript file

index.js

$("#q1").click(function() {
 $("#a1");
})

4. Add "sliding" option to answer selector

index.js

$("#q1").click(function() {
 $("#a1").slideDown("slow");
})

5. Make it a toggle instead of a one-time event

index.js

$("#q1").click(function() {
 $("#a1").slideToggle("slow");
})
Slide Show
09:24

Don't stop now! In this video, we go through some of the additional effects you can employ with jQUERY.


Resources:

Change the answer selector effect to fade:

index.js

$("#q1").click(function() {
 $("#a1").fadeToggle("slow");
})

Additional effects
02:33

In this lesson, we cover how jQUERY classes interact with CSS and allow us to toggle between elements.


Resources:

1. Identify toggle selectors

index.html

<img id="arrow1-down" class="arrow down" src ="assets/arrow-down.svg">
<img id="arrow1-up" class="arrow up" src ="assets/arrow-up.svg">

2. Add collapse functionality to up and down arrows

index.js

$("#q1").click(function() {
 $("#a1").fadeToggle("fast");
 $("#arrow1-down").toggleClass("collapse");
 $("#arrow1-up").toggleClass("collapse");
})

3. Combine functionality for the same class

index.js

$("#q1").click(function() {
 $("#a1").fadeToggle("fast");
 $("#arrow1-down, #arrow1-up").toggleClass("collapse");
})

4. Add functionality to each FAQ question, answer and arrows

index.js

$("#q1").click(function() {
 $("#a1").fadeToggle("fast");
 $("#arrow1-down, #arrow1-up").toggleClass("collapse");
})

$("#q2").click(function() {
 $("#a2").fadeToggle("fast");
 $("#arrow2-down, #arrow2-up").toggleClass("collapse");
})

$("#q3").click(function() {
 $("#a3").fadeToggle("fast");
 $("#arrow3-down, #arrow3-up").toggleClass("collapse");
})

How jQUERY classes interact with CSS
07:29

DOMs
02:37

In this video, we cover This, the keyword that allows us
to quickly reference the original jQUERY object while engaging with
different functions of it. Basically, we learn how to cheat so we only
have to code a function once.


1. Comment out toggle functionality and add console logging

index.js

$("#q1").click(function() {
 console.log($(this));
 // $("#a1").fadeToggle("fast");
 // $("#arrow1-down, #arrow1-up").toggleClass("collapse");
})

2. Replace specific question selector with more general one

index.js

$(".question").click(function() {
 console.log($(this));
 // $("#a1").fadeToggle("fast");
 // $("#arrow1-down, #arrow1-up").toggleClass("collapse");
})

// $("#q2").click(function() {
// $("#a2").fadeToggle("fast");
// $("#arrow2-down, #arrow2-up").toggleClass("collapse");
// })

// $("#q3").click(function() {
// $("#a3").fadeToggle("fast");
// $("#arrow3-down, #arrow3-up").toggleClass("collapse");
// })
THIS
03:43

Our journey continues, by learning about traversing! In this video, we cover how to move through the Dom tree and distinguish the parents, siblings, and children of all our jQUERY elements.


Resources:

1. Add console logging to detect sibling information

index.js

$(".question").click(function() {
 console.log($(this).next());
 // $("#a1").fadeToggle("fast");
 // $("#arrow1-down, #arrow1-up").toggleClass("collapse");
})

2. Re-add answer fade, and add console logging for children-arrows

index.js

$(".question").click(function() {
 $(this).next().fadeToggle("fast");
 console.log($(this).children());
 // $("#a1").fadeToggle("fast");
 // $("#arrow1-down, #arrow1-up").toggleClass("collapse");
})

3. Re-add toggling to arrow images, tidy up code

index.js

$(".question").click(function() {
 $(this).next().fadeToggle("fast");
 $(this).children().toggleClass("collapse");
})

Traversing
09:50

Practice challenge
03:52
+
Project 3: Todo List
9 Lectures 01:03:33
The Next Project
03:22

This lesson is all about the proper form. We cover how
to make our own actions actually happen, and avoid the browser's
defaults.


Resources:

1. Bind submit functionality to add-items selector and add console logging

index.js

$(document).ready(function () {
 $(".add-items").submit(function() {
 console.log("HI!";)
 });
});

2. Prevent default behavior to retain logging information

index.js

$(document).ready(function () {
 $(".add-items").submit(function(event) {
 event.preventDefault();
 console.log("HI!");
 });
});

Creating Actions
07:33

We actually start creating items in our to-do list in this video, by intercepting inputs and retrieving them with jQUERY variables. They may not be as cute as a golden retriever but they're way more efficient.


Resources:

1. Identify selector and add console logging

index.html

<input type="text" class="form control" id="todo-list-item" placeholder="what do you need to do today?">

index.js

$(document).ready(function () {
 $(".add-items").submit(function (event) {
 event.preventDefault();

 console.log($("#todo-list-item").val());
 });
});

2. Save user input as a variable that we will later be able to add to our list

index.js

 var item = $("#todo-list-item").val();
 });

jQUERY variables
04:48

In this lesson, we cover how to capture inputs and insert them into the HTML's unordered list. Don't worry, though. We go through it in the right order.


Resources:

1. Add new selector

index.html

<ul id="list-items">

2. Append input from item variable into list

index.js

$(document).ready(function () {
 $(".add-items").submit(function (event) {
 event.preventDefault();

 var item = $("#todo-list-item").val();

 $("#list-items").append("<li>" + item + "</li>");
 });
});

3. Add checkbox and x (for later removal of item)

index.js

$("#list-items").append("<li><input type='checkbox'/>" + item + "<a class='remove'>x</a></li>");
 });

4. Add <hr> for separation styling

index.js

$("#list-items").append("<li><input type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
 });

5. Clear input field after each new item is added to our list

index.js

 $("#list-items").append("<li><input type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");

 $("#todo-list-item").val("");

 });

Capture inputs
08:09

If/else you watch this video, you'll learn all about the conditional statements that will keep the to-do page ordered and how to account for all eventualities in our code.


Resources:

Add conditional statement to have only text-based inputs create new list items

index.js

$(document).ready(function () {
 $(".add-items").submit(function (event) {
 event.preventDefault();

 var item = $("#todo-list-item").val();

 if (item) {
 $("#list-items").append("<li><input type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
 $("#todo-list-item").val("");
 }

 });
});

Conditional statements
05:47

Time for some target practice! We discuss how to code for dynamically created events within our to do list.


Resources:

1. Add checkbox class to jQuery file

index.js

$(document).ready(function () {
 $(".add-items").submit(function (event) {
 event.preventDefault();

 var item = $("#todo-list-item").val();

 if (item) {
  $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
  $("#todo-list-item").val("");
 }

 });

 $(".checkbox")

});

2. Add console logging to see if checkbox has changed

index.js

$(".checkbox").change(function() {
 console.log("Checkbox checked!");
 })

3. Comment out unusable code, target the dynamically created checkbox

index.js

 // $(".checkbox").change(function() {
 // console.log("Checkbox checked!");
 // })

 $(document).on("change", ".checkbox", function() {

 });

Dynamically created events
05:34

In this lesson, we check all the boxes and cross all the lines. Or we code animations for dynamic interaction with items on our to-do list, at least.


Add completed functionality to check items off the list with the checkbox

index.js

$(document).ready(function () {
 $(".add-items").submit(function (event) {
 event.preventDefault();

 var item = $("#todo-list-item").val();

 if (item) {
  $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
  $("#todo-list-item").val("");
 }

 });

 // $(".checkbox").change(function() {
 // console.log("Checkbox checked!");
 // })

 $(document).on("change", ".checkbox", function() {
  $(this).parent().toggleClass("completed");
 });

});

Add completed functionality
05:03

In this video, we learn how to remove items from the Dom, and from the to-do list.


Resources:

Make the little x actually remove the list item

index.js

$(document).ready(function () {
 $(".add-items").submit(function (event) {
 event.preventDefault();

 var item = $("#todo-list-item").val();

 if (item) {
  $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
  $("#todo-list-item").val("");
 }

 });

 // $(".checkbox").change(function() {
 // console.log("Checkbox checked!");
 // })

 $(document).on("change", ".checkbox", function() {
  $(this).parent().toggleClass("completed");
 });

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

});

Remove element
03:41

One step forward, two steps updated. We continue discussing how to save changes in local stores so that it reflects removals and well as additions, and every scenario in between.


Resources:

1. Make removed and checked items persist in Local Storage after page refresh

index.js

$(document).ready(function () {
 
 $("#list-items").html(localStorage.getItem("listItems"));

 $(".add-items").submit(function (event) {
 event.preventDefault();

 var item = $("#todo-list-item").val();

 if (item) {
   $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
   localStorage.setItem("listItems", $("#list-items").html());
   $("#todo-list-item").val("");
 }

 });

 // $(".checkbox").change(function() {
 // console.log("Checkbox checked!");
 // })

 $(document).on("change", ".checkbox", function() {
   $(this).parent().toggleClass("completed");
   localStorage.setItem("listItems", $("#list-items").html());
 });

 $(document).on("click", ".remove", function() {
   $(this).parent().remove();
   localStorage.setItem("listItems", $("#list-items").html());
 });

});

2. Keep checked checkbox checked, and unchecked checkbox unchecked!

index.js

 $(document).on("change", ".checkbox", function() {
   if ($(this).attr("checked")) {
     $(this).removeAttr("checked");
   } else {
     $(this).attr("checked", "checked");
   }
 
   $(this).parent().toggleClass("completed");
   localStorage.setItem("listItems", $("#list-items").html());
 })

Now that we have a functional to-do list, we cover how to save and update the local storage so that we can hold onto all our changes.


Resources:

1. Save list items to Local Storage

index.js

$(document).ready(function () {
 $(".add-items").submit(function (event) {
 event.preventDefault();

 var item = $("#todo-list-item").val();

 if (item) {
   $("#list-items").append("<li><input class='checkbox' type='checkbox'/>" + item + "<a class='remove'>x</a><hr></li>");
   localStorage.setItem("listItems", $("#list-items").html());
   $("#todo-list-item").val("");
 }

 });

 // $(".checkbox").change(function() {
 // console.log("Checkbox checked!");
 // })

 $(document).on("change", ".checkbox", function() {
   $(this).parent().toggleClass("completed");
 });

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

});

2. Tell page to load any previously-added list items from Local Storage

index.js

$(document).ready(function () {
 
 $("#list-items").html(localStorage.getItem("listItems"));

 $(".add-items").submit(function (event) {
 event.preventDefault();


Save and update the local storage
19:36
+
Project 3: Launch Pads
13 Lectures 01:18:18
Meet JSON
04:33

Arrays and Objects
06:42

Bootstrap
03:46

In this video, we format AJAX to debug unsuccessful data requests.


Resources:

Add the JSON data to our Ajax method and make sure it returns helpful information

index.js

$(document).ready(function() {
 $.ajax({
   url: "https://api.myjson.com/bins/2sadq?pretty=1",
   dataType: "json",
   success: function(response) {
     debugger; 
   }
 })
});

Add AJAX
03:20

In this lesson, we discuss how to iterate code for each object in our various arrays. No need to check the index.


Resources:

Create an HTML element from each apartment object

index.js

$(document).ready(function() {
 $.ajax({
   url: "https://api.myjson.com/bins/2sadq?pretty=1",
   dataType: "json",
   success: function(response) {
     $.each(response.apartments, function(i, apartment) {
       debugger;
     });
    }
 })
})

Formatting AJAX
06:48

In this lesson, we discuss how to iterate code for each object in our various arrays. No need to check the index.


Resources:

Create an HTML element from each apartment object

index.js

$(document).ready(function() {
 $.ajax({
   url: "https://api.myjson.com/bins/2sadq?pretty=1",
   dataType: "json",
   success: function(response) {
     $.each(response.apartments, function(i, apartment) {
       debugger;
     });
    }
 })
})

Iterate code
06:44

Now that we're ready to append HTML to the Dom, we cover the pre-built bootstrap components that will make our lives easier.


Resources:

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">List group item heading</h4>
    <p class="list-group-item-text">...</p>
  </a>
</div>

Append HTML to the Dom
01:49

We continue adding bootstrap styling in order to neatly display the data of each of our apartment objects. It's definitely easier than finding a new apartment.


1. Add Bootstrap styling

index.js

$(document).ready(function() {
 $.ajax({
   url: "https://api.myjson.com/bins/2sadq?pretty=1",
   dataType: "json",
   success: function(response) {
     $.each(response.apartments, function(i, apartment) {
       <a href="#" class="list-group-item active">
       <h4 class="list-group-item-heading">List group item heading</h4>
       <p class="list-group-item-text">...</p>
       </a>
      });
    }
  })
})

2. Add variable and change " to '

$.each(response.apartments, function(i, apartment) {
  var listing = "<a href='#' class='list-group-item'><h4 class='list-group-item-heading'></h4><p class='list-group-item-text'></p></a>"

3. Add variable input and concatenation so it displays properly

$.each(response.apartments, function(i, apartment) {
 var listing = "<a href='#' class='list-group-item'><h4 class='list-group-item-heading'>" + apartment.description + "</h4><p class='list-group-item-text'></p></a>";
   $(".apartments").append(listing);

4. Extra styling

$.each(response.apartments, function(i, apartment) {
 var listing = "<a href='#' class='list-group-item'><h4 class='list-group-item-heading'>" + apartment.description + " / " + apartment.bedrooms + " / " + apartment.price + "</h4><p class='list-group-item-text'>" + apartment.neighborhood + "</p></a>";
   $(".apartments").append(listing);

Display the data
08:01

Before we move forward, we cover best practices for handling failure from the server and how to create filters to make our arrays more searchable.


1. Add error logging and "BR" to apartment listing

index.js

$(document).ready(function() {
 $.ajax({
   url: "https://api.myjson.com/bins/2sadq?pretty=1",
   dataType: "json",
   success: function(response) {
     $.each(response.apartments, function(i, apartment) {
       var listing = "<a href='#' class='list-group-item'><h4 class='list-group-item-heading'>" + apartment.description + " / " + apartment.bedrooms + " BR / " + apartment.price + "</h4><p class='list-group-item-text'>" + apartment.neighborhood + "</p></a>";
         $(".apartments").append(listing);
     }); 
   },
   error: function(error) {
       console.log(error);
   }
 });
})

2. Start using borough ID to create a class and filter listings

   error: function(error) {
      console.log(error);
    }
  });
  $(".filter").click(function() {

  });
})
Handling failure from the server and creating filters
03:51

Which of these elements is not like the specified criteria? In this lesson, we start implementing our plan to create filters which will remove results.


Resources:

1. Implement city ID as class for filtering

index.js

 $(".filter").click(function() {
   var city = $(this).attr("id");
 });
});

2. Filter out cities that DON'T match our selected borough, add listings class, and apartmentClass variable.

$(document).ready(function() {
 $.ajax({
   url: "https://api.myjson.com/bins/2sadq?pretty=1",
   dataType: "json",
   success: function(response) {
     $.each(response.apartments, function(i, apartment) {
       var apartmentClass = apartment.city.toLowerCase().replace(" ", "-");
       var listing = "<a href='#' class='list-group-item " + apartmentClass + " listings'><h4 class='list-group-item-heading'>" + apartment.description + " / " + apartment.bedrooms + " BR / " + apartment.price + "</h4><p class='list-group-item-text'>" + apartment.neighborhood + "</p></a>";
         $(".apartments").append(listing);
     }); 
   },
   error: function(error) {
     console.log(error);
   }
  });

  $(".filter").click(function() {
   var city = $(this).attr("id");

   $(".listings").not("." + city).css("display", "none");
 });
});
Filtering part 1
08:56

In this lesson, we finish up filtering and lay the groundwork for our apartments to not only be searchable but selectable.


Resources:

1. Show all listings before hiding filtered listings

index.js

 $(".filter").click(function() {
   var city = $(this).attr("id");
   $(".listings").show();
 
   $(".listings").not("." + city).css("display", "none");
 });
});

2. Add conditional so all listings can be displayed

 $(".filter").click(function() {
   var city = $(this).attr("id");
   $(".listings").show();
   if (city !== "all") {
     $(".listings").not("." + city).css("display", "none");
   }
 });
});

3. Remove active class when new filter is clicked, add it to correct filter, tidy up code

 $(".filter").click(function() {
   $(".filter").removeClass("active");
   $(this).addClass("active");

   $(".listings").show();
 
   var city = $(this).attr("id");
   if (city !== "all") {
     $(".listings").not("." + city).css("display", "none");
   }
 });
});

Filtering part 2
06:29

In this video, we go through how to make each listing clickable.


Resources:

1. Add skeleton of function that happens when a listing is clicked

index.js

$(document).ready(function() {
 $.ajax({
   url: "https://api.myjson.com/bins/2sadq?pretty=1",
   dataType: "json",
   success: function(response) {
     $.each(response.apartments, function(i, apartment) {
       var apartmentClass = apartment.city.toLowerCase().replace(" ", "-");
       var listing = "<a href='#' class='list-group-item " + apartmentClass + " listings'><h4 class='list-group-item-heading'>" + apartment.description + " / " + apartment.bedrooms + " BR / " + apartment.price + "</h4><p class='list-group-item-text'>" + apartment.neighborhood + "</p></a>";
         $(".apartments").append(listing);
     }); 
   },
   error: function(error) {
   console.log(error);
   }
 });

 $(".filter").click(function() {
   $(".filter").removeClass("active");
   $(this).addClass("active");

   $(".listings").show();
 
   var city = $(this).attr("id");
   if (city !== "all") {
     $(".listings").not("." + city).css("display", "none");
   }
 });
 
 $(document).on("click", ".listings", function(){

 });
});

2. Add unique identifier to each apartment listing

var listing = "<a href='#' id=" + apartment.id + " class='list-group-item " + apartmentClass + " listings'><h4 class='list-group-item-heading'>" + apartment.description + " / " + apartment.bedrooms + " BR / " + apartment.price + "</h4><p class='list-group-item-text'>" + apartment.neighborhood + "</p></a>";

3. Find the apartment info that matches the ID of the listing that was clicked, add debugging

 $(document).on("click", ".listings", function(){
   var id = $(this).attr("id");
   $.ajax({
     url: "https://api.myjson.com/bins/2sadq?pretty=1",
     dataType: "json",
     success: function(response) {
       var selectedApartment = $.grep(response.apartments, function(apartment){
         return apartment.id == id;
       })
       debugger;
     },
     error: function(error) {
       console.log(error);
     }
   });
 });
});

4. Add address variable which stores the address of the clicked apartment

success: function(response) {
 var selectedApartment = $.grep(response.apartments, function(apartment){
   return apartment.id == id;
 })
 var address = selectedApartment[0].address;
}

5. Open selected address using Google Maps in a new browser tab

success: function(response) {
 var selectedApartment = $.grep(response.apartments, function(apartment){
   return apartment.id == id;
 })
 var address = selectedApartment[0].address;

 window.open("http://maps.google.com/?q=" + address);
},

Making clickable listing
13:04

Conclusion: Final challenge
04:15
About the Instructor
Erin Z.
4.2 Average rating
49 Reviews
1,013 Students
1 Course
Developer

I'm a Front End and Wordpress Developer with over 10 years of experience. I have developed projects for many companies worldwide and local, both independently and in teams. My passion is building state-of-the-art, easy to use, user friendly web sites and applications. I actively seek out new technologies, and stay up-to-date on industry trends and advancements.