This device is not compatible.


Get Live Weather Information Using React

In this project, we’ll learn to create and manage OpenWeather API. We’ll use this API to get weather information and use that information in our React application. Moreover, we’ll add dynamic background colors according to the temperature.

Get Live Weather Information Using React

You will learn to:

Create a React application.

Integrate API with React application.

Display values from API to the React application.

Add dynamic background colors on the web page.


Web Development

API Integration


Basic understanding of React

Basic understanding of Javascript




Project Description

In this project, we’ll learn to create a React application and integrate an API in that React application. We’ll use various props in the React application to communicate with weather API to get the following values for a particular city:

  • Wind pressure
  • Temperature in Celsius
  • Visibility
  • Humidity
  • Cloud cover

We’ll use OpenWeather API to get weather information about a city.

In the end, we’ll add dynamic background to the application, which will change according to the temperature in the city.

Project Tasks



Task 0: Getting Started

Task 1: Remove Default Files and Create New Files

Task 2: Get API Key



Task 3: Header Component

Task 4: InputCity Component

Task 5: Use InputCity Component


Using Components

Task 6: Import and Use Hooks

Task 7: Use the API to Fetch Data

Task 8: ShowWeather Layout Component

Task 9: Use Weather Data

Task 10: Add Dynamic Background

Task 11: Add Error Handler

Task 12: Add Styling