Scenario Generate a deck of cards in JavaScript Tasks cards.html Page title In t
ID: 3726888 • Letter: S
Question
Scenario
Generate a deck of cards in JavaScript
Tasks
cards.html
Page title
In the <head>, set the title of the page to “Deck of Cards”
Link external JavaScript file
In the <head>, use the <script> tag to link in the external JavaScript file card.js
Link external CSS file
In the <head>, use the <link> tag to link in the external CSS file cards.css
Heading tag
In the <body>, use a heading tag to display “Deck of Cards”
Create a div
In the <body>, use the <div> 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:
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:
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:
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
Set the icon variable to the HTML equivalent image
For the element object in step 1, set the innerHTML attribute equal to the card object’s 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
Tasks
cards.html
Page title
In the <head>, set the title of the page to “Deck of Cards”
Link external JavaScript file
In the <head>, use the <script> tag to link in the external JavaScript file card.js
Link external CSS file
In the <head>, use the <link> tag to link in the external CSS file cards.css
Heading tag
In the <body>, use a heading tag to display “Deck of Cards”
Create a div
In the <body>, use the <div> 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 faceCreates 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 deckCreate 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 ClubsSet the icon variable to the HTML equivalent image
For the element object in step 1, set the innerHTML attribute equal to the card object’s 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 10 10Explanation / Answer
javascript
var suits = [ "hearts", "diams", "clubs", "spades" ];
var ranks = [ 2, 3, 4, 5, 6, 7, 8, 9, 10, "J", "Q", "K", "A" ];
var deck = [];
$(init);
function init() {
makeDeck();
$("#drawbtn").click( function() {
var myCard = drawCard();
if( myCard ) {
makeCard( myCard.suit, myCard.rank );
} else {
alert("no more cards in the deck");
}
});
}
function makeDeck() {
deck = [];
//for each type of suit
for( var i = 0; i < suits.length; i++ ) {
//and for each rank
for( var j = 0; j < ranks.length; j++ ) {
//make a card
var card = {};
card.suit = suits[i];
card.rank = ranks[j];
deck.push(card);
}
}
console.log( "MADE A NEW DECK OF ", deck.length, " CARDS" );
console.log( deck );
}
function drawCard() {
var card;
if( deck.length > 0 ) {
var randIndex = Math.floor( Math.random() * deck.length );
card = deck.splice( randIndex, 1 )[0];
}
return card;
}
function makeCard( suit, rank ) {
var card = $(".card.template").clone();
card.removeClass("template");
card.find(".rank").html(rank);
card.find(".suit").html("&"+suit+";");
if( suit === "hearts" || suit === "diams" ) {
card.addClass("red");
}
$("body").append(card);
}
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.