CodingNic

Project Setup & Starter UI

Module 1 Checkpoint

Project Setup & Starter UI 10 min read

Module 1 Checkpoint

Module 1 Checkpoint

Task

Perform a final setup check before introducing live data.

Open

Review the three project files and start the app again from the local server.

Quick explanation: what this checkpoint proves

A checkpoint is a short verification that the project is in the expected state before you add another feature. Here, you are not checking whether the weather API works yet. You are checking that the starting project is healthy.

At this point:

  • index.html provides the elements JavaScript will control.
  • style.css provides the finished visual design.
  • script.js provides the starting variables, state object, and helper functions.

The UI may look complete even though the application is not fully functional. That is intentional: the course adds the behavior step by step.

Implementation

The interface should still be the prepared static UI. That is the expected starting state.

Test

Check the browser console for errors. Then click the unit button once and verify that it is present and responds visually if the prepared interface provides a hover/active state, even though its full JavaScript behavior is not implemented yet.

Also confirm that the page loads without a missing background or broken Font Awesome icons.

Expected result

The learner has a clean, known-good starting point for the API work. You should understand the basic relationship between the HTML elements, JavaScript variables/helpers, and prepared CSS before moving into live weather data.

Checkpoint

Before moving on, confirm that:

  • the app opens correctly;
  • the prepared WeatherNow UI is visible;
  • the main HTML IDs are present;
  • the starter JavaScript loads without blocking errors; and
  • the background and icons load correctly.

Once those checks pass, Module 1 is complete and you are ready to connect the OpenWeather API in Module 2.