├── README.md
├── jQuery-Challenges
├── project-1
│ └── index.html
├── project-2
│ ├── index.html
│ └── index.js
├── project-3
│ └── index.js
└── project-4
│ ├── index.html
│ └── index.js
└── jQuery-Projects
├── project-1
├── README.md
├── assets
│ ├── images
│ │ ├── image1.jpg
│ │ ├── image2.jpg
│ │ ├── image3.jpg
│ │ ├── image4.jpg
│ │ ├── image5.jpg
│ │ └── image6.jpg
│ └── thumbnails
│ │ ├── thumb1.jpg
│ │ ├── thumb2.jpg
│ │ ├── thumb3.jpg
│ │ ├── thumb4.jpg
│ │ ├── thumb5.jpg
│ │ └── thumb6.jpg
├── index.html
├── lightbox2-master
│ ├── CONTRIBUTING.md
│ ├── Gruntfile.js
│ ├── LICENSE
│ ├── README.md
│ ├── bower.json
│ ├── dist
│ │ ├── css
│ │ │ └── lightbox.css
│ │ ├── images
│ │ │ ├── close.png
│ │ │ ├── loading.gif
│ │ │ ├── next.png
│ │ │ └── prev.png
│ │ └── js
│ │ │ ├── lightbox-plus-jquery.js
│ │ │ ├── lightbox-plus-jquery.min.js
│ │ │ ├── lightbox-plus-jquery.min.map
│ │ │ ├── lightbox.js
│ │ │ ├── lightbox.min.js
│ │ │ └── lightbox.min.map
│ ├── examples
│ │ └── index.html
│ ├── package.json
│ └── src
│ │ ├── css
│ │ └── lightbox.css
│ │ ├── images
│ │ ├── close.png
│ │ ├── loading.gif
│ │ ├── next.png
│ │ └── prev.png
│ │ └── js
│ │ └── lightbox.js
└── styles.css
├── project-2
├── README.md
├── assets
│ ├── arrow-down.svg
│ └── arrow-up.svg
├── index.html
├── index.js
└── styles.css
├── project-3
├── README.md
├── index.html
├── index.js
└── styles.css
└── project-4
├── README.md
├── index.html
└── index.js
/README.md:
--------------------------------------------------------------------------------
1 | #
jQuery
2 |
3 | ### Prerequisites: HTML & CSS Selectors
4 |
5 | ### Goal: Build multiple interactive webpages using jQuery
6 |
7 | #### Objectives:
8 |
9 | * Read and understand documentation for external libraries
10 | * Understanding the DOM
11 | * Fundamentals of jQuery, including DOM traversal and manipulation
12 | * Debug projects using the console and debugger
13 | * Resources for troubleshooting jQuery beyond this course
14 | * Basic understanding of AJAX
15 | * Complete a jQuery project by yourself from scratch to completion
16 |
17 | ### Project 1: LightBox
18 |
19 | Simple photo gallery app, using the Lightbox library.
20 |
21 | * Learn how to read the Lightbox documentation
22 | * Learn how to include the Lightbox assets into our folder structure
23 | * Learn how to make the images work with the `data-lightbox` attribute
24 | * Make the photos into a gallery by giving them the same `data-lightbox` id
25 | * Add an option: `positionFromTop()`
26 |
27 | #### Challenge:
28 | * Choose 6 photos from Google (or your personal library) and replace the current images in your project
29 | * Replace the header text to something relevant to your new photos
30 | * Add one more option that Lightbox provides
31 |
32 | ### Project 2: FAQ Page
33 |
34 | Basic FAQ Page, using an animated accordion drop down. When a question is clicked, the corresponding answer is revealed.
35 |
36 | * Introduce the DOM
37 | * $ - jQuery selector function
38 | * CSS Selectors
39 | * console.log()
40 | * Explore effects: `slideDown()`,`slideToggle()` and `fadeToggle()`
41 | * $this
42 |
43 | #### Challenge:
44 | * Create a custom animation using `animate()`
45 | * Add a 4th question to the FAQ
46 | * Replace the text of one of the answers with an image or gif
47 |
48 |
49 | ### Project 3: Todo List
50 |
51 | Simple todo list app, using local storage to persist data.
52 |
53 | * $(document).ready()
54 | * event.preventDefault()
55 | * Conditionals
56 | * Adding/removing DOM elements
57 | * Modifying HTML attributes
58 | * Persisting data in local storage
59 |
60 | #### Challenge:
61 | * Add an animation to the item removal
62 | * Add an easter egg, i.e. if the `listItem === "dance"` have a dance gif take over the screen
63 |
64 | ### Project 4: Launch Pads
65 |
66 | Apartment marketplace app with city filtering, and rendering JSON data using AJAX.
67 |
68 | * Objects & Arrays
69 | * Requesting data with AJAX
70 | * Using the debugger
71 | * jQuery Utility Methods ($.each, $.grep)
72 | * Bootstrap Framework
73 | * JSON
74 |
75 | #### Challenge:
76 | * Add [Bootstrap JS](https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js) to your application
77 | * Following the Bootstrap documentation, use a Bootstrap modal or alert to notify the user when a listing has been clicked that a new tab has been opened in Google Maps
78 |
--------------------------------------------------------------------------------
/jQuery-Challenges/project-1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
41 |
x" + apartment.neighborhood + "
" 15 | ); 16 | }); 17 | 18 | $(".apartments").append(apartmentArray); 19 | } 20 | }); 21 | 22 | $(".filter").click(function() { 23 | $(".filter").removeClass("active"); 24 | $(this).addClass("active"); 25 | 26 | $(".listings").show(); 27 | 28 | var city = $(this).attr("id"); 29 | 30 | if (city !== "all") { 31 | $(".listings").not("." + city).css("display", "none"); 32 | } 33 | }); 34 | 35 | $(document).on("click", ".listings", function () { 36 | var id = $(this).attr("id"); 37 | $.ajax({ 38 | url: "https://api.myjson.com/bins/2sadq?pretty=1", 39 | dataType: "json", 40 | success: function(response) { 41 | var selectedApartment = $.grep(response.apartments, function(apartment) { 42 | return apartment.id == id; 43 | }); 44 | 45 | var address = selectedApartment[0].address; 46 | // ********** CHALLENGE: SHOW MODAL ********** 47 | $('#apartmentModal').modal('show'); 48 | // ********** 49 | window.open("http://maps.google.com/?q=" + address); 50 | } 51 | }); 52 | }); 53 | }); 54 | -------------------------------------------------------------------------------- /jQuery-Projects/project-1/README.md: -------------------------------------------------------------------------------- 1 | # Project 1: Lightbox 2 | 3 | Simple photo gallery app, using the Lightbox library. 4 | 5 | ## Links 6 | 7 | jQuery: http://jquery.com/ 8 | 9 | Lightbox: http://lokeshdhakar.com/projects/lightbox2/ 10 | 11 | ## Challenge 12 | 13 | * Choose 6 photos from Google (or your personal library) and replace the current images in your project 14 | * Replace the header text to something relevant to your new photos 15 | * Add one more option that Lightbox provides 16 | -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/images/image1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/images/image1.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/images/image2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/images/image2.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/images/image3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/images/image3.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/images/image4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/images/image4.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/images/image5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/images/image5.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/images/image6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/images/image6.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/thumbnails/thumb1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/thumbnails/thumb1.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/thumbnails/thumb2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/thumbnails/thumb2.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/thumbnails/thumb3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/thumbnails/thumb3.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/thumbnails/thumb4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/thumbnails/thumb4.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/thumbnails/thumb5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/thumbnails/thumb5.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/assets/thumbnails/thumb6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/s-shemmee/jQuery-in-30-Days/447954d5ff2ac17fd45ffd24570f8f82a841bae2/jQuery-Projects/project-1/assets/thumbnails/thumb6.jpg -------------------------------------------------------------------------------- /jQuery-Projects/project-1/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |