Lab
Deck of CardsIntroduction
Anyone up for a game of 52 card pickup?
Objective
For this assignment you will demonstrate your skills of HTML Creation and Event Delegation with JavaScript, by generating all 52 cards in a standard deck and adding functionality to make the cards "flippable".
Requirements
- Download the Deck of Cards Starter Files. The starter files contain an
index.html
file, astyle.css
file, anindex.js
file, and animages
folder. All changes for this assignment will be made to theindex.js
file. - Using the provided arrays and card template, create all 52 cards of a standard deck and insert them into the deck container.
- Using the Event Delegation technique, add the functionality that will toggle the class
flipped
on a card when a card is clicked. Note: You need to use theclosest()
method - Submit the
index.js
file to the Deck of Cards assignment on Brightspace.
Example
The following is a video of what the complete version of the lab should look like. There is no audio.
NOTE
The order of the cards does not matter.