Weather App using React.js

What is an API

Setting up React.js App

Creating UI for Weather App

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;

--

--

--

Computer Science student with MERN stack website development expertise.

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

New Updates for Subscan V0.1.8–1

Bootstrap Form Validation in Angular

HTML Confirm Box and Redirect

Refactoring a real-case

Expo CLI/Tool vs React Native CLI

Lagging object renaming

Build a Tic Tac Toe Game With React/Redux, Babel, Webpack and Material-UI (Part 4 of 5)

React Fundamentals in 5 minutes…

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

Computer Science student with MERN stack website development expertise.

More from Medium

Build Powerful Tables in React with React Table

Get ready with Application Frameworks

React App with Final Space API — Tinder Style

Top 8 React Bootstrap Themes for Enthusiasts and Pros