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

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

References

autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<q>Indica una parte di testo come citazione breve
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
formnovalidateImpedisce la convalida di un singolo elemento input
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<a>Inserisce link e collegamenti ipertestuali

Users

Log in to search for users

Explore

Find inspiration

associazioni e. movimenti

Idee background personaggio

"esercitazione 6.html"

Esempio positon

VerdeTech - Orto Botanico | Piante

prototipo di form tag

pag. 5 progetto inf

Esercizi 05/03/2024 es9

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