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

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

References

styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<canvas>Tag per disegnare grafica dinamica su pagine web.
typeSpecifica la tipologia/funzione di un elemento.
animationDefinisce i parametri dell'animazione di un elemento o selettore
<!doctype>Dichiara la versione del linguaggio di sviluppo della pagina
heightDetermina l'altezza di un elemento HTML in pixel

Users

Log in to search for users

Explore

Find inspiration

IL COLIBRI\' E LA GOCCIA DI RUGIADA

Campagna in primavera

AoIT Dashboard 2024 v1

Taketori Monogatari

no cap animazione

Riprova verifica di progr(2)

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">Generate 100 Head or Tails</button>
			</div>
		</section>

<main>





</main>


		<div class="row">
			<div class="col">
				<h1>Heads</h1>
				<span class="hTally">0</span>
			</div>
			<div class="col">
				<h1>Tails</h1>
				<span class ="tTally">0</span>
		</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;
}

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


// GENERATES CPU RANDOM CHOICE
function getHeadsOrTails() { 

return Math.floor(Math.random() * 2);

}



// CREATES ALL RANDOMIZED CHOICES
// DISPLAY DATA IN HTML
function createRandomizerRequest(loopMax) {

document.querySelector(".heads").innerHTML = ""
document.querySelector(".tails").innerHTML = ""

for(var x = 0; x < loopMax; x++ ){

 var random= Math.floor ( Math.random() * 2 );
 if( random > 0){
tally.heads++;
document.querySelector(".heads").insertAdjacentHTML("beforeend", `<div>Head (${x})</div>`);
 }else{
tally.tails++;
document.querySelector(".tails").insertAdjacentHTML("beforeend", `<div>Tails (${x})</div>`);
 }

document.querySelector(".hTally").innerText = tally.heads;
document.querySelector(".tTally").innerText = tally.tails;

}
 }
 





 document.querySelector(".btn").addEventListener("click", function(){
createRandomizerRequest(100);
 });


// RUNS FUNCTION ON DOCUMENT LOAD
createRandomizerRequest(100);