Merge pull request #24 from josemoracard/solution

created solution branch
breatheco-de · Oct 18, 2023 · bc86765 · bc86765
2 parents e62a12e + 1731ea0
commit bc86765
Show file tree

Hide file tree

Showing 3 changed files with 150 additions and 0 deletions.
diff --git a/solution/index.html b/solution/index.html
@@ -0,0 +1,14 @@
+<html>
+<head>
+	<title>Card Dealer</title>
+	<link rel="stylesheet" type="text/css" href="styles.css">
+</head>
+<body>
+	<div class="centered">
+		<div id="theCard" class="card">
+		  <p id="cardContent"></p>
+		</div>
+	</div>
+	<script type="text/javascript" src="script.js"></script>
+</body>
+</html>
diff --git a/solution/script.js b/solution/script.js
@@ -0,0 +1,22 @@
+window.onload = function() {
+
+    let cardNumber = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
+    let suit = ["Diamonds", "Spades", "Hearts", "Clubs"];
+    let randomCardNumber = Math.floor(Math.random() * cardNumber.length);
+    let randomSuitNumber = Math.floor(Math.random() * suit.length);
+    let finalSuit = suit[randomSuitNumber];
+
+    document.getElementById('cardContent').innerHTML = cardNumber[randomCardNumber];
+    document.getElementById('theCard').className = "";
+    document.getElementById('theCard').classList.add("card");
+    document.getElementById('theCard').classList.add(getSuiteClass(finalSuit));
+  }
+
+  function getSuiteClass(suit) {
+    switch (suit) {
+      case "Diamonds": return "suit-diamonds";
+      case "Spades": return "suit-spades";
+      case "Hearts": return "suit-hearts";
+      case "Clubs": return "suit-clubs";
+    }
+  }
diff --git a/solution/styles.css b/solution/styles.css
@@ -0,0 +1,114 @@
+@charset "UTF-8";
+body {
+  background: green;
+}
+.centered{margin-left: auto;margin-right: auto; width: 300px;}
+a.button {
+  display: block;
+  width: 300px;
+  height: 50px;
+  background: SandyBrown;
+  font-family: Arial;
+  text-decoration: none;
+  font-size: 25px;
+  line-height: 50px;
+  text-align: center;
+  color: #444;
+  font-weight: bold;
+  border-radius: 5px;
+  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
+  margin-top: 20px;
+
+}
+a.button:hover {
+  background: #f7bf90;
+}
+
+.card {
+  width: 300px;
+  height: 440px;
+  border-radius: 15px;
+  background: white;
+  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
+  position: relative;
+}
+.card p {
+  font: 150px/440px Arial, serif;
+  text-align: center;
+}
+
+div.suit-hearts:before {
+  content: "♥";
+  font-size: 90px;
+  position: absolute;
+  top: 8px;
+  left: 20px;
+  color: red;
+}
+
+div.suit-hearts:after {
+  content: "♥";
+  font-size: 90px;
+  position: absolute;
+  bottom: 8px;
+  right: 20px;
+  color: red;
+  transform: rotate(180deg);
+}
+
+div.suit-diamonds:before {
+  content: "♦";
+  font-size: 90px;
+  position: absolute;
+  top: 8px;
+  left: 20px;
+  color: red;
+}
+
+div.suit-diamonds:after {
+  content: "♦";
+  font-size: 90px;
+  position: absolute;
+  bottom: 8px;
+  right: 20px;
+  color: red;
+  transform: rotate(180deg);
+}
+
+div.suit-spades:before {
+  content: "♠";
+  font-size: 90px;
+  position: absolute;
+  top: 8px;
+  left: 20px;
+  color: black;
+}
+
+div.suit-spades:after {
+  content: "♠";
+  font-size: 90px;
+  position: absolute;
+  bottom: 8px;
+  right: 20px;
+  color: black;
+  transform: rotate(180deg);
+}
+
+div.suit-clubs:before {
+  content: "♣";
+  font-size: 90px;
+  position: absolute;
+  top: 8px;
+  left: 20px;
+  color: black;
+}
+
+div.suit-clubs:after {
+  content: "♣";
+  font-size: 90px;
+  position: absolute;
+  bottom: 8px;
+  right: 20px;
+  color: black;
+  transform: rotate(180deg);
+}