Skip to content

Instantly share code, notes, and snippets.

@Smakar20

Smakar20/index.html

Created March 21, 2019 03:08
Show Gist options
  • Save Smakar20/3d9e1a7d19dd058223fb5307df94a2f0 to your computer and use it in GitHub Desktop.
Save Smakar20/3d9e1a7d19dd058223fb5307df94a2f0 to your computer and use it in GitHub Desktop.
Download ZIP
displayDeckOfCards created by smakar20 - https://repl.it/@smakar20/displayDeckOfCards
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="displayDiv"></div>
<script src="script.js"></script>
</body>
</html>
Raw
script.js
var suits = {
'spade': 'spade',
'heart': 'heart',
'club': 'club',
'diamond': 'diamond'
};
class Card {
constructor(suit, faceValue){
this.suit = suit;
this.faceValue = faceValue;
}
}
class Deck {
constructor(){
this.cardDeck = [];
}
buildDeck(){
for (var i = 1; i <= 13; i++){
for (var s in suits){
this.cardDeck.push(new Card(suits[s], i));
}
}
}
}
function display(){
var deck = new Deck();
deck.buildDeck();
var shuffledArr = shuffle(deck.cardDeck);
var row = 0;
var display = '<div class="row">';
var finalResult = '';
for (var card of shuffledArr){
if (row === 5){
display += '</div>';
finalResult += display;
display = '<div class="row">';
row = 0;
//console.log('final: ', finalResult);
}
display += '<div>' + 'suit: ' + card.suit + ' value: '+ card.faceValue + '</div>';
row++;
}
finalResult += display;
document.getElementById("displayDiv").innerHTML = finalResult;
}
function shuffle(arr){
curIdx = arr.length;
var tempVal;
while(0 !== curIdx){
var randomIdx = getRandomInt(0, 52);
curIdx -= 1;
tempVal = arr[randomIdx];
arr[randomIdx] = arr[curIdx];
arr[curIdx] = tempVal;
}
return arr;
}
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min)) + min; //The maximum is exclusive and the minimum is inclusive
}
display();
Raw
style.css
.row div {
display: inline-block;
border: 1px solid red;
margin: 2px;
padding: 2px;
}
.row {
border: 2px solid blue;
margin: 5px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment