Weather App using React.js

In this article we will be explaining how we can make a website to display weather of specific city. We will be using an API for this process.

What is an API

An application programming interface is a connection between computers or between computer programs. It is a type of software interface, offering a service to other pieces of software.

Setting up React.js App

Firstly create react app using the following command in the terminal:

npx create-react-app frontend

Now open the frontend folder in vscode, navigate to terminal on current path and execute the following command:

npm start

Now once your react website is setup then we will move to next step i.e. creating the single page UI.

Creating UI for Weather App

Now we will create a UI of weatherApp using react components.

Here we are changing the favicon and title in head tag in our index.html (line 5 and line 15)

Next we will clear the App.js in our src folder

Now we will be adding a simple UI using Bootstrap v5.1 CDN in our index.html

Bootstrap v5.1 CSS CDN: link

Bootstrap v5.1 JS CDN: <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>

Now we will be adding a navigation bar components by creating a new folder in src named as components and placing the Navigation.jsx component in it.

Now once the component is created, lets import it in App.js.

Now you will be able to see Navigation on your browser.

Lets add bootstrap navbar in Navigation components add some styling to it.

Now we have created the navigation bar using bootstrap and some customization.

Now lets create a new component called section where we will be requesting data from API.

Here we have created a simple search bar. Now we will be adding a function called search on press of search icon.

Next we will install axios from our terminal to request data from Weather API.

Enter the below command in your terminal:

npm install axios

Now I am requesting data with my WeatherAPI.

http://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API Key}

Above is the format with the API key to request data from Open Weather.

Open Weather link

Just simply signup from the given link and request an API key. Once you are done with it change {API Key} with the api key provided and {City name} with your city name in our code.

Now once you click the search button you will see the following data in your console. Here I am requesting data of New York city.

Now we are getting data from our API but still the city name is hardcoded. Lets make it dynamic and when the user enters a city name it will only get that city data.

import React, { useState } from “react”;
import axios from “axios”;
function Section(){
var [city, setCity] = useState(“”);
var [warning, setWarning] = useState(“”);
var apiKey = “api key”
function search(){
if(city===””){
setWarning(“Please select a city.”);
}
else{
var url = “http://api.openweathermap.org/data/2.5/weather?q="+city+"&appid="+apiKey;
axios.get(url)
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
if(error.response.status){
setWarning(“Please enter a valid city name”);
}
})
.then(function () {
// always executed
});
}
}
return(
<div className=”section”>
<div className=”container”>
<div className=”search”>
<center>
<div className=”searchbar”>
<input type=”text” onChange={(e)=>{setCity(e.target.value); setWarning(“”)}} placeholder=”City name” name=”” id=”” />
<button onClick={search}><i class=”fas fa-search”></i></button>
</div>
<br /><sub style={{color: “red”}}>{warning}</sub>
</center>
</div>
</div>
</div>
);
}

Now we have made the city name dynamic i.e. user can now search a city.

We are currently getting the city data on our console.

Next we will display that content to the user.

import React, { useState } from "react";
import axios from "axios";
function Section(){
var [city, setCity] = useState("");
var [warning, setWarning] = useState("");
// var apiKey = "api key"
var apiKey = "API KEY"
var ad = {
coord: {
lon: 0,
lat: 0
},
weather: [
{
id: 0,
main: "Haze",
description: "haze",
icon: "50d"
}
],
base: "stations",
main: {
temp: 34.9,
feels_like: 32.27,
temp_min: 34.9,
temp_max: 34.9,
pressure: 1004,
humidity: 11
},
visibility: 5000,
wind: {
speed: 5.66,
deg: 240
},
clouds: {
all: 0
},
dt: 1634299964,
sys: {
type: 1,
id: 7576,
country: "Unkown",
sunrise: 1634261372,
sunset: 1634303103
},
timezone: 18000,
id: 1174872,
name: "Unknown",
cod: 200
}
var [wdata, setWData] = useState(ad);
var d = new Date();
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul","Aug", "Sep", "Oct", "Nov", "Dec"];
var ddate = d.getDate()+"-"+months[d.getMonth()]+"-"+d.getUTCFullYear();
console.log(ddate);
function search(){
if(city===""){
setWarning("Please select a city.");
}
else{
var url = "http://api.openweathermap.org/data/2.5/weather?q="+city+"&appid="+apiKey+"&units=metric";
axios.get(url)
.then(function (response) {
// handle success
console.log(response);
setWData(response.data);
})
.catch(function (error) {
// handle error
console.log(error);
// if(error.response.status){
//     setWarning("Please enter a valid city name");
// }
})
.then(function () {
// always executed
});
}
console.log(wdata)
}
return(
<div className="section">
<div className="container">
<div className="search">
<center>
<div className="searchbar">
<input type="text" onChange={(e)=>{setCity(e.target.value); setWarning("")}} placeholder="City name" name="" id="" />
<button onClick={search}><i class="fas fa-search"></i></button>
</div>
<br /><sub style={{color: "red"}}>{warning}</sub>
</center>
</div>
<div className="cardd">
<div className="header">
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-6 col-s-12 card-header-left">
<h5>{wdata.name}</h5>
</div>
<div className="col-lg-6 col-md-6 col-sm-6 col-s-12 card-header-right">
<h5>{ddate}</h5>
</div>
</div>
</div>
<div className="body">
<div className="bodyup">
<div className="row">
<div className="col-lg-6 col-md-12col-sm-12 col-s-12">
<img src={"http://openweathermap.org/img/wn/"+wdata.weather[0].icon+"@4x.png"} alt="" />
</div>
<div className="col-lg-6 col-md-12 col-sm-12 col-s-12 align-self-center">
<div className="row">
<div className="col-lg-6 col-md-6 col-sm-6">
<h5>{wdata.main.temp}</h5>
{/* <p>{wdata.main.feels_like}°C feels like</p> */}
</div>
<div className="col-lg-4 col-md-4 col-sm-4 col-s-4">
<div className="row align-self-center">
<p><i class="fas fa-sort-up"></i> {wdata.main.temp_max}°C</p>
<span style={{fontSize: "10px", color: "rgba(0,0,0,0)"}}>.</span>
<p><i class="fas fa-sort-down"></i> {wdata.main.temp_min}°C</p>
</div>
</div>
</div>
{/* <div className="row" style={{textAlign: "left"}}>
</div> */}
</div>
</div>
</div>
<div className="bodydown">
<div className="row">
<div className="col-lg-6 col-md-12 col-sm-12 col-s-12 align-self-center" style={{textAlign: "center"}}>
<h1>{wdata.weather[0].main}</h1>
<h5>{wdata.weather[0].description}</h5>
<p>Longitude {wdata.coord.lon}<br />Latitude {wdata.coord.lon}</p>
</div>
<div className="col-lg-6 col-md-12 col-sm-12 col-s-12">
<p><i class="fas fa-thermometer-three-quarters"></i>   {wdata.main.feels_like}°C Feels like</p>
<p><i class="fas fa-tint"></i> Humidity {wdata.main.humidity}%</p>
<p><i class="fas fa-wind"></i> Wind Speed {wdata.wind.speed}%</p>
<p><i class="fas fa-wind"></i> Wind Angle {wdata.wind.deg}°</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
export default Section;

Now users can search for a city and see the current weather of that specific city.

Let me know if you want to see the deployment of React.js web app on GitHub gh-pages.