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

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

References

listCollega un elemento input con una lista di opzioni datalist
Inserisce un commento nel codice
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
<select>Usato per creare un menu a tendina.
<br>Inserisce uno spazio vuoto tra due elementi HTML.
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione

Users

Log in to search for users

Explore

Find inspiration

fibonacci manoel

AirPods Shop LOGIN

Notizie dai Monti(2)

ciao io sono sara

Esercitazione n. 1(2)

Heads Or Tails Random Tally

REVIEW: For Loops

Cappuccetto Rosso - La Storia

Costruzione Immagine

icons - social bar

Esercizi 05/03/2024 es1

Botteghe on-line

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 id="generateBtn" class="btn btn-lg btn-success">Generate 100 Head or Tails</button>
			</div>
		</section>

    
		<div class="row">
			<div class="col">
				<h1>Heads</h1>
				<span id="headsTag">0</span>
			</div>
			<div class="col">
				<h1>Tails</h1>
				<span id="tailsTag">0</span>
			</div>
		</div>


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

</body>

</html>



<!DOCTYPE html>
<html>

div.col {
	text-align: center;
}

@keyframes popUp {
  0% {
    transform: rotateX(0deg) scale(0.5);
  }

  100% {
    transform: rotateX(360deg) scale(1);
  }
}

@keyframes Spin {
  0% {
    transform: rotateY(0deg);
  }

  100% {
    transform: rotateY(360deg);
  }
}

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

ul {
  list-style: none;
}

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

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



function getHeadsOrTails() {

}



function createRandomizerRequest(loopMax) {
document.querySelector(".heads").innerHTML = "";
document.querySelector(".tails").innerHTML = "";

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

    var r = Math.floor(Math.random() * 2);
    if (r > 0) {
     tally.heads++;
      document.querySelector(".heads").insertAdjacentHTML("beforeend", `<div>${x}:<img src="https://www.usmint.gov/wordpress/wp-content/uploads/2022/10/2023-american-women-quarters-coin-uncirculated-obverse-philadelphia-768x768.jpg" width="100" height="100"></div>`);


    } else {

      tally.tails++;
      document.querySelector(".tails").insertAdjacentHTML("beforeend", `<div>${x}: <img src="https://www.usmint.gov/wordpress/wp-content/uploads/2023/04/1935-george-washington-quarter-reverse-768x768.jpg"
      
      width="100" height="100"></div>`);
  
    }
  }
     document.querySelector('#headsTag').innerText = tally.heads;
     document.querySelector('#tailsTag').innerText = tally.tails;
}


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


// var i = 0;
// i++ means i = i+ 1