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.

1. Resources:

• jQuery Home Page: http://jquery.com/
• Lightbox Home Page: http://lokeshdhakar.com/projects/lightbox2/

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>

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>  

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>

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:

• jQuery Home Page: http://jquery.com
• Click API: http://api.jquery.com/click/

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")

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

• What is the "$" sign in index.js? It is a function, interchangeable with "jQuery." We will be using the shorthand version for this project.
• Core section of API Documentation: http://api.jquery.com/jQuery/
• Effects - Sliding: http://api.jquery.com/category/effects/sliding/

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");
})

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

Resources:

• Effects - Fading: http://api.jquery.com/category/effects/fading/

Change the answer selector effect to fade:

index.js

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

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

Resources:

• Attributes - ToggleClass: http://api.jquery.com/toggleClass/

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");
})

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");
// })

Let's learn 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:

• Traversal - Tree Traversal: http://api.jquery.com/category/traversing/tree-traversal/

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"); })

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:

• Forms - Submit: http://api.jquery.com/submit/ 
• Event Prevent Default: http://api.jquery.com/event.preventDefault/

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!");
 });
});

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:

• Forms - Val(): http://api.jquery.com/val/

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();
 });

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:

• Manipulation - DOM Insertion, Inside: http://api.jquery.com/category/manipulation/dom-insertion-inside/

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("");

 });

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:

• jQuery Conditional Statements: http://css-plus.com/2011/07/jquery-if-else-statements/
• JavaScript Conditional Statements: http://www.w3schools.com/js/js_if_else.asp
• Booleans: http://en.wikipedia.org/wiki/Boolean_data_type

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("");
 }

 });
});

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

Resources:

• Forms - Change: http://api.jquery.com/change/

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() {

 });

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");
 });

});

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

Resources:

• Manipulation - DOM Removal: http://api.jquery.com/category/manipulation/dom-removal/

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();
 });

});

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:

• Manipulation - General Attributes - .attr(): http://api.jquery.com/attr/
• Manipulation - General Attributes - .removeAttr(): http://api.jquery.com/removeAttr/

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:

• Local Storage API: https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API
• Local Storage and how to use it on Websites: http://www.smashingmagazine.com/2010/10/local-storage-and-how-to-use-it/

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();

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

Resources:

• jQuery - Ajax: http://api.jquery.com/jQuery.ajax/
• Apartment Information to Paste into Ajax: http://api.myjson.com/bins/2sadq?pretty=1
• Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1

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; 
   }
 })
});

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

Resources:

• Utilities - jQuery.each(): http://api.jquery.com/jQuery.each/
• Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1

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;
     });
    }
 })
})

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

Resources:

• Utilities - jQuery.each(): http://api.jquery.com/jQuery.each/
• Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1

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;
     });
    }
 })
})

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:

• Bootstrap - Components: http://getbootstrap.com/components/
• Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1
• Custom Content section

<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>

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);

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() {

  });
})

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:

• jQuery - Traversing - Filtering: http://api.jquery.com/category/traversing/filtering/
• Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1

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");
 });
});

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

Resources:

• JavaScript Comparison and Logical Operators: http://www.w3schools.com/js/js_comparisons.asp
• Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1

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");
   }
 });
});

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

Resources:

• jQuery - jQuery.grep(): http://api.jquery.com/jQuery.grep/
• Google Maps Parameters: http://asnsblues.blogspot.com/2011/11/google-maps-query-string-parameters.html
• Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1

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);
},