This device is not compatible.

Get Live Weather Information Using React

PROJECT

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.

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.

Skills

Web Development

API Integration

Prerequisites

Basic understanding of React

Basic understanding of Javascript

Technologies

React

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

Introduction

Task 0: Initial Setup

Task 1: Get API Key

Components

Task 2: Header Component

Task 3: InputCity Component

Task 4: Use InputCity Component

Using Components

Task 5: ShowWeather Layout Component

Task 6: Use the API to Fetch Data

Task 7: Use Weather Data

Task 8: Add Dynamic Background

Task 9: Add Error Handler

Task 10: Add Styling

Congratulations!

Hear what others have to say

Join 1.4 million developers working at companies like

"Another great hands on project to apply your knowledge learned. Thank you Educative ❤️"

Atabek BEKENOV

Senior Software Engineer

"Super excited to learn E-commerce website for my own startup venture. Thanks for your great learning platform."

Pradip Pariyar

Senior Software Engineer

"This was an excellent lesson. I learned a lot working through the process. I enjoyed it so much that I rebuilt it my AWS account to see how hard it would be to deploy to a production environment."

Renzo Scriber

Senior Software Engineer

"It was my first proper data engineering project and it was amazing."

Vasiliki Nikolaidi

Senior Software Engineer

"It's a fantastic way to do hands-on practice; I enjoy this way of learning."

Juan Carlos Valerio Arrieta

Senior Software Engineer

Relevant Courses

Use the following content to review prerequisites or explore specific concepts in detail.