learnwithleon · jcads · Feb 10, 2021 · Feb 10, 2021 · Feb 10, 2021 · Feb 11, 2021
diff --git a/images/charizard.png b/images/charizard.png
diff --git a/images/groudon.png b/images/groudon.png
diff --git a/images/mewtwo.png b/images/mewtwo.png
diff --git a/images/pikachu.png b/images/pikachu.png
diff --git a/images/pokeball.png b/images/pokeball.png
diff --git a/index.html b/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  	<meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Slot Machine</title>
+
+  <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+  <header></header>
+  <main>
+    <section>
+      <div class="reel reel-1">
+        <img src="images/groudon.png" alt="">
+      </div>
+      <div class="reel reel-2">
+        <img src="images/mewtwo.png" alt="">
+      </div>
+      <div class="reel reel-3">
+        <img src="images/pikachu.png" alt="">
+      </div>
+    </section>
+
+    <div class="bottom-container">
+      <h3>Your Money</h3>
+      <p>$ <span id="money">20</span></p>
+
+      <div class="bets">
+        <form>
+          <label for="bet">Enter your bet: </label>
+          <input type="number" id="bet" name="bet" min="1" max="20" required>
+          <input type="submit" value="Spin" id="btn">
+        </form>
+      </div>
+    </div>
+  </main>
+
+  <script type="text/javascript" src="index.js"></script>
+</body>
+</html>
diff --git a/index.js b/index.js
@@ -0,0 +1,60 @@
+const button = document.getElementById("btn");
+const reelImages = document.getElementsByTagName("img");
+const money = document.getElementById("money");
+const bet = document.getElementById("bet");
+let reels = [
+  reelImages[0],
+  reelImages[1],
+  reelImages[2]
+] 
+const imageFnames = ["charizard", "groudon", "mewtwo", "pikachu", "pokeball"];
+
+button.addEventListener("click", roll);
+
+async function roll(e) {
+  e.preventDefault();
+  if (bet.value === "") {
+    alert("Please specify your bet amount");
+    return;
+  }
+  button.disabled = true;
+  let moneyValue = Number(money.innerHTML);
+  let betAmount = Number(bet.value);
+  const newReels = await setNewImages(reels);
+
+  if (isWinner(newReels)) {
+    moneyValue += betAmount;
+    bet.max = moneyValue;
+  } else {
+    moneyValue -= betAmount;
+  }
+  money.innerHTML = moneyValue;
+
+  if (!moneyValue) {
+    button.disabled = true;
+  }
+}
+
+function setNewImages(reels) {
+  return new Promise((resolve, reject) => {
+    reels.forEach((img, idx) => {
+      setTimeout(() => {
+        img.src = randomImg(imageFnames);
+
+        console.log(img.src);
+        if (idx == 2) {
+          button.disabled = false;
+          resolve(reels);
+        }
+      }, 400*(idx + 1) /*change to 2000, delay every image*/);
+    });
+  });
+}
+
+function isWinner(spinRes) {
+  return spinRes[0].src === spinRes[1].src && reels[1].src === spinRes[2].src;
+}
+
+function randomImg(images) {
+  return "images/" + images[Math.floor(Math.random() * images.length)] + ".png";
+}
diff --git a/styles.css b/styles.css
@@ -0,0 +1,18 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-size: 62.5%;
+  text-align: center;
+}
+
+.reel {
+  display: inline-block;
+}
+
+img {
+  width: 6rem;
+}