This device is not compatible.

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.

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.

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

1

Introduction

Task 0: Getting Started

Task 1: Remove Default Files and Create New Files

Task 2: Get API Key

2

Components

Task 3: Header Component

Task 4: InputCity Component

Task 5: Use InputCity Component

3

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

Congratulations!