README.md

Front-end-Web-Class-10

Objectives

• Solve problems with jQuery
• Practice with common jQuery patterns

Schedule

	time			Description
1	5 min	5	TT	jQuery quick review
2	5 min	5	TT	Menus and Slideshows
3	20 min	35	Work	Challenges
4	5 min	40	TT	JSON API Example
5	10 min	50	Work	Challenges
	10 min	60	Break
6	5 min	65	TT	Intro challenges
7	40 min	105	Work	Challenges

1 - jQuery a quick review

jQuery is a JS library that makes your work with JS easier and faster. Common tasks with jQuery:

• Select elements in the DOM
  • jQuery allows selection of elements based on a wider range of criteria such as siblings and index
• Add and remove classes from elements
  • This facilitates many other things
• Load JSON from web services

2 - Menus and Slideshows

Example -

• css()
• click()
• siblings()
  • Example 1
  • Demo 1

3 - Challenges

• Change the color

• addClass()

• removeClass()

• eq()

  • Example 2
  • Demo 2

Challenges -

• Change the colors

• Use text instead of boxes

• index()

  • Example 3
  • Demo 2

Challenges -

• Add text content to boxes
• Change the background color of boxes

3 - AJAX and JSON

Example -

• $.get()
  • Example 4
  • Demo 3

4 - JSON API Example

Example 2 -

• $.get(path, {}, handler(data))
• $.post(path, {}, handler(data))
• hmtl()

5 - Challenges

• Display the Artist
• Display the price
• Add some styles

6 - Challenge

Use the ideas from the previous examples to recreate the pages below.

• Challenge - 5
• Challenge - 6