Card Flip
cardflip.html
<!DOCTYPE html>
<html>
<head>
<title>Card Flip</title>
<link rel="stylesheet" type="text/css" href="cardflip.css">
</head>
<body>
<i>Keep clicking the card:</i><br>
<img src="https://digisoln.com/resources/cards/cardback.gif"
id="card" onclick="flip()"><br>
Card Title: <strong><span id="info">Cardback</span></strong><br>
Card Weight Tally: <strong><span id="count">0</span></strong><br>
<script src="cardflip.js"></script>
</body>
</html>
cardflip.css
body{
background-color: papayawhip;
}
cardflip.js
var Deck = [
{ name: "Two of Clubs", weight: 2, url: "https://digisoln.com/resources/cards/2c.gif" },
{ name: "Two of Diamonds", weight: 2, url: "https://digisoln.com/resources/cards/2d.gif" },
{ name: "Two of Hearts", weight: 2, url: "https://digisoln.com/resources/cards/2h.gif" },
{ name: "Two of Spades", weight: 2, url: "https://digisoln.com/resources/cards/2s.gif" },
{ name: "Three of Clubs", weight: 3, url: "https://digisoln.com/resources/cards/3c.gif" },
{ name: "Three of Diamonds", weight: 3, url: "https://digisoln.com/resources/cards/3d.gif" },
{ name: "Three of Hearts", weight: 3, url: "https://digisoln.com/resources/cards/3h.gif" },
{ name: "Three of Spades", weight: 3, url: "https://digisoln.com/resources/cards/3s.gif" },
{ name: "Four of Clubs", weight: 4, url: "https://digisoln.com/resources/cards/4c.gif" },
{ name: "Four of Diamonds", weight: 4, url: "https://digisoln.com/resources/cards/4d.gif" },
{ name: "Four of Hearts", weight: 4, url: "https://digisoln.com/resources/cards/4h.gif" },
{ name: "Four of Spades", weight: 4, url: "https://digisoln.com/resources/cards/4s.gif" },
{ name: "Five of Clubs", weight: 5, url: "https://digisoln.com/resources/cards/5c.gif" },
{ name: "Five of Diamonds", weight: 5, url: "https://digisoln.com/resources/cards/5d.gif" },
{ name: "Five of Hearts", weight: 5, url: "https://digisoln.com/resources/cards/5h.gif" },
{ name: "Five of Spades", weight: 5, url: "https://digisoln.com/resources/cards/5s.gif" },
{ name: "Six of Clubs", weight: 6, url: "https://digisoln.com/resources/cards/6c.gif" },
{ name: "Six of Diamonds", weight: 6, url: "https://digisoln.com/resources/cards/6d.gif" },
{ name: "Six of Hearts", weight: 6, url: "https://digisoln.com/resources/cards/6h.gif" },
{ name: "Six of Spades", weight: 6, url: "https://digisoln.com/resources/cards/6s.gif" },
{ name: "Seven of Clubs", weight: 7, url: "https://digisoln.com/resources/cards/7c.gif" },
{ name: "Seven of Diamonds", weight: 7, url: "https://digisoln.com/resources/cards/7d.gif" },
{ name: "Seven of Hearts", weight: 7, url: "https://digisoln.com/resources/cards/7h.gif" },
{ name: "Seven of Spades", weight: 7, url: "https://digisoln.com/resources/cards/7s.gif" },
{ name: "Eight of Clubs", weight: 8, url: "https://digisoln.com/resources/cards/8c.gif" },
{ name: "Eight of Diamonds", weight: 8, url: "https://digisoln.com/resources/cards/8d.gif" },
{ name: "Eight of Hearts", weight: 8, url: "https://digisoln.com/resources/cards/8h.gif" },
{ name: "Eight of Spades", weight: 8, url: "https://digisoln.com/resources/cards/8s.gif" },
{ name: "Nine of Clubs", weight: 9, url: "https://digisoln.com/resources/cards/9c.gif" },
{ name: "Nine of Diamonds", weight: 9, url: "https://digisoln.com/resources/cards/9d.gif" },
{ name: "Nine of Hearts", weight: 9, url: "https://digisoln.com/resources/cards/9h.gif" },
{ name: "Nine of Spades", weight: 9, url: "https://digisoln.com/resources/cards/9s.gif" },
{ name: "Ten of Clubs", weight: 10, url: "https://digisoln.com/resources/cards/tc.gif" },
{ name: "Ten of Diamonds", weight: 10, url: "https://digisoln.com/resources/cards/td.gif" },
{ name: "Ten of Hearts", weight: 10, url: "https://digisoln.com/resources/cards/th.gif" },
{ name: "Ten of Spades", weight: 10, url: "https://digisoln.com/resources/cards/ts.gif" },
{ name: "Jack of Clubs", weight: 10, url: "https://digisoln.com/resources/cards/jc.gif" },
{ name: "Jack of Diamonds", weight: 10, url: "https://digisoln.com/resources/cards/jd.gif" },
{ name: "Jack of Hearts", weight: 10, url: "https://digisoln.com/resources/cards/jh.gif" },
{ name: "Jack of Spades", weight: 10, url: "https://digisoln.com/resources/cards/js.gif" },
{ name: "Queen of Clubs", weight: 10, url: "https://digisoln.com/resources/cards/qc.gif" },
{ name: "Queen of Diamonds", weight: 10, url: "https://digisoln.com/resources/cards/qd.gif" },
{ name: "Queen of Hearts", weight: 10, url: "https://digisoln.com/resources/cards/qh.gif" },
{ name: "Queen of Spades", weight: 10, url: "https://digisoln.com/resources/cards/qs.gif" },
{ name: "King of Clubs", weight: 10, url: "https://digisoln.com/resources/cards/kc.gif" },
{ name: "King of Diamonds", weight: 10, url: "https://digisoln.com/resources/cards/kd.gif" },
{ name: "King of Hearts", weight: 10, url: "https://digisoln.com/resources/cards/kh.gif" },
{ name: "King of Spades", weight: 10, url: "https://digisoln.com/resources/cards/ks.gif" },
{ name: "Ace of Clubs", weight: 11, url: "https://digisoln.com/resources/cards/ac.gif" },
{ name: "Ace of Diamonds", weight: 11, url: "https://digisoln.com/resources/cards/ad.gif" },
{ name: "Ace of Hearts", weight: 11, url: "https://digisoln.com/resources/cards/ah.gif" },
{ name: "Ace of Spades", weight: 11, url: "https://digisoln.com/resources/cards/as.gif" }
];
var tally = 0;
function flip(){
//the Math.floor will always round this down to a range of 0 to 51:
random_card = Deck[Math.floor(Math.random() * 52)];
tally += random_card.weight;
document.getElementById("card").src = random_card.url;
document.getElementById("info").innerHTML = random_card.name;
document.getElementById("count").innerHTML = tally;
}