I am currently in the beginning of learning javascript in school and I have a small project to make a coin toss simulator as a way of learning so I am allowed to use others code wich I have done. I am supposed to “create” a simulator where I can flip a coin and it tells me heads or tails and keeps track of the results and it also needs a function where the user can input how many times to toss the coin and the only way I could find is doing it with prompt but I need it to be input in html. Any help is MUCH appreciated. If someone would like to help me with a MAX toss limit of 10 times aswell it would really help!
Thank you in advance
/Andreas
<html lang="en">
<head>
<!-- Design by foolishdeveloper.com -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flip A Coin</title>
<!--Google Fonts-->
<link href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500&display=swap" rel="stylesheet">
<!--Stylesheet-->
<style media="screen">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Rubik",sans-serif;
}
body{
height: 100%;
background-image: url("wp7101128-casino-3d-wallpapers.jpg");
}
.container{
background-color: rgb(255, 255, 255);
width: 400px;
padding: 35px;
position: absolute;
transform: translate(-50%,-50%);
top: 50%;
left: 50%;
box-shadow: 15px 30px 35px rgba(0,0,0,0.1);
border-radius: 10px;
-webkit-perspective: 300px;
perspective: 300px;
}
.stats{
display: flex;
color: #101020;
font-weight: 500;
padding: 20px;
margin-bottom: 40px;
margin-top: 55px;
box-shadow: 0 0 20px rgba(238, 190, 34, 0.788);
}
.stats p:nth-last-child(1){
margin-left: 50%;
}
.coin{
height: 150px;
width: 150px;
position: relative;
margin: 32px auto;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.coin img{
width: 145px;
}
.krone,.mynt{
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.mynt{
transform: rotateX(180deg);
}
@keyframes spin-mynt{
0%{
transform: rotateX(0);
}
100%{
transform: rotateX(1980deg);
}
}
@keyframes spin-krone{
0%{
transform: rotateX(0);
}
100%{
transform: rotateX(2160deg);
}
}
.buttons{
display: flex;
justify-content: space-between;
}
button{
width: 150px;
padding: 15px 0;
border: none;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
}
#flip-button{
background-color: #15b80f;
color: #ffffff;
}
#flip-button:disabled{
background-color: #e1e0ee;
border-color: #e1e0ee;
color: #101020;
}
#reset-button{
background-color: #d11609;
color: white;
}
</style>
</head>
<body>
<div class="container">
<div class="coin" id="coin">
<div class="krone">
<img src="kron.png">
</div>
<div class="mynt">
<img src="mynt.png">
</div>
</div>
<div class="stats">
<p id="krone-count">Krone: 0</p>
<p id="mynt-count">Mynt: 0</p>
</div>
<div class="buttons">
<button id="flip-button">
Flip Coin
</button>
<div>
<label for="quantity">How many times to flip?</label>
<input type="number" id="quantity" min="1" value="1" />
</div>
<button id="reset-button">
Reset
</button>
</div>
<!--Script-->
<script type="text/javascript">
main(); // Calls the main function to begin the coin flipping simulation.
let krone = 0;
let mynt = 0;
let coin = document.querySelector(".coin");
let flipBtn = document.querySelector("#flip-button");
let resetBtn = document.querySelector("#reset-button");
flipBtn.addEventListener("click", () => {
let i = Math.floor(Math.random() * 2);
coin.style.animation = "none";
if(i){
setTimeout(function(){
coin.style.animation = "spin-krone 3s forwards";
}, 100);
krone++;
}
else{
setTimeout(function(){
coin.style.animation = "spin-mynt 3s forwards";
}, 100);
mynt++;
}
setTimeout(updateStats, 3000);
disableButton();
});
setTimeout(updateStats, 3000);
function updateStats(){
document.querySelector("#krone-count").textContent = `Krone: ${krone}`;
document.querySelector("#mynt-count").textContent = `Mynt: ${mynt}`;
function disableButton(){
flipBtn.disabled = true;
setTimeout(function(){
flipBtn.disabled = false;
},3000);
}
resetBtn.addEventListener("click",() => {
coin.style.animation = "none";
krone = 0;
mynt = 0;
updateStats();
});
}
function main() {
var n = Number(prompt("How many times do you want to flip the coin?")); // Gets the number of times to flip the coin.
var krone = 0, mynt = 0; // Initiates the heads and tails variables.
for(var i = 0; i < n; i++) {
// Uses the Math.random function to generate a random number.
// If the rand num is less than 1/2, it is classified as heads.
// Otherwise, the num is above 1/2 and is classified as tails.
if(Math.random() < 0.50) {
krone++;
} else {
mynt++;
}
(updateStats);
document.querySelector("#krone-count").textContent = `Krone: ${krone}`;
document.querySelector("#mynt-count").textContent = `Mynt: ${mynt}`;
}
}
</script>
</body>
</html>```