Weather App using React.js

What is an API

Setting up React.js App

npx create-react-app frontend

npm start

Creating UI for Weather App

npm install axios

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

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