Deck of Cards Lab
Introduction
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.htmlfile, astyle.cssfile, anindex.jsfile, and animagesfolder. All changes for this assignment will be made to theindex.jsfile. - 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
flippedon a card when a card is clicked. Note: You need to use theclosest()method - Submit the
index.jsfile 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.