Heads Or Tails Random Tally by @tywilliams7 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

References

<textarea>Area di testo libero espandibile per form HTML
<h5>Titolo di intestazione di quinto livello
listCollega un elemento input con una lista di opzioni datalist
minlengthDetermina il numero minimo di caratteri per un elemento input
langSpecifica la lingua del contenuto di un elemento
<b>Formatta il testo in grassetto

Users

Log in to search for users

Explore

Find inspiration

Il Giro del Mondo in 80 Giorni(2)

cpa continuing professional educat

Scheda Tecnica Xiaomi 14 Ultra

"esercitazione 6.html"

Html con 3 img e descrize

Form per il torneo misto dis

Ethical hacking

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Heads Or Tails Tally</title>
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet"
		integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js"
		integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0"
		crossorigin="anonymous"></script>
	<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js"
		integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG"
		crossorigin="anonymous"></script>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<main class="container">
		<section class="row">
			<div class="col">
				<button class="btn btn-lg btn-success tossButton" id="tossButton" >Generate 100 Head or Tails</button>
    <ul id="resultsList"></ul>
			</div>
		</section>

		<div class="row">
			<div class="col">
				<h1>Heads</h1>
				<span>0</span>
			</div>
			<div class="col">
				<h1>Tails</h1>
				<span>0</span>
			</div>
		</div>
</div class=coin</div>

		<div class="row">
			<div class="col">
				<ul class="heads list-group list-group-flush"></ul>
			</div>
			<div class="col">
				<ul class="tails list-group list-group-flush"></ul>
			</div>
		</div>
	</main>

</body>

</html>

div.col {
	text-align: center;
}

span {
	margin-top: 10px;
	font-size: 64px;
}

button {
	text-align: center;
	font-size: 24px;
}
 body {
    background: mediumpurple;
  }

.coin {
  animation-name: popUp;
  animation-duration: .25s;
}

// STORES THE TOTAL AMOUNT PER CATEGORY
var tally = {
	heads:0,
	tails:0 
};


// GENERATES CPU RANDOM CHOICE
function getHeadsOrTails() {

}

// CREATES ALL RANDOMIZED CHOICES
// DISPLAY DATA IN HTML
 function tossCoin() {
   for(let i=0; i<100; i++){
            const randomValue = Math.floor(Math.random() * 2); // 0 or 1
            
            if (randomValue === 0) {
                tally.heads++;

                document.querySelector(".heads").insertAdjacentHTML("beforeend",`<div> ${i}Heads</div>`);

            } else {
                tally.tails++;
               document.querySelector(".tails").insertAdjacentHTML("beforeend",`<div>${i}Tails</div>`);
            }
            
        }
        tally.heads
 }

        
 document.getElementById("tossButton").addEventListener('click', function(){
 
      tossCoin();
 });