99 Bottles of Beer by @jowinb - Codewith.it

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

Referenze

<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<ol>Crea liste ordinate o numerate.
<embed>Tag per l'incorporamento di contenuti multimediali
<div>Crea contenitori generici o sezioni in una pagina
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
<address> Definisce una sezione contenente indirizzi, contatti e informazioni

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

landing il colibri\\

Pagina di Esempio

Web Design Final 2024

match html tags

Page not found - Codewith.it

Deutsch Plus [Box]

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