Learn How to Build a Website with jQuery

Don't forget to download the starter code!

1. Starter code reminder link

Click here to download the starter code folder. 

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

Resources:

• jQuery Home Page: http://jquery.com
• Mouse Events: http://api.jquery.com/category/events/mouse-events/

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

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

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

Resources:

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

Resources:

•  Wikipedia - DOM: https://en.wikipedia.org/wiki/Document_Object_Model

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

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

Complete these three challenges 

1. Create a custom animation for the accordion dropdown using the animate() method
2. Replace one of the answers with an image or GIF that will be revealed when the question is clicked. Need help finding a GIF? Check out http://giphy.com/

Now that we're half-way through the course (!), we review what we've learned so far and cover the project we're about to build. Put it on your to-do list. 

Don't forget to use the starter code (download here)!

jQuery code likes to be loaded early in the page, after the document is ready. This is why we add our custom jQuery code after (document).ready !

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

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

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

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

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

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

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

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

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

1. Complete these two challenges 

Add an interesting animation to the item removal. You can use fadeOut()  or slideDown() method like we did in Project 2. Or any other type of interactive you like. 

Add an easter egg" to the project. So for example, if the listItem === "dance", append a dance GIF to the todo list. Have fun with it!

Welcome to our final project! We're going to build our most complex and realistic application yet, so check out this video for a roadmap of where we're going. 

Don't forget to use the starter code (download here)!

Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1

You can get the starter code here!

Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1

Resources:

• Bootstrap Homepage: http://getbootstrap.com/
• Link to JSON file: https://api.myjson.com/bins/2sadq?pretty=1

Resources:

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

Resources:

• jQuery - Ajax: http://api.jquery.com/jQuery.ajax/
• 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;    } })});

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

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>

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

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

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

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

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

We're at the end of jQUERY. Well done! This door has closed, but now many others are now open to you.

You up for one more challenge? We can make our application more interesting and unique with Javascript from bootstrap. And then you can submit your ideas to OneMonth/brag about your modal jQUERY mastery. 

1. Complete these two challenges 

Add Bootstrap JS to your application. To do so, add a new <script> tag to the <head> with the Bootstrap CDN link of the "Latest compiled and minified JavaScript"

The way the site is now, when you click on a new listing it opens up the listing in Google Maps. What we want to do is keep that feature, and add a Bootstrap modal to notify the user that a new tab has been opened. Follow the Bootstrap documentation on modals to add this feature.