Scenario

Generate a deck of cards in JavaScript

Tasks
cards.html
Page title	In the , set the title of the page to Deck of Cards
Link external JavaScript file	In the , use the
Link external CSS file	In the , use the tag to link in the external CSS file cards.css
Heading tag	In the , use a heading tag to display Deck of Cards
Create a div	In the , use the tag with a unique id attribute that will be referenced by the JavaScript
cards.css
Class card	Create a class called card that sets the following style (you are free to change these values to style of your preference): border: solid 1px #aaa; border-radius: 9px; width: 95px; height: 150px; float: left; background-color: white; padding: 3px 3px 3px 3px;
Class card with child class value	Create a child class called value to class card that sets the following style (you are free to change these values to style of your preference): font-size: 24pt; font-family: sans-serif;
Cards.js
Create a global variable for the card face as an array	The array should include values: A, K, Q, J, 10, 9, 8, 7, 6, 5, 4, 3, 2
Create a global variable for the card suit as an array	The array should include value: Diamonds, Hearts, Spades, Clubs
Create an array for the deck of cards	Empty array
Set the onload for the window	For the window object, set the onload event handler equal to the JavaScript function load
Function getDeck()	Write function getDeck so that it does the following: Loops through the global variable array representing the suitLoops through the global variable array representing the face Creates an object called card with properties Value and Suit Value is set equal to the global array representing the face using the appropriate looping variable Suit is set equal to the global variable array representing the suits using the appropriate looping index Push the card object on the global variable rerpresenting the deck of cards Return the deck of cards
Function deal()	Write function deal() so it does the following: Creates a variable called card set equal to the first card in the deck Call method splice on the global variable representing the deck of cards, passing as arguments the length of the deck 1 and the value 1 Return the card variable
Function shuffle()	Write function shuffle() so that it does the following: Loops for some number of times (i.e. 250, 500, 1000, etc..) Create a variable to represent one card set equal to Math.floor(Math.random() * deck length) Create a variable to represent another card set equal to the same random number generation as above Switch the cards in the variable representing the deck
Function renderDeck()	Write a function renderDeck() so that it does the following: Loops through the length of the variable representing the deck Create a variable called card set equal to document.createElement() passing div as an argument Create a variable called value set equal to document.createElement() passing div as an argument Create a variable called suit set equal to function call getCardUi() passing as an argument the current element in the array of the variable representing the deck of cards For variable card, set its className equal to card For variable value, set its className equal to value For variable card, call method appendChild() passing variable value as an argument For variable card, call method appendChild() passing variable suit as an argument Referencing the document, call method getElementById() passing deck as an argument followed by method call appendChild() passing variable card as an argument
Function getCardUI(card)	Write function getCardUI() so it receives one parameter called card, it should do the following: Create a variable set equal to the document calling method createElement() passing div as an argument Create variable icon set equal to empty single quotes Write an if / else if / else statement that evaluates the Suit name of the object card passed in to determine if it is Hearts, Spades, Diamonds, or Clubs Set the icon variable to the HTML equivalent image For the element object in step 1, set the innerHTML attribute equal to the card objects Value name concatenated with the icon from step 3 Return the element object created in step 1
Function load()	Write function load() so it does the following: Sets the global variable representing the deck of cards equal to function call getDeck() Calls function shuffle() Calls function renderDeck()
Test Case 1	The HTML page should look similar to figure 1 below

A Deck of Cards 9 10 3. 10 9 Figure 1Rendered HTML A Deck of Cards 9 10 3. 10 9 Figure 1Rendered HTML