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

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

References

methodDetermina il metodo di invio dei dati di un form al server
<input>Definisce un area di input per l'invio di dati e informazioni
<li>Inserisce voci all'interno di una lista
formSpecifica a quale form appartiene un elemento.
listCollega un elemento input con una lista di opzioni datalist
<blockquote>Inserisce citazioni in un documento HTML

Users

Log in to search for users

Explore

Find inspiration

Esercitazione n. 1

Mundane Monday\\

Prova bandiere 14/04/2023

Lezione 2 Informatica

“esercitazione7.html”

Review of Functions I

Riconoscitore tasti

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