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.
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!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.