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

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

Referenze

autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
autofocusAttiva un elemento al caricamento della pagina.
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
<iframe>Crea un frame all'interno di una pagina HTML.
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Home Page di Cristian Moraru\\

Estrazione Casuale Studenti

lezione 31.10 1

menu a comparsa Jquery

Form per il torneo misto disfo

04_Operators and Expressions

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!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() < 100 ? `.heads` : `.tails`;
}

// CREATES ALL RANDOMIZED CHOICES
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) {
      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/2023/04/1935-george-washington-quarter-reverse-768x768.jpg" width="100" height="100"></div>`);
    }
  }

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


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