This device is not compatible.
You will learn to:
Retrieve the current weather data of any location.
Display the extracted values from API to the Angular application.
Retrieve the 5-day/3-hour weather forecast for any location.
Use RxJS and Material UI to facilitate the Angular application.
Skills
Web Development
Front-end Development
API Integration
Prerequisites
Good understanding of Angular and RxJS
Familiarity with OpenWeather API
Good understanding of Material UI
Technologies
RxJS
Angular
Material UI
Project Description
OpenWeather API provides all kinds of weather information for any global city. In this project, we’ll use this API to extract the current weather and 3-hour weather forecast for the next 5 days for any given location.
We'll use Angular to handle API-related operations. Angular's RxJS library will handle HTTP GET requests to retrieve weather updates from the API. We'll also use Material UI components to assist the frontend development. This web application will comprise dynamic background functionality for different kinds of weather (sunny, mostly cloudy, clear sky, etc.).
Here is the final layout of the application:
Project Tasks
1
Get Started
Task 0: Introduction and Initial Setup
Task 1: Take Input from the User
2
Handle Latest Weather Updates Based on the User Input
Task 2: Create an Interface Object to Store the Current Weather
Task 3: Select the API URL Based on User Input
Task 4: Extract and Map Current Weather from API
Task 5: Display the Current Data on the UI
Task 6: Set Dynamic Backgrounds
3
Handle Weather Forecasts
Task 7: Extract Five-Day Forecasts Data from the API
Task 8: Extract Daily Timelines and Corresponding Weather
Task 9: Develop UI to Display Weather Forecasts
Congratulations!
Relevant Courses
Use the following content to review prerequisites or explore specific concepts in detail.