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

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

References

relServe a definire la relazione tra il documento e una risorsa.
<iframe>Crea un frame all'interno di una pagina HTML.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
_selfApre collegamenti ipertestuali nella stessa pagina del browser
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
<i>Formatta il testo in corsivo/italico non enfatizzato

Users

Log in to search for users

Explore

Find inspiration

Scuola G.Galilei.html

Pagina Di Prova 1.11.23

Twitchpage1confirm

form 6 da finire

pagina di prova

Attività della settimana

Indovina il Numero - Gioco

un casino pazzesco

Review of Functions I

Countdown Fine Scuola

test-border-on-wrap

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, 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();
});