Resilient-Labs · angieptr20 · Mar 9, 2025
diff --git a/css/styles.css b/css/styles.css
@@ -0,0 +1,32 @@
+*{
+  box-sizing: border-box;
+}
+
+body{
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.mainSection{
+    border: none;
+    width: 600px;
+    height: 200px;
+    display: flex;
+
+}
+
+section{
+    border: 1px solid black;
+    width: 200px;
+    /* height: 400px; */
+}
+
+#betTokens{
+    width: 600px;
+    height: 100px;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    border: none;
+}
diff --git a/index.html b/index.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+        <link rel="stylesheet" href="css/styles.css">
+    </head>
+    <body>
+        <h1>Slot Machine: Win some money!</h1>
+
+        <section class="mainSection">
+            <section>
+                <h2 id="firstNum"></h2>
+            </section>
+            <section>
+                <h2 id="secondNum"></h2>
+            </section>
+            <section>
+                <h2 id="thirdNum"></h2>
+            </section>
+        </section>
+        <section id="betTokens">
+            <button id="betMin">BET MIN</button>
+            <button id="betMax">BET MAX</button>
+            <span>Balance: <span id="moneyLeftOver"></span></span>
+        </section>
+        <h2 id="announcement"></h2>
+
+
+        <script type="text/javascript" src="js/main.js"></script>
+    </body>
+</html>
diff --git a/js/main.js b/js/main.js
@@ -0,0 +1,268 @@
+// document.getElementById('betMin').addEventListener('click', betMinimum)
+// document.getElementById('betMax').addEventListener('click', betMaximum)
+
+// let money = 1000
+// money = document.querySelector('#moneyLeftOver').innerText
+
+
+// let firstNum = Number(document.getElementById('firstNum').innerText);
+// let secondNum = Number(document.getElementById('secondNum').innerText);
+// let thirdNum = Number(document.getElementById('thirdNum').innerText);
+
+// function randomizeSlots() {
+//     firstNum = Math.floor(Math.random() * 5) + 1;
+//     secondNum = Math.floor(Math.random() * 5) + 1;
+//     thirdNum = Math.floor(Math.random() * 5) + 1;
+
+// }
+
+// function betMinimum (){
+//     if (firstNum === secondNum && firstNum === thirdNum){
+//         money += 50
+
+//     } else if (firstNum !==  secondNum && firstNum !== thirdNum){
+//         money -= 50
+//     } else if (money === 0){
+//         document.querySelector('h2').innerText = 'You lost: No more tokens left.'
+//     }
+//     document.getElementById("moneyLeftOver").innerHTML= `$${money}`
+// }
+
+// function betMaximum (){
+//     if (firstNum === secondNum && firstNum === thirdNum){
+//         money += 200
+//         document.getElementById("moneyLeftOver").innerHTML= `$${money}`
+//     } else if (money === 0){ 
+//         document.querySelector('h2').innerText = 'You lost: No more tokens left.'
+//     } else {
+//         money -= 200
+//         document.getElementById("moneyLeftOver").innerHTML= `$${money}`
+// }
+// }
+
+// displayCompleteMessage("Sorry, you're a loser");
+
+
+
+//3 slots, 5 options
+
+// document.getElementById('betMin').addEventListener('click', betMinimum);
+// document.getElementById('betMax').addEventListener('click', betMaximum);
+
+// let money = 1000;
+// document.querySelector('#moneyLeftOver').innerText = `$${money}`;
+
+// function randomizeSlots() {
+//     let firstNum = Math.floor(Math.random() * 5) + 1;
+//     let secondNum = Math.floor(Math.random() * 5) + 1;
+//     let thirdNum = Math.floor(Math.random() * 5) + 1;
+
+//     document.getElementById('firstNum').innerText = firstNum;
+//     document.getElementById('secondNum').innerText = secondNum;
+//     document.getElementById('thirdNum').innerText = thirdNum;
+
+//     return { firstNum, secondNum, thirdNum };
+// }
+
+// function betMinimum() {
+//     if (money <= 0) {
+//         document.querySelector('#announcement').innerText = 'You lost: No more tokens left.';
+//         return;
+//     }
+
+//     randomizeSlots();
+
+//     let firstNum = Number(document.getElementById('firstNum').innerText);
+//     let secondNum = Number(document.getElementById('secondNum').innerText);
+//     let thirdNum = Number(document.getElementById('thirdNum').innerText);
+
+//     if (firstNum === secondNum && firstNum === thirdNum) {
+//         money += 50;
+//     } else {
+//         money -= 50;
+//     }
+
+//     document.getElementById("moneyLeftOver").innerText = `$${money}`;
+// }
+
+// function betMaximum() {
+//     if (money <= 0) {
+//         document.querySelector('#announcement').innerText = 'You lost: No more tokens left.';
+//         return;
+//     }
+
+//     randomizeSlots();
+
+//     let firstNum = Number(document.getElementById('firstNum').innerText);
+//     let secondNum = Number(document.getElementById('secondNum').innerText);
+//     let thirdNum = Number(document.getElementById('thirdNum').innerText);
+
+//     if (firstNum === secondNum && firstNum === thirdNum) {
+//         money += 200;
+//     } else {
+//         money -= 200;
+//     }
+
+//     document.getElementById("moneyLeftOver").innerText = `$${money}`;
+// }
+
+
+//OTHER SOLUTION----SEPARATE
+
+// // Event Listeners for BET MIN and BET MAX
+// document.getElementById('betMin').addEventListener('click', playBetMin);
+// document.getElementById('betMax').addEventListener('click', playBetMax);
+
+// // Starting money
+// let money = 1000;
+// document.getElementById('moneyLeftOver').innerText = `$${money}`;
+
+// // Play BET MIN function
+// function playBetMin() {
+//     let firstSlot = getRandomSlot();
+//     let secondSlot = getRandomSlot();
+//     let thirdSlot = getRandomSlot();
+//     displaySlotNumbers(firstSlot, secondSlot, thirdSlot);
+//     checkOutcome(firstSlot, secondSlot, thirdSlot, 50, 50); // Win $50 for a min bet
+// }
+
+// // Play BET MAX function
+// function playBetMax() {
+//     let firstSlot = getRandomSlot();
+//     let secondSlot = getRandomSlot();
+//     let thirdSlot = getRandomSlot();
+//     displaySlotNumbers(firstSlot, secondSlot, thirdSlot);
+//     checkOutcome(firstSlot, secondSlot, thirdSlot, 200, 200); // Win $200 for a max bet
+// }
+
+// // Generate a random number between 1 and 5
+// function getRandomSlot() {
+//     return Math.floor(Math.random() * 5) + 1;
+// }
+
+// // Display slot numbers in the DOM
+// function displaySlotNumbers(first, second, third) {
+//     document.getElementById('firstNum').innerText = first;
+//     document.getElementById('secondNum').innerText = second;
+//     document.getElementById('thirdNum').innerText = third;
+// }
+
+// // Check the outcome of the game
+// function checkOutcome(first, second, third, betAmount, winAmount) {
+//     if (money === 0) {
+//         displayMessage("You lost: No more tokens left.");
+//     } else if (first === second && first === third) {
+//         // Fixed winnings: $50 for minimum bet, $200 for maximum bet
+//         money += winAmount;
+//         displayMessage(`Congratulations! You won $${winAmount}!`);
+//     } else {
+//         money -= betAmount;
+//         if (money <= 0) {
+//             money = 0; // Ensuring money doesn't go negative
+//             displayMessage("You lost: No more tokens left.");
+//         } else {
+//             displayMessage(`Better luck next time! You lost $${betAmount}.`);
+//         }
+//     }
+//     updateMoneyDisplay();
+// }
+
+// // Update the money display in the DOM
+// function updateMoneyDisplay() {
+//     document.getElementById('moneyLeftOver').innerText = `$${money}`;
+// }
+
+// // Display a message in the DOM
+// function displayMessage(message) {
+//     document.getElementById('announcement').innerText = message;
+// }
+
+
+
+//FINAL ATTEMPT 
+
+
+
+document.querySelector('#betMin').addEventListener('click', placedMinBet)
+document.querySelector('#betMax').addEventListener('click', placedMaxBet)
+
+let balance = 1000
+document.querySelector('#moneyLeftOver').innerText = `$${balance}`
+
+function placedMinBet(){
+    let slotOne = Math.floor(Math.random() * 5) 
+    let slotTwo = Math.floor(Math.random() * 5) 
+    let slotThree = Math.floor(Math.random() * 5)
+
+    document.querySelector('#firstNum').innerText = slotOne;
+    document.querySelector('#secondNum').innerText = slotTwo;
+    document.querySelector('#thirdNum').innerText = slotThree;
+
+    if(slotOne == slotTwo && slotOne == slotThree){
+        balance += 50
+        document.querySelector('#moneyLeftOver').innerText = `$${balance}`
+    } else{
+        console.log('Sorry, try again!')
+        balance -= 5
+        document.querySelector('#moneyLeftOver').innerText = `$${balance}`
+    }
+}
+
+function placedMaxBet(){
+
+    let slotOne = Math.floor(Math.random() * 5) 
+    let slotTwo = Math.floor(Math.random() * 5) 
+    let slotThree = Math.floor(Math.random() * 5)
+
+    document.querySelector('#firstNum').innerText = slotOne;
+    document.querySelector('#secondNum').innerText = slotTwo;
+    document.querySelector('#thirdNum').innerText = slotThree;
+
+
+    if(slotOne == slotTwo && slotOne == slotThree){
+        balance += 500
+        document.querySelector('#moneyLeftOver').innerText = `$${balance}`
+    } else{
+        console.log('Sorry, try again!')
+        balance -= 50;
+        document.querySelector('#moneyLeftOver').innerText = `$${balance}`
+    }
+}
+
+//min bet click button
+// event listener that call minbet function
+
+// start with 1k 
+//let balance = 1000
+
+//min bet function
+    //decrease min bet 5
+        //balance = balance - 5
+    // result of the spin 
+    //math.random() * 5
+        //randomOne = math.random() * 5
+        //randomTwo = math.random() * 5
+        //randomThree = math.random() * 5
+    //display result
+    //create html for reels
+    //document.querySelector('#pumpkin').innerText = randomOne
+    //document.querySelector.('reelTwo').innerText = randomTwo
+    //document.querySelector.('reelThree).innerText = randomThree
+    // display if they win or lose 
+    //reel one == reel two && reel two == reel three
+    //increase balance 50
+    //html for display
+    //display 'You win!!!!!'
+    //else
+    //display 'Try again'
+
+//max bet click button
+
+// they win 50
+// balance + 50 
+
+//decrease max bet 50
+
+// what can they do
+// what do they expect 
+// what do they see