Weather App using React.js

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:

Creating UI for Weather App

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

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 successconsole.log(response);}).catch(function (error) {// handle errorconsole.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>);}
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 successconsole.log(response);setWData(response.data);}).catch(function (error) {// handle errorconsole.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;

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Musab Abbasi

Musab Abbasi

88 Followers

Computer Science Graduate with MERN stack website development expertise.