JSFiddle - React, Tailwind, and code Playground

by Craig Martin

HTML

<div id="winning_num"></div>

<div id="out"></div>

<div id="prize-wheel" class="prize-wheel" style="display:none;">
  <div class="wheel-container">
    <div class="wheel"></div>
    <div class="pointer"></div>
  </div>
  <button class="spin-button">Spin</button>
</div>

CSS

#out {
  font-size:30px;
  text-align:center;
}
#winning_num {
  font-size:20px;
  text-align:center;  
}



.prize-wheel {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
}

.wheel-container {
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}

.wheel {
  position: absolute;
  top: -75px;
  left: -75px;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background-color: #ffb900;
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.3) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0.3) 75%, transparent 75%, transparent);
  animation: rotate-wheel 5s linear infinite;
}

.pointer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 15px 25px 15px;
  border-color: transparent transparent #fff transparent;
  transform: translate(-50%, -50%);
}

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

@keyframes rotate-wheel {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}

JavaScript

times_1up=0;
times_2up=0;
times_3up=0; 
function getRandomNumber() {
  var randomNumber = Math.floor(Math.random() * 100) + 1; // Generate a random number between 1 and 100
  if (randomNumber <= 33) {
type_num="Win a Spin";
times_1up++;
    // 33% of the time, return a number under 20
    return Math.floor(Math.random() * 20) + 1;// Generate a random number between 1 and 20
    
  } else if (randomNumber >= 67) {
type_num="Lose";
times_2up++;
    // 33% of the time, return a number over 80
    return Math.floor(Math.random() * 20) + 81; // Generate a random number between 81 and 100
  } else {
type_num="Sorry";
times_3up++;
    // Otherwise, return a number between 20 and 80
    return Math.floor(Math.random() * 61) + 20; // Generate a random number between 20 and 80
  }
}

//alert(getRandomNumber());

rollLoop=0;
loser=0;
winner=0;
function rollPlayer(){
document.getElementById("winning_num").innerHTML="";
rollLoop=0;
let rollNum = setInterval(function(){
ranNum = getRandomNumber();
document.getElementById("out").innerText =ranNum+" \n\nWinning Numbers 1-20";
if(rollLoop>="20"){
clearInterval(rollNum);
if(type_num=="Lose"){
loser++;
} else if(type_num=="Sorry"){
loser++;
} else if(type_num=="Win a Spin"){
winner++;
document.getElementById("out").innerText =ranNum+" You win a spin";
document.getElementById("prize-wheel").style = "display:block";

}
document.getElementById("winning_num").innerHTML = type_num+"<br>winners:"+winner+" losers:"+loser+" <button type='button' onclick='rollPlayer()'>Play Again</button>";
}
rollLoop++;
},100);
}

rollPlayer();


const wheel = document.querySelector('.wheel');
const pointer = document.querySelector('.pointer');
const spinButton = document.querySelector('.spin-button');
const prizes = ['Prize 1', 'Prize 2', 'Prize 3', 'Prize 4', 'Prize 5', 'Prize 6'];
let spinning = false;

spinButton.addEventListener('click', spinWheel);

function spinWheel() {
  if (spinning) return;
  spinning = true;
  
  const randomIndex =...