تحدّ كبير: أحيِ موقعك كله

الموقع يحيّي بطريقة مختلفة صباحاً ومساءً:

<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() يرجع التاريخ والوقت الحالي، .getHours() يسحب الساعة.

نكتة، فكرة رحلة، أو هتاف فريق مختلف في كل مرة:

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() يرجع رقماً عشوائياً بين 0 و1، وباقي السطر يحوّله لموضع عشوائي في array.

كم مرة فتحت موقعك؟ احفظه في localStorage:

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

Number(...) يحوّل نصاً من الذاكرة لرقم، و?? 0 يعني “إن لم يكن شيء، ابدأ من صفر.”

أخفِ قائمة طويلة أو roster تحت عنوان قابل للنقر:

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

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

لديك class .hidden { display: none !important; } من درس المعرض.