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

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

Referenze

nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
<li>Inserisce voci all'interno di una lista
hreflangConsente di dichiarare la lingua del documento collegato.
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
Inserisce un commento nel codice

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

GEMELLAGGIO IN DEUTSCHLAND

Eleganza Gioielli

My Anime Blog - Ninjas and Dragons(2)

JS Elementi del linguaggio es3

Esercizi 05/03/2024 es1

Heads Or Tails Random Tally

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

		<div class="row">
			<div class="col">
				<h1>Heads</h1>
				<span class="heads">0</span>
			</div>
			<div class="col">
				<h1>Tails</h1>
				<span class="tails">0</span>
			</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;
	background-color: rgb(0, 136, 227) 
	;
}

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

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

.heads {
	color: rgb(255, 160, 6);
}
.tails {
	color: rgb(240, 162, 5)
}
h1{
color: rgb(249, 249, 249);rgb(255, 255, 255)
}

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

        // GENERATES CPU RANDOM CHOICE
        function getHeadsOrTails() {
            return Math.floor(Math.random() * 2);
        }

        // DISPLAY DATA IN HTML
        function createRandomizerRequest(loopMax) {
            // Clear previous counts
            tally.heads = 0;
            tally.tails = 0;
            document.querySelector(".heads").textContent = '0';
            document.querySelector(".tails").textContent = '0';

            // Clear previous choices displayed
            document.querySelector(".heads.list-group-flush").innerHTML = '';
            document.querySelector(".tails.list-group-flush").innerHTML = '';

            for (var x = 0; x < loopMax; x++) {
                var r = getHeadsOrTails();
                if (r > 0) {
                    tally.heads++;
                    const headsItem = document.createElement("li");
                    headsItem.textContent = `${x + 1} heads`;
                    headsItem.classList.add("list-group-item");
                    document.querySelector(".heads.list-group-flush").appendChild(headsItem);
                } else {
                    tally.tails++;
                    const tailsItem = document.createElement("li");
                    tailsItem.textContent = `${x + 1} tails`;
                    tailsItem.classList.add("list-group-item");
                    document.querySelector(".tails.list-group-flush").appendChild(tailsItem);
                }
            }

            // Update displayed counts
            document.querySelector(".heads").textContent = tally.heads;
            document.querySelector(".tails").textContent = tally.tails;
        }

        document.getElementById("clickbutton").addEventListener("click", function () {
            createRandomizerRequest(100);
        });

        // RUNS FUNCTION ON DOCUMENT LOAD
        // You can add any initialization code here if needed.