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

  1. Download the Deck of Cards Starter Files. The starter files contain an index.html file, a style.css file, an index.js file, and an images folder. All changes for this assignment will be made to the index.js file.
  2. Using the provided arrays and card template, create all 52 cards of a standard deck and insert them into the deck container.
  3. 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 the closest() method
  4. 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.