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

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

References

checkedPre-imposta su 'true' il valore di un elemento input checkbox o radio
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
headersDetermina la relazione tra celle e celle di intestazione di una tabella.
titleIndica informazioni aggiuntive riguardo un elemento HTML

Users

Log in to search for users

Explore

Find inspiration

portofolio_Alessandro_Foletto

Harrel Lola DIV CSS

Scheda Tecnica Google Pixel 8 Pro

One Magic Moment - Eventi Unici

Review of Functions I

GoUp Fitness Opz 2

Roba info triangoli

“esercitazione4.html”

esercitazione6.html

Prep. Esame pt.4

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="headsLabel">0</span>
			</div>
			<div class="col">
				<h1>Tails</h1>
				<span id="tailsLabel">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>

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;
}


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


.coinImg {
  max-width:50%;
  min-width: 50%;
  max-height:50%;
  min-height: 50%;
}

.coinImg:hover {
  animation-name: Spin;
  animation-duration: 1s;
  animation-iteration-count: infinite;
}

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

document.querySelectorAll(".coinImg").forEach(coin => {
    coin.classList.add("spin");
  });
  
// GENERATES CPU RANDOM CHOICE
function getHeadsOrTails() {
  return Math.random() < 0.5 ? `heads` : `tails`;
}

// CREATES ALL RANDOMIZED CHOICES
function createRandomizerRequest(loopMax) {
  for (var x = 0; x < loopMax; x++) {
    var r = Math.floor(Math.random() * 2);
    if (r > 0) {
      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>`);
       tally.heads++; 
    } else {
        tally.tails++; 
      document.querySelector(".tails").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>`);
    }
  }

  document.getElementById('headsLabel').innerText = tally.heads;
  document.getElementById('tailsLabel').innerText = tally.tails;
}


// RUNS FUNCTION ON DOCUMENT LOAD
document.querySelector("button").addEventListener("click", function() {
  createRandomizerRequest(100);
});