Front-EndWeb Development

Lesson 11Lab

Agenda

● Lab (The Memory Game) (180 minutes)○ Description: This lab is your standard memory

game. Select two cards, see if they match, and if they don't, turn them back over.

○ Topics: jQuery, each/forEach, events, functions, variables, arguments, classes/ids, using StackOverflow and other resources

○ Activity Type: paired exercise

Agenda

● Lab (The Memory Game) (180 minutes)○ HTML (game container, game cards, reset buttons,

etc). Time: 20 minutes○ CSS (style the game play area). Each card should

use a "card" class and when "selected" should have a background image that shows the card as it would appear if turned over. Time: 30 minutes

Agenda

● Lab (The Memory Game) (180 minutes)○ Pseudo Code (start game, reset game, etc.)○ JavaScript (code the application)

Agenda

● Lab (The Memory Game) (180 minutes)○ Bonus

■ Use the web to find a function to shuffle the cards. Source: Stack Overflow

■ Track the number of moves it took to match all cards

■ Add a "cheat" mode which shows the match for the currently selected card by making the matching card bigger.

Agenda

● Lab (180 minutes)○ The Memory Game○ Demo the site○ Ask students to recreate the game○ Pair off○ Begin

Agenda (alternate)

● Carousel● Introduction to jQuery Plugins● AnythingSlider Plugin● jQuery Navigation Plugin● Final Project

○ discuss and/or sign off

Carousel

View Code and discuss.

Introduction to jQuery Plugins

Learn jQuery Plugins

The jQuery Plugin Registry

AnythingSlider Plugin

Code Along

DemoWebsiteGitHub

jQuery Navigation Plugin

Individual Assignment

DemoWebsiteGitHub

Final Project

Leon and Gene to check in with each class member to chat about the final project.

“I really have no idea what I want to do.” is a perfectly acceptable answer. You have the Holiday break to come up with an idea.