Heads and Tails by @romniya - Codewith.it

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

Referenze

_parentApre collegamenti ipertestuali nell'elemento genitore
<pre>Indica una parte di testo preformattato
<table>Tag primario per la creazione di tabelle
langSpecifica la lingua del contenuto di un elemento
<tr>Definisce le righe di una tabella (rows)
hreflangConsente di dichiarare la lingua del documento collegato.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il museo di Leonardo

informatica 21/10 ii

rectangle drawning

esercitazione4.html

Notizie dai Monti(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, initial-scale=1.0">
    <title>Heads or Tails</title>
</head>
<body>
    <button id="flipButton">Flip Coin</button>
    
    <h2>Results</h2>
    <div>
        <span>Heads: <span id="headsCount">0</span></span>
        <span> Tails: <span id="tailsCount">0</span></span>
    </div>

    <h3>Heads:</h3>
    <ul id="headsList"></ul>
    
    <h3>Tails:</h3>
    <ul id="tailsList"></ul>

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

const images = [
    'https://www.littletoncoin.com/shop/api/assets/LCCCatalogAssetStore/images/catalog/products/300x300/7630.60_A.png', // Heads image
    'https://www.littletoncoin.com/shop/api/assets/LCCCatalogAssetStore/images/catalog/products/300x300/3969.60_B.png'  // Tails image
];
// images come out with a random dot and im not sure why
// ps: i'm going to fix this so it can look like an array rather than this - and a bit neater

var tally = {
    heads: 0,
    tails: 0
};
// tallies the points, starts at 0

const headsCountDisplay = document.getElementById('headsCount');
const tailsCountDisplay = document.getElementById('tailsCount');
const headsList = document.getElementById('headsList');
const tailsList = document.getElementById('tailsList');
// used ai for this, but it displays the heads and tails and lists the tails/head



// Generates a random choice of Heads or Tails
function getHeadsOrTails() {
    return Math.floor(Math.random() * 2) === 0 ? 'Heads' : 'Tails'; 
}

// used ai for this, but it creates a loop and randomizes the "heads" and "tails". it also tallies the heads and tails mentioned in the variable tally
function createRandomizerRequest(loopMax) {
    for (let i = 0; i < loopMax; i++) {
        const result = getHeadsOrTails();

        if (result === 'Heads') {
            tally.heads++;
            headsCountDisplay.textContent = tally.heads;
            addImageToList(headsList, 0);
        } else {
            tally.tails++;
            tailsCountDisplay.textContent = tally.tails;
            addImageToList(tailsList, 1);
        }
    }
}

// used ai, amd it create two elements which tag the image 
function addImageToList(list, index) {
    const li = document.createElement('li');
    const img = document.createElement('img');
    img.src = images[index];
    img.alt = index === 0 ? 'Heads' : 'Tails';
    li.appendChild(img);
    list.appendChild(li);
}

// Run function on document load
document.getElementById('flipButton').addEventListener('click', () => createRandomizerRequest(100));