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

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

Referenze

<h6>Titolo di intestazione di sesto livello
<tfoot>Definisce il footer o sezione inferiore di una tabella.
<title>Definisce il titolo della pagina web.
langSpecifica la lingua del contenuto di un elemento
dirnameInvia informazioni sulla direzione di scrittura da un elemento input
<source>Il tag HTML <source> si usa per indicare una o più risorse multimediali per elementi media

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

02/02/24 Jajo talpa no gusta pelo

Ricettario rumeno

Ethical hacking

icons - social bar

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, initial-scale=1.0">
    <title>Coin Flipper</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Coin Flipper</h1>
    
    <button id="flipBtn">Flip 100 </button>
    
    <div class="tally">
        <h2>Tally</h2>
        <p>Heads: <span id="headsCount">0</span></p>
        <p>Tails: <span id="tailsCount">0</span></p>
    </div>
    
    <div class="results">
        <div class="list-container">
            <ul id="headsList">
                <h3>Heads</h3>
            </ul>
        </div>
        <div class="list-container">
            <ul id="tailsList">
                <h3>Tails</h3>
            </ul>
        </div>
    </div>

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

body {
    font-family: Arial, sans-serif;
    background-color: beige;
    color: #333;
    text-align: center;
    padding: 20px;
}

h1 {
    color: orange;
}

button {
    background-color: orange;
    color: black;
    padding: 15px 32px;
    font-size: 16px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 20px;
}

button:hover {
    background-color: orange;
}

.tally {
    width: 200px;
    margin-top: 20px;
    padding: 10px;
    border: 2px solid orange;
    border-radius: 5px;
    display: inline-block;
    background-color: orange;
    display: flex;
    align-items: center;

}

.tally p {
    font-size: 18px;
    margin: 5px 0;
}

.results {
    margin-top: 30px;
    display: flex;
    justify-content: center;
    gap: 50px;
}

ul {
    list-style-type: none;
    padding: 0;
}

ul h3 {
    background-color: orange;
    color: black;
    padding: 10px;
    margin: 0;
    border-radius: 5px 5px 0 0;
}

ul li {
    background-color: lightsalmon;
    border-bottom: 1px solid #ddd;
    padding: 8px;
    font-size: 16px;
}

ul li:nth-child(even) {
    background-color: rgb(202, 166, 112);
}

.list-container {
    width: 200px;
}

// Tally object to track heads and tails count
let tally = {
  heads: 0,
  tails: 0,
};

// Function to flip the coin
function flipCoin() {
  return Math.random() < 0.5 ? "heads" : "tails";
}

// Function to update the display
function updateDisplay() {
  document.getElementById("headsCount").innerText = tally.heads;
  document.getElementById("tailsCount").innerText = tally.tails;
}

// Function to add flip result to the corresponding list
function addToList(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result.charAt(0).toUpperCase() + result.slice(1);

  if (result === "heads") {
    document.getElementById("headsList").appendChild(listItem);
  } else {
    document.getElementById("tailsList").appendChild(listItem);
  }
}

// Function to clear the list before new results are displayed
function clearResults() {
  document.getElementById("headsList").innerHTML = "<h3>Heads</h3>";
  document.getElementById("tailsList").innerHTML = "<h3>Tails</h3>";
}

// Event listener for the flip button
document.getElementById("flipBtn").addEventListener("click", function () {
  // Reset the tally and clear previous results
  tally.heads = 0;
  tally.tails = 0;
  clearResults();

  // Flip the coin 100 times
  for (let i = 0; i < 100; i++) {
    const result = flipCoin();

    // Update the tally
    tally[result]++;

    // Add the result to the appropriate list
    addToList(result);
  }

  // Update the display with the new tally
  updateDisplay();
});