How to Create your own Weather App With React.js 2021

React.JS Weather App 2021

For create the a weather you should have some pre-requirements. Like API and Basic Knowledge.

1. Create React App

           open vs code and then open the terminal and then type the code:

                npx Create-react-app appName 

      2. Then go to src folder and open the APP.js and delete the content inside the Div.  

Live project:-https://gaurav19790.github.io/weather-app/

SOURCE CODE:-https://github.com/gaurav19790/weather-app

    APP.js

import React, { useState } from 'react';import React, { useState } from 'react'; import { fetchWeather } from './api/fetchWeather'; import './App.css'; const App = () => { const [query, setQuery] = useState(''); const [weather, setWeather] = useState({}); const search = async (e) => { if(e.key === 'Enter') { const data = await fetchWeather(query); setWeather(data); setQuery(''); } } return ( <div className="main-container"> <h1>☁ Weather App ☁</h1> <input type="text"className="search"placeholder="Search...🌡"             value={query}onChange={(e) => setQuery(e.target.value)}onKeyPress={search}/> {weather.main && ( <div className="city"> <h2 className="city-name"> <span>{weather.name}</span> <sup>{weather.sys.country}</sup> </h2> <div className="city-temp"> {Math.round(weather.main.temp)} <sup>&deg;C</sup> </div> <div className="info"> <img className="city-icon" src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}@2x.png`}                         alt={weather.weather[0].description} /> <p>{weather.weather[0].description}</p> </div> </div> )} <footer> <p>created with ❤️ by Gaurav Singh</p> </footer> </div> ); } export default App;

APP.css

html, body, #root {
	font: 0.9rem sans-serif;
	background: #112547;
	background-image: url("weather.jpg");
	color: #1e2432;
	background-position:fixed;
	background-repeat:no-repeat;
	background-size: cover;
	height: 100%;
	margin:auto;
	}
	.main-container {
	background: transform;
	background-size: cover;
	background-position: center;
	margin:0;
	}
	.main-container {
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	width:100vw;
	height:100vh;
	}
	.search {
	outline: none;
	padding: 20px 7%;
	border-radius: 20px;
	border: none;
	margin:auto;
	background: rgba(250, 250, 250, 0.85);
	}
	h1{
	padding: 20px 7%;
	border-radius: 20px;
	border: none;
	color: rgb(255, 255, 255);
	background-image: linear-gradient(to right, rgb(74, 188, 233),rgba(153, 153, 153, 0.466));
	}
	.city {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	padding: 10px 8%;
	border-radius: 20px;
	background: rgba(250, 250, 250, 0.85);
	box-shadow: 10px 10px 5px 0px rgba(15, 15, 15, 0.404);
	}
	p {
	margin-top: 10px;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	}
	.city-temp {
	font-size: 5rem;
	font-weight: bold;
	margin-top: 10px;
	color: #1e2432;
	text-align: center;
	}
	.city sup {
	font-size: 0.5em;
	}
	.city-name {
	font-size: 2em;
	}
	.city-name sup {
	padding: 0.2em 0.6em;
	margin-left: 0.2em;
	border-radius: 30px;
	color: #fff;
	background: #ff8c00;
	}
	.city-icon {
	margin-top: 10px;
	width: 100px;
	height: 100px;
	}
	.info {
	display: flex;
	flex-direction: column;
	align-items: center;
	}
	@media only screen and (max-width: 600px) {
	.search {
	padding: 20px 15%;
	}
	.city {
	padding: 40px 20%;
	}
	}
	footer{
	width: 100%;
	background-image:linear-gradient(to right,rgb(74, 188, 233),rgba(129, 129, 129, 0.466));
	margin-top: auto;
	}
	footer p{
	margin: 0;
	text-align: center;
	color: #fff;
	line-height: 5rem;
	font-size: 1.4rem;
	}

API.js

import axios from 'axios';
	const URL = 'https://api.openweathermap.org/data/2.5/weather';
	const API_KEY = 'f33a484cf794d08d0148764789aaba32';
	export const fetchWeather = async (query) => {
	const { data } = await axios.get(URL, {
	params: {
	q: query,
	units: 'metric',
	APPID: API_KEY,
	}
	});
	return data;
	}