s-shemmee / jquery-in-30-days

Welcome to the Wonderful World of jQuery! Glad you could make it! We start with some context about how we'll be approaching JQUERY and what you can use this wonderful API for.

jQuery

Prerequisites: HTML & CSS Selectors

Goal: Build multiple interactive webpages using jQuery

Objectives:

• Read and understand documentation for external libraries
• Understanding the DOM
• Fundamentals of jQuery, including DOM traversal and manipulation
• Debug projects using the console and debugger
• Resources for troubleshooting jQuery beyond this course
• Basic understanding of AJAX
• Complete a jQuery project by yourself from scratch to completion

Project 1: LightBox

Simple photo gallery app, using the Lightbox library.

• Learn how to read the Lightbox documentation
• Learn how to include the Lightbox assets into our folder structure
• Learn how to make the images work with the data-lightbox attribute
• Make the photos into a gallery by giving them the same data-lightbox id
• Add an option: positionFromTop()

Challenge:

• Choose 6 photos from Google (or your personal library) and replace the current images in your project
• Replace the header text to something relevant to your new photos
• Add one more option that Lightbox provides

Project 2: FAQ Page

Basic FAQ Page, using an animated accordion drop down. When a question is clicked, the corresponding answer is revealed.

• Introduce the DOM
• $ - jQuery selector function
• CSS Selectors
• console.log()
• Explore effects: slideDown(),slideToggle() and fadeToggle()
• $this

Challenge:

• Create a custom animation using animate()
• Add a 4th question to the FAQ
• Replace the text of one of the answers with an image or gif

Project 3: Todo List

Simple todo list app, using local storage to persist data.

• $(document).ready()
• event.preventDefault()
• Conditionals
• Adding/removing DOM elements
• Modifying HTML attributes
• Persisting data in local storage

Challenge:

• Add an animation to the item removal
• Add an easter egg, i.e. if the listItem === "dance" have a dance gif take over the screen

Project 4: Launch Pads

Apartment marketplace app with city filtering, and rendering JSON data using AJAX.

• Objects & Arrays
• Requesting data with AJAX
• Using the debugger
• jQuery Utility Methods ($.each, $.grep)
• Bootstrap Framework
• JSON

Challenge:

• Add Bootstrap JS to your application
• 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