99 Bottles of Beer by @jowinb - Codewith.it

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

References

actionDetermina la pagina di destinazione a cui verranno inviati i dati di un form HTML
<h4>Titolo di intestazione di quarto livello
selectedPre-seleziona un elemento di input
<br>Inserisce uno spazio vuoto tra due elementi HTML.
_topApre collegamenti ipertestuali nell'elemento parent assoluto
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.

Users

Log in to search for users

Explore

Find inspiration

esercizio esame 2

TravelEscape - Esplora il Mondo co

Ricetta Cous Cous

Con nome bandiera(2)

Italiano-Cinema [Bacheca]

Unity WebGL Player | Hollow Knight

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