Styling the HTML structure

Body:

Body style rules include;

• background color, which transitions from lemon to light green.

• display: flex, along with justify-content: center, and align-items: center to place the elements at the center of the page

• height:100vh, which ensures the body takes full viewport height

• margin:0 to remove extra spacing

• Arial Font with sans-serif as a fall-back font.

Container, H1, H2:

Container, h1 and h2 style rules include;

• background color set to white

• padding: 20px for spacing inside the container

• border-radius:10px for rounded edges

• text-align: center to center all text inside the container

• Container size is set at a width of 300px

• font size of 24px for h1 and 16px for h2

• margin-bottom: 15px to add space below each spacing

• text color set to dark grey color: #333 for readability

Weather-Temp, Weather-Info, and Icon style rules include;

• #weather-temp p include a font-size 50px, and a margin-top:8px to add space above the temperature text

• #weather-info is set at font-size: 20px

• #icon include display: none; to hide the Icon so that it can be displayed dynamically using JavaScript when the weather data loads successfully. The width and height of the icon are set to 200px with margin:0 auto 10px to center it.

Create Account on OpenWeather Website

Before adding functionality to the application, go to the openWeather website to create an account if you do not have one. This is where you will call the API to display the weather conditions on your application.

After successfully registering, click on your account name, you’ll find a drop-down menu, click on “MY API Keys”

Create an API key - You can name it whatever you like;

After successfully creating a key, you’ll receive an email for verification, and also an update to let you know when your API key would be available for use, including an example of how to use the API Key and the endpoint to use for API calls.

To test if your API key works, copy the URL in the email and paste it into your browser. If you see a JSON response, then it works.

Create getWeatherInfo Functionality

Note: Add the Script Tag to the HTML file if you haven’t done that yet.

In your script File, create a function to get weather information. So, when you click the search button, it will call this function.

Firstly, let's create constants to display the weather information.

• apiKey const variable; this would help you request the OpenWeather API to retrieve weather information

• cityName const variable; this would select the value from the input field where the user enters a city name.

• weatherTemp const variable would select the element where the temperature would be displayed, which would then be updated using innerHTML.

• weatherInfo const variable would select the element where more information about the weather would be displayed, which would then be updated using innerHTML.

• weatherIcon const variable would select the image element where the weather icon would be displayed, which would be updated using the URL of a weather icon provided by OpenWeather.

Get WeatherInfo Function

Create the getWeatherInfo function in your script.js file,

In your index.html file, add an onClick attribute to your button to run getWeatherInfo() so that when you click on the button it tells the browser to run the function.

Create the functionality to fetch weather data (getWeatherInfo)

• cityName.value will retrieve the value you enter into the input field, while .trim() would remove extra spaces.

• if(!city) { alert("Enter a city, please") return; }

checks if the input is empty when you try to search, and alerts you to enter a city name

• const weatherURL is a variable that stores the URL for the weather API request. q=${city} is the city named entered by the user, appid=${apiKey} is your API key - Remember these were saved in a const variable at the top of the script file

• The try and catch block contains console.log (“Fetching from:”, weatherUrl) to check if the URL works, const response = await fetch (weatherUrl); sends an HTTP request to the OpenWeather API

• if(!response.ok) throw new Error(Error! Status: ${response.status}); if response fails, it throws an error and inserts the HTTP status code in the error message to let you know the type of error.

• const data = await response.json() extracts JSON data from the API response

• displayWeatherInfo(data) this is the function that will display the weather details on the web page (we will create this function next)

• catch block handles any errors that occur in the try block.

Display Weather Info

• **if(data.cod === "404"){

weatherInfo.innerHTML = <p>${data.message}</p> }**

This checks if city is not found, and if so, it inserts the message into the weatherInfo.innerHTML. cod means code, and the message comes from the API response sent by OpenWeather when there's an error.

• const {name,main,weather}= data are properties extrated from data. name is city name, main contains the temperature data, and weather contains an array with weather conditions. const temperature = Math.round(main.temp) processes the temperature data; const description = weather[0].description gets the weather description

• const iconUrl gets the weather Icon URL from OpenWeather

• weatherTemp.InnerHTML displays the temperature. weatherInfo.innerHTML displays the city name and weather descriptions such as cloudy, light rain, etc

• updateWeatherIcon function updates and shows the weatherIcon (We will create this function next)

Show and Update Weather Function

updateWeatherFunction takes two parameters, iconURL, the weatherIcon from OpenWeatherAPI, and description, which gives more information about the weather. This function is called when the weather data is fetched successfully

• weatherIcon.src = iconUrl updates the src attribute with the weatherIcon HTML image element, the image will display when the Icon is fetched from the API.

• weatherIcon.alt = description updates the alt attribute for accessibility when the image fails to load

• weatherIcon.style.display = "block" displays the Icon, initially in the CSS we set the icon to display: none.

Test Your Application

After following the steps, your application should work just fine, and your app should look like this;

This simple web App allows you to check the weather by entering the name of any city in the world. It uses OpenWeather API to display the weather temperature, weather Icon, and weather condition.