JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<div class="slot-machine">
  <div class="slot-wheel">
    <div class="digit">0</div>
    <div class="digit">0</div>
    <div class="digit">0</div>
  </div>
  <button class="spin-button">Spin</button>
  <div class="result-message"></div>
</div>

CSS

.slot-machine {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.slot-wheel {
  display: flex;
  justify-content: center;
  margin: 30px 0;
}

.digit {
  font-size: 50px;
  margin: 0 10px;
}

.spin-button {
  padding: 10px 20px;
  font-size: 20px;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
}

.result-message {
  font-size: 30px;
  font-weight: bold;
  margin-top: 20px;
  display: none;
}

JavaScript

const slotMachine = document.querySelector('.slot-machine');
const slotWheel = document.querySelector('.slot-wheel');
const spinButton = document.querySelector('.spin-button');
const resultMessage = document.querySelector('.result-message');

let isSpinning = false;

spinButton.addEventListener('click', spinWheel);

function spinWheel() {
  if (isSpinning) {
    return;
  }
  isSpinning = true;
  
  const spins = 3;
  let currentSpin = 0;
  let result = null;
  
  const spinInterval = setInterval(() => {
    slotWheel.children[currentSpin].textContent = Math.floor(Math.random() * 10);
    currentSpin++;
    
    if (currentSpin === spins) {
      clearInterval(spinInterval);
      result = getResult();
      checkResult(result);
      isSpinning = false;
    }
  }, 100);
}

function getResult() {
  let result = '';
  
  for (let i = 0; i < 3; i++) {
    result += slotWheel.children[i].textContent;
  }
  
  return result;
}

function checkResult(result) {
  const winningNumber = Math.floor(Math.random() * 3);
  
  if (result[winningNumber] === '7') {
    resultMessage.textContent = 'You win!';
    resultMessage.style.color = '#28a745';
  } else {
    resultMessage.textContent = 'Try again!';
    resultMessage.style.color = '#dc3545';
  }
  
  resultMessage.style.display = 'block';
}