as the topic says , i am doing a Wheel of Fortune / Lucky Wheel but i would like to limit the number of spins the guest can make. I am doing a little form at first for the player to enter his username and choose the number of spins.
First Form :
<form action="functions/check_step.php" method="post" class="bg-light p-5">
<div class="text-center mb-4 mt-n4">
<h1 class="text-uppercase font-weight-bold">Spin The Wheel</h1>
<h6 class="text-uppercase"><span class="iconify mr-1 mt-n1 ml-n2" data-icon="simple-icons:onlyfans" data-width="24" data-height="24" style="color: lightblue; padding-top:-10px;"></span>onlyfans.com/melibabies</h6>
</div>
<hr>
<div class="text-center my-4">
<h4 class="text-uppercase font-weight-bold">Step 1 : CHOOSE YOUR PACKAGE</h4>
</div>
<div class="form-outline mb-4">
<input type="text" id="frm1_name" class="form-control" />
<label class="form-label" for="frm1_name">Your Username</label>
</div>
<div class="mb-4">
<select class="select" name="frm1_nbspin">
<option value="1">1 Spin</option>
<option value="2">2 Spins</option>
<option value="3">3 Spins</option>
</select>
<label class="form-label select-label">Choose your Package</label>
</div>
<div>
<button type="submit" name="frm1_submit" class="btn btn-primary btn-block">START</button>
</div>
</form>
Here is the Jscript for the wheel
function myfunction(){
var x = 1024; //min value
var y = 9999; // max value
var deg = Math.floor(Math.random() * (x - y)) + y;
document.getElementById('box').style.transform = "rotate("+deg+"deg)";
var element = document.getElementById('mainbox');
element.classList.remove('animate');
setTimeout(function(){
element.classList.add('animate');
}, 5000); //5000 = 5 second
}
And here is my html page for the wheel (i dont include the css but if its required let me know i will post/add it.
<body>
<div id="mainbox" class="mainbox">
<div id="box" class="box">
<div class="box1">
<span class="span1"><b>Option1</b></span>
<span class="span2"><b>Option2</b></span>
<span class="span3"><b>Option3</b></span>
<span class="span4"><b>Option4</b></span>
</div>
<div class="box2">
<span class="span1"><b>Option5</b></span>
<span class="span2"><b>Option6</b></span>
<span class="span3"><b>Option7</b></span>
<span class="span4"><b>Option8</b></span>
</div>
</div>
<button class="spin" onclick="myfunction()">SPIN</button>
</div>
<script src="script.js"></script>
</body>
I am not really good with javascript I am really a beginner with it … i am better with html/css and php lol … So i really don’t know where to start to add that function of limited spins. Thanks already to the stackoverflow community for helping =)