99 Bottles of Beer by @jowinb - Codewith.it

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

References

<thead>Definisce un gruppo di intestazione all'interno di una tabella.
formnovalidateImpedisce la convalida di un singolo elemento input
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
Inserisce un commento nel codice
<ol>Crea liste ordinate o numerate.
<head>Tag primario di un documento HTML

Users

Log in to search for users

Explore

Find inspiration

Lola Harrel Project 2

Indovina il Numero - Gioco

esercitazione n. 1

Pro Vercelli LB(2)

Il mio primo file HTML

ArteFORMA — Architectural Digita

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