Digital Solutions

Card Flip

cardflip.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!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>
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

cardflip.css

1
2
3
body{
  background-color: papayawhip;
}
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

cardflip.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
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;
}
 
 
הההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההההה
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX