99 Bottles of Beer by @jowinb - Codewith.it

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

Referenze

<thead>Definisce un gruppo di intestazione all'interno di una tabella.
animationDefinisce i parametri dell'animazione di un elemento o selettore
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<object>Incorpora risorse varie nella pagina web.
<h3>Titolo di intestazione di terzo livello
_parentApre collegamenti ipertestuali nell'elemento genitore

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Portfolio Web Developer

mappa del malandrino

congettura di golbach a 3

JS Oggetti ed eventi es3

girar-imagem-canvas

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>99 Bottles of Beer</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <h1>99 Bottles of Beer on the Wall ??</h1>
    </header>
    <div class="song-container">
        <div id="song-lyrics"></div>
    </div>
    <button id="start-stop-btn">Start</button>
    <script src="script.js"></script>
</body>
</html>

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

h1 {
    font-size: 2rem;
    color: #333;
    margin-bottom: 20px;
}

.song-container {
    font-size: 1.25rem;
    margin: 20px auto;
    width: 70%;
    max-width: 800px;
    padding: 10px;
}

button {
    padding: 10px 20px;
    font-size: 1rem;
    background-color: #4CAF50;
    color: white;
    border: none;
    cursor: pointer;
    margin-top: 20px;
}

button:hover {
    background-color: #45a049;
}

.green {
    color: green;
}

.yellow {
    color: yellow;
}

.red {
    color: red;
}

.fade-out {
    animation: fadeOut 2s ease-out forwards;
}

@keyframes fadeOut {
    0% {
        opacity: 1;
    }
    100% {
        opacity: 0;
    }
}

// Elements
const songLyrics = document.getElementById('song-lyrics');
const startStopButton = document.getElementById('start-stop-btn');

// Initialize variables
let isPlaying = false;
let songInterval;

// The function to generate the lyrics
function generateLyrics() {
    let lyrics = '';
    for (let i = 99; i >= 0; i--) {
        let colorClass = '';
        let bottleText = 'bottles';
        
        // Conditional logic for color and grammar
        if (i === 1) {
            bottleText = 'bottle';
        }
        
        if (i >= 25) {
            colorClass = 'green';
        } else if (i >= 10) {
            colorClass = 'yellow';
        } else if (i > 0) {
            colorClass = 'red';
        } else {
            lyrics += `<p class="fade-out">‼️ There's no more bottles of beer on the wall, there's no more bottles of beer.<br>Help me now, running to the store to buy 99 bottles of beer.</p>`;
            break;
        }

        // Add each verse to the lyrics
        lyrics += `
            <p class="${colorClass}">${i} ${bottleText} of beer on the wall, ${i} ${bottleText} of beer!<br>
            Take one down, pass it around…<br>${i - 1} ${bottleText} of beer on the wall!</p>
        `;
    }
    songLyrics.innerHTML = lyrics;
}

// Function to toggle start/stop
function toggleSong() {
    if (isPlaying) {
        clearInterval(songInterval);
        startStopButton.textContent = 'Start';
        songLyrics.innerHTML = ''; // Clear lyrics when stopped
    } else {
        startStopButton.textContent = 'Stop';
        generateLyrics(); // Generate the full lyrics at once
    }
    isPlaying = !isPlaying;
}

// Event listener for the button
startStopButton.addEventListener('click', toggleSong);