Categories

There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Build a Weather Application with React and React Hooks

Video Introducing this tutorial

Setting up the Project :
Introduction
Creating the React app
Starting the React app
Using Semantic UI Library

Creating the User Interface :
Giving the title for the application
Impoting Google Fonts
Creating the Weather Card
Removing extra content from the Weather Card
Setting up the weather properties
Adding the header for the current date

Setting up the Open Weather API :
Setting up the Open Weather API
Calling the Open Weather API
Getting our Latitude and Longitude

Changing Static Data into Dynamic Data :
Changing the Temprature
Changing the rest of Weather Properties
Get the current date from Moment.js
Changing the Weather Properties into Readable Format
Adding units for Temprature and Humidity

Adding the Weather Icons :
Setting up the Icon Container
Getting the Icon Description
Adding React Font Awesome for Icons
Exploring the Icons
Changing the Size and Colors of the Icons
Setting the Icons based on Icon Description
DIsplaying the Icons in the Application

Creating the Forecast Component :
Creating the Forecast Component
Adding the Forecast Card
Getting the Forecast Data and Mapping the Forecast Card
Creating the Forecast Card Group
Changing Forecast Card Static Data into Dynamic Data

Styling and Making the UI more Readable :
Adding Some more Styling and Adding Labels in Weather Card
Adding Some more Styling and Adding Labels in Forecast Cards
Adding a Beautiful Border in Card Components
Styling the Main Header
Adding the Dates in Forecast Cards
Adding a Loader