Week 3

Project

Make A Website Interactive

Interactive Website Project: "Habesh Foods"

Project Goal

Habesh Foods wants to make their website more interactive! Now that you’ve learned JavaScript, they’ve asked you to improve their website by adding dynamic features to engage visitors.

Required Features (JavaScript Enhancements)

Step 1 - Interactive Welcome Message

• Instead of just displaying "Welcome to Habesh Foods" in an <h1>, write JavaScript to change the greeting based on the time of day (Morning, Afternoon, or Evening).

• Example:

  • Morning: "Good Morning! Welcome to Habesh Foods!"

  • Afternoon: "Good Afternoon! Hungry? Let’s explore our menu!"

  • Evening: "Good Evening! Enjoy the best Ethiopian cuisine!"

• Use Date() in JavaScript to determine the time and update the <h1> dynamically.

Step 2 - Click to Reveal More About Ethiopian Food

• Add a "Learn More" button under the "About Ethiopian Traditional Foods" section.

• When clicked, it should reveal a hidden paragraph with extra details about Ethiopian cuisine.

Example:

document.getElementById("learnMoreBtn").addEventListener("click", function() {

  document.getElementById("hiddenInfo").style.display = "block";

});

• The hidden paragraph should be set to display: none initially and become visible on click.

Step 3 - Dynamic Menu Search

• Add an input box where users can type the name of a dish.

• Use JavaScript to highlight the matching dish in the menu.

• Example:

  • If a user types "Doro", the Doro Wat menu item should be highlighted.

• Use .toLowerCase() to make the search case-insensitive.

Step 4 - Random Food Suggestion Button

• Add a button labeled "What should I eat?"

• When clicked, JavaScript should randomly pick a food item from the menu and display a suggestion.

Example:

const foods = ["Doro Wat", "Shiro", "Tibs", "Beyayenet", "Key Wet", "Gomen"];

function suggestFood() {

  let randomFood = foods[Math.floor(Math.random() * foods.length)];

  document.getElementById("suggestion").innerText = "Try: " + randomFood;

}

• Show the suggested food item in a <p> under the button.

Step 5 - Interactive Cooking Demo

• The "Watch Doro Wat Recipe" button should not just open the YouTube link.

• Instead, add a pop-up modal (a floating box) that shows the video without leaving the page.

• Use JavaScript to open and close the video modal.

Step 6 - Slideshow for the Food Gallery

• Instead of static images, create an image slider that automatically changes every 3 seconds.

• Use setInterval() to cycle through images.

Bonus Challenges (For Extra Practice)

• Add a light/dark mode toggle using JavaScript.

• Use localStorage to remember the user’s preferred theme.

• Allow users to add their own favorite Ethiopian dishes to a custom list.