Heads Or Tails Random Tally 2 by @EthanS - Codewith.it

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

References

<canvas>Tag per disegnare grafica dinamica su pagine web.
<hr>Inserisce una linea orizzontale
<h1>Titolo di intestazione di primo livello
typeSpecifica la tipologia/funzione di un elemento.
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input

Users

Log in to search for users

Explore

Find inspiration

congettura di golbach a 3

prova museo (2)

torta della nonna

CAPODANNO SENZA LUCI

04_Operators and Expressions

Esercitazione n. 1(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=" button btn btn-lg btn-success" onclick="createRandomizerRequest()">Generate 100 Head or Tails</button>
			</div>
		</section>

		<div class="row">
			<div class="col">
				<h1>Heads</h1>
				<span id="headsScore">0</span>
        <ul style="padding:0;" class="headsNum"></ul>
			</div>
			<div class="col">
				<h1>Tails</h1>
				<span id="tailsScore">0</span>
        <ul style="padding:0;" class="tailsNum"></ul>
			</div>
		</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;
}
li{
	font-size:20px;
	color:rgb(33, 165, 110);
list-style-type:none;
}

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


// GENERATES CPU RANDOM CHOICE
function getHeadsOrTails() {
  let randomNumber = Math.floor(Math.random() * 2);

	 
	return randomNumber
}

console.log(getHeadsOrTails())
 


	var tailscore = 0; 
	var headscore = 0;
function createRandomizerRequest() {

document.querySelector(".headsNum").innerHTML="";
document.querySelector(".tailsNum").innerHTML="";

for(i=0; i<=100; i++){

		if(getHeadsOrTails() === 0){

	  headscore+=1;
		document.querySelector(".headsNum").insertAdjacentHTML('beforeend', 
`<li class="listItem">${i} : Heads</li>`)
			console.log(i +  ": Heads ");
			
		}
		else if(getHeadsOrTails()===0){
			tailscore+=1
					document.querySelector(".tailsNum").insertAdjacentHTML('beforeend', 
`<li class="listItem">${i} : Tails</li>`)
			console.log(i+ ": Tails")
		}
		// console.log(i + ": " + getHeadsOrTails() );
	 }

document.getElementById("headsScore").textContent=headscore;
document.getElementById("tailsScore").textContent=tailscore;
}