Coin Flip Game by @rafid4545 - Codewith.it

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

Referenze

langSpecifica la lingua del contenuto di un elemento
<meta>Definisce i meta dati di una pagina web.
methodDetermina il metodo di invio dei dati di un form al server
<input>Definisce un area di input per l'invio di dati e informazioni
placeholderDefinisce un testo segnaposto per un elemento input o textarea
<html>Tag primario di un documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Heads Or Tails Tally

le mie materie preferite

alt from filename 2

Heads Or Tails Tally. pre ai

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 Flip Game</title>
</head>
<body>
    <h1>Gamble Coin Flip</h1>
    
    <button id="flipBtn">Flip The Coin</button>
    
    <div>
        <h2>Tally</h2>
        <p>Heads: <span id="headsCount">0</span></p>
        <p>Tails: <span id="tailsCount">0</span></p>
    </div>
    
    <div>
        <h2>Results</h2>
        <ul id="headsList">
            <h3>Heads</h3>
        </ul>
        <ul id="tailsList">
            <h3>Tails</h3>
        </ul>
    </div>

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

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

button {
  background-color: #32CD32; 
  color: #FFD700; 
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin-bottom: 20px;
}

button:hover {
  background-color: #FF4500; 
}

div {
  margin-bottom: 30px;
  background-color: #FFA07A;
  padding: 10px;
  border-radius: 10px;
}

h2 {
  color: #8A2BE2; 
}

p {
  font-size: 18px;
  color: #7FFF00; 
}


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

ul li {
  margin: 5px 0;
  padding: 10px;
  border-radius: 3px;
  color: white;
}


#headsList {
  background-color: #FF6347; 
}

#tailsList {
  background-color: #4682B4; 
}


h3 {
  margin-bottom: 10px;
  color: #DA70D6; 
}

let tally = {
  heads: 0,
  tails: 0, };


function flipCoin() {
  return Math.random() < 0.5 ? "heads" : "tails";
}
function updateDisplay() {
  document.getElementById("headsCount").innerText = tally.heads;
  document.getElementById("tailsCount").innerText = tally.tails;
}
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);
  }
}
document.getElementById("flipBtn").addEventListener("click", function () {
  const result = flipCoin();

  tally[result]++;
  updateDisplay();
  addToList(result);
});