Update index.html

index.html

@@ -49,7 +49,7 @@
         <div class="slot" id="slot3">🍌</div>
     </div>
     <button id="spin-btn">Spin</button>
-    <div id="balance">Balance: $<span id="balance-amount">10</span></div>
+    <div id="balance">Balance: $<span id="balance-amount">10.00</span></div>
     <div id="history"></div>
 
     <script>
@@ -61,14 +61,22 @@
             var balanceAmount = document.getElementById('balance-amount');
             var history = document.getElementById('history');
 
+            // Deduct 25 cents
+            var newBalance = parseFloat(balanceAmount.textContent) - 0.25;
+            if (newBalance < 0) {
+                alert("Insufficient balance.");
+                return;
+            }
+            balanceAmount.textContent = newBalance.toFixed(2);
+
             slot1.textContent = emojis[Math.floor(Math.random() * emojis.length)];
             slot2.textContent = emojis[Math.floor(Math.random() * emojis.length)];
             slot3.textContent = emojis[Math.floor(Math.random() * emojis.length)];
 
             if (slot1.textContent === slot2.textContent && slot2.textContent === slot3.textContent) {
                 var winAmount = Math.floor(Math.random() * 100) + 1;
-                var newBalance = parseInt(balanceAmount.textContent) + winAmount;
-                balanceAmount.textContent = newBalance;
+                newBalance = parseFloat(balanceAmount.textContent) + winAmount;
+                balanceAmount.textContent = newBalance.toFixed(2);
                 history.innerHTML += '<p>You won $' + winAmount + '! 🎉</p>';
             }
         });