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

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

References

formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
srcsetL'attributo srcset definisce la risorsa grafica tramite URL all'interno del tag <source> contenuto in <picture>
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
getDefinisce un metodo di invio di dati al server
<h3>Titolo di intestazione di terzo livello
<u> Utilizzato definire una parte del contenuto come annotazione non testuale, con una sottolineatura.

Users

Log in to search for users

Explore

Find inspiration

Esempio di Font Size in VW

Il mio primo file HTML

Pagina Di Prova 1.11.23

Inserimento di immagini

Countdown Passaporto

primo es =01/26/24

Adobe PDF Shared 4

educazione civica info

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="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.