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

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

Referenze

<hr>Inserisce una linea orizzontale
requiredRende obbligatorio un campo di input
<caption>Definisce didascalie all'interno di una tabella
loopL'attributo loop è usato per la riproduzione continua dei contenuti video e audio
<nav>Definisce un menu di navigazione
methodDetermina il metodo di invio dei dati di un form al server

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

UX / Web Design Green – Progetto

test1 pagina principale

Turni settimanali tabella

Campagna in primavera

console elements(2)

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 lang="en">

<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>
    <link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <main class="container">
        <section class="row">
            <div class="col">
                <button class="btn btn-lg btn-success" id="generateButton">Generate 100 Heads or Tails</button>
            </div>
        </section>

        <div class="row">
            <div class="col">
                <h1>Heads Count: <span id="headsCount">0</span></h1>
            </div>
            <div class="col">
                <h1>Tails Count: <span id="tailsCount">0</span></h1>
            </div>
        </div>

        <div class="row">
            <div class="col">
                <h2>Heads</h2>
                <ul class="heads list-group list-group-flush"></ul>
            </div>
            <div class="col">
                <h2>Tails</h2>
                <ul class="tails list-group list-group-flush"></ul>
            </div>
        </div>
    </main>

    <script src="script.js"></script>
</body>

</html>

div.col {
	text-align: center;
}

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

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

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

// GENERATES CPU RANDOM CHOICE
function getHeadsOrTails() {
    return Math.random() < 0.5 ? 'Heads' : 'Tails';
}

// CREATES ALL RANDOMIZED CHOICES
// DISPLAY DATA IN HTML
function createRandomizerRequest(loopMax) {
    // Clear previous results from the lists
    document.querySelector('.heads').innerHTML = '';
    document.querySelector('.tails').innerHTML = '';

    for (let i = 0; i < loopMax; i++) {
        const result = getHeadsOrTails();

        // Update tally based on result
        if (result === 'Heads') {
            tally.heads++;
            displaySingleResult('heads', i + 1); // Display order number for heads
        } else {
            tally.tails++;
            displaySingleResult('tails', i + 1); // Display order number for tails
        }
    }

    // Update total counts for display
    document.getElementById('headsCount').textContent = tally.heads;
    document.getElementById('tailsCount').textContent = tally.tails;
}

// Function to display a single result
function displaySingleResult(type, order) {
    const list = document.querySelector(`.${type}`);
    list.innerHTML += `<li class="list-group-item">${order}</li>`;
}

// Attach event listener to button
document.getElementById('generateButton').addEventListener('click', function() {
    // Generate results only when the button is clicked
    createRandomizerRequest(100);
});

// HIDE counts on initial load
document.getElementById('headsCount').textContent = '0';
document.getElementById('tailsCount').textContent = '0';