DEMO: For Loop 2 by @SoranyiL - Codewith.it

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

References

mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.
<h3>Titolo di intestazione di terzo livello
getDefinisce un metodo di invio di dati al server
<h6>Titolo di intestazione di sesto livello
<title>Definisce il titolo della pagina web.
forSpecifica a quale id è associato l'elemento in cui è dichiarato.

Users

Log in to search for users

Explore

Find inspiration

Futura Design - Agenzia di Design

Heads Or Tails Random Tally

DEMO: Hi-Lo Game

Esercitazione 1

Business Website

Aurion Agency | Digital Alchemy

Futura Design - Agenzia di Design

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>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Eagle+Lake&display=swap" rel="stylesheet">
  <link href="style.css" rel="stylesheet" type="text/css" />
  <title>DEMO: For Loop 2</title>
</head>

<body>

  <main>
    <center>
      <h1>99 ?s of ?</h1>
    </center>
    <section>
      <!-- USE JAVASCRIPT TO DISPLAY THE SONG LYRICS -->
    </section>
  </main>
  <script src="script.js"></script>
</body>

</html>

html {
	height: 100%;
	width: 100%;
}

main {
	font-size: 17px;
}

function display() {
  const userEmotion = prompt("How are you feeling?").toLowerCase();
  const runningAction = prompt("What action are you taking?").toLowerCase();
  const money = prompt("What do you have for money?").toLowerCase();

  const section = document.querySelector("section");

  for (let i = 99; i >= 2; i--) {
    const bottleImage = `<img src="bottle.png" alt="bottle" width="25">`;  
    const milkImage = `<img src="milk.png" alt="milk" width="25">`;  

    let color;
    if (i > 24) {
      color = "green";
    } else if (i > 10) {
      color = "orange";
    } else {
      color = "red";
    }

    const songLine = `
      <p style="color: ${color};">
        ${userEmotion} ${i} bottle${i > 1 ? 's' : ''} of milk on the wall, ${i} bottle${i > 1 ? 's' : ''} of milk. 
        Take one down and pass it around, ${i - 1} bottle${i - 1 > 1 ? 's' : ''} of milk on the wall.
      </p>
    `;
    section.innerHTML += songLine; 

  }

  const finalMessage = `
    <p style="color: red;">
      ‼️ There's no more bottle${1 > 1 ? 's' : ''} of milk on the wall, there's no bottle${1 > 1 ? 's' : ''} of milk. 
      ${userEmotion} Help me now, ${runningAction} to the bodega to ${money} 99 bottle${99 > 1 ? 's' : ''} of milk.
    </p>
  `;
  section.innerHTML += finalMessage;
}

display();