Grande sfida: dai vita a tutto il sito web

Il sito web saluta diversamente al mattino e alla sera:

<p id="day-greeting"></p>

const dayGreeting = document.getElementById("day-greeting");
const hour = new Date().getHours();

if (hour < 9) {
  dayGreeting.textContent = "Good morning! ☀️";
} else if (hour < 18) {
  dayGreeting.textContent = "Hi there, have a nice day!";
} else {
  dayGreeting.textContent = "Good evening! 🌙";
}

new Date() restituisce data e ora attuali, .getHours() ne estrae l’ora.

Una barzelletta, idea viaggio o coro della squadra diversi ogni volta:

const messages = [
  "Practice makes perfect!",
  "Let's go, Eagles! 🦅",
  "You miss every shot you don't take.",
  "Fans are the twelfth player.",
];

const messageButton = document.getElementById("message-button");
const messageEl = document.getElementById("message");

messageButton.addEventListener("click", () => {
  const random = Math.floor(Math.random() * messages.length);
  messageEl.textContent = messages[random];
});

Math.random() restituisce un numero casuale tra 0 e 1, e il resto della riga lo trasforma in una posizione casuale nell’array.

Quante volte hai aperto il sito web? Salvalo in localStorage:

let visits = Number(localStorage.getItem("visits") ?? 0);
visits++;
localStorage.setItem("visits", visits);
console.log("You've opened this page " + visits + " times now");

Number(...) converte il testo dalla memoria in numero, e ?? 0 significa “se non c’è niente, parti da zero.”

Nascondi un menu lungo o una rosa sotto un titolo cliccabile:

const sectionHeading = document.getElementById("expand-heading");
const sectionContent = document.getElementById("expand-content");

sectionHeading.addEventListener("click", () => {
  sectionContent.classList.toggle("hidden");
});

Hai già la classe .hidden { display: none !important; } dalla lezione galleria.