WDD 230 - Web Frontend Development I

10: Chamber Project - Home Page Enhancements

Overview

The project milestone adds dynamic content to the chamber project home page and prepares for the final submission of the chamber project site.

Instructions

  1. On the home page, provide actual weather data for the chamber location using the OpenWeatherMap API.
    At the minimum, include:
    • the current temperature,
    • the current weather description, and
    • a three (3) day temperature forecast.

      The forecast data is provided for free accounts through the 5 Day / 3 Hour Forecast API or the OneCall 2.5 API. Remember to use the console or something like Thunder Client to test and view the API data to find what you need.

      You do NOT need to obtain another openweathermap API key. Your free account provides access to both the Current Weather API and 3-hour Forecast 5 days API.

  2. Add a banner on the home page that invites visitors and users to attend the chamber of commerce meet and greet on Wednesday at 7:00 p.m.
    • This banner should only appear on Mondays, Tuesdays, and Wednesdays.
    • Enable the user the ability to close the banner. ❌

Review

  1. Make sure all the links are working on all the pages of the chamber project site.
  2. Make sure all the images are working and that they are optimized.
  3. Continue to improve each page by adhering to development standards.
  4. Use the feedback that you have received to make updates.
  5. You are responsible for all the requirements for content and layout for each of the pages of the chamber project.
    ❗ The final version of this chamber website project will be due at the end of the next lesson. You have the opportunity now and next week to make changes and improvements to your project before the final submission. After that you will not be able to resubmit so spend the time now to start reviewing and improving your chamber project.

Testing and Submission

  1. Run the DevTools Lighthouse report on this page.
  2. Commit and push your updates and additions to your wdd230 GitHub Pages enabled repository.
  3. 🧪 Use this page audit tool to review the chamber home page.
  4. Return to I-Learn to submit your URL.