Table of Contents

9 Steps to Build a Weather App

Written on by Jessica Agorye

Estimated read time 5 minutes
Website Tips

9 Steps to Build a Weather App

Building a weather app is a great project for beginners learning to code; so long as you’re familiar with setting up your development environment and you understand the basics of web development.

In this article, we’ll go through a step-by-step guide to build a simple weather app focusing on designing the user-interface using HTML, CSS, and JavaScript for interacting with a weather API.

Let’s get started!

Step One

Designing the User Interface

Design the user interface for what you want your weather APP to look like is an essential first step. You start by creating a rough sketch, creating a wireframe or visualising the layout based on your imagination.

For more inspiration and to understand the user-friendly elements and design patterns, you can also explore weather apps built by other developers.

Since the weather App in our sample project would simply display the Current Temperature, Weather Conditions, and Location, let’s keep our design simple.

Step Two

Set up your Integrated Development Environment (IDE)

For this project, you can use the VSCode IDE, or any IDE of your choice to create the weather application.

Step Three

Create the HTML Structure of your Application

The HTML structure would contain all the elements you want to display on the page.

The HTML code contains;

  • <!DOCTYPE html>: This declares the document type as HTML5

  • : This defines the language of the document as English

  • : This contains the metadata and the page title, and a that applies CSS style to the HTML file.

  • : This contains the visible content of the web page

Inside the body, there is:

  • : The div is a wrapper element that contains or holds other elements.

    WeatherNow

    : This displays the heading of the weather application

    : Displays the sub-heading of the weather app.

  • : This input field allows users to search for a city by entering a city name

  • : This is the button to trigger search

  • : An image element to display different weather conditions such as cloudy, windy, sunny

  • The id="icon" will allow JavaScript to update "src" dynamically based on the weather conditions.

  • "src" =" ": This will contain the URL of the icon.

  • alt="Weather Icon": This is alternative text if image doesn't load, and for screen readers.

This is what the page looks like before styling;

Step Four

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.

Step Five

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.

Step Six:

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.

Step Seven

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)

Step Eight

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.

Step Nine

Test Your Application

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

Summary

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.

Frequently Asked Questions

Can free HTML editors support other languages like CSS and JavaScript?

Yes, free HTML editors often support languages like CSS and JavaScript, enabling integrated web development.

Can I use JavaScript frameworks like React or Vue.js in my WordPress plugin?

Yes, you can. Enqueue your scripts properly using wp_enqueue_script(). Ensure compatibility with WordPress core and consider using the REST API for seamless communication.

What role do APIs play in cloud service integration?

APIs facilitate easy integration between cloud services and existing systems by allowing different software applications to communicate, enabling automation, customization, and enhanced functionality.

What are HTML entities and how are they used?

HTML entities are special character codes used to represent characters that have special meanings in HTML. For example, the &lt; entity represents the less-than symbol (<), and & represents the ampersand (&). Entities are useful when you need to display reserved characters, symbols, or characters with special encoding. For example: html

<p>&lt; represents less than</p>
 <p>&amp; represents ampersand</p>

View more posts by Jessica Agorye