This is the source code for weather app which we have uploaded video for that
import axios from 'axios'
import React from 'react'
import { useEffect } from 'react'
import { useState } from 'react'
import './style.css'
function Home() { const [data, setData] = useState({ celcius: 10, name: 'London', humidity: 10, speed: 2, image: '/Images/clouds.png' }) const [name, setName] = useState(''); const [error, setError] = useState('');
const handleClick = () => { if(name !== "") { const apiUrl =https://api.openweathermap.org/data/2.5/weather?q=${name}&appid=16bfa98849718de13b6e8978b87d47b8&units=metric
; axios.get(apiUrl) .then(res => { let imagePath = ''; if(res.data.weather[0].main == "Clouds") { imagePath = "/Images/clouds.png" } else if(res.data.weather[0].main == "Clear") { imagePath = "/Images/clear.png" }else if(res.data.weather[0].main == "Rain") { imagePath = "/Images/rain.png" }else if(res.data.weather[0].main == "Drizzle") { imagePath = "/Images/drizzle.png" }else if(res.data.weather[0].main == "Mist") { imagePath = "/Images/mist.png" }else { imagePath = '/Images/clouds.png' } console.log(res.data); setData({...data, celcius: res.data.main.temp, name: res.data.name, humidity: res.data.main.humidity, speed: res.data.wind.speed, image: imagePath}) setError(''); }) .catch( err => { if(err.response.status == 404) { setError("Invalid City Name") } else { setError(''); } console.log(err) }); } }
return ( <div className='container'> <div className="weather"> <div className="search"> <input type="text" placeholder='Enter City Name' ={e => setName(e.target.value)}/> <button><img src='Images/search.png' ={handleClick} alt="" /></button> </div> <div className="error"> <p>{error}</p> </div> <div className="winfo"> <img src={data.image} alt="" className='icon' /> <h1>{Math.round(data.celcius)}°c</h1> <h2>{data.name}</h2> <div className="details"> <div className="col"> <img src="/Images/humidity.png" alt="" /> <div className='humidity'> <p>{Math.round(data.humidity)}%</p> <p>Humidity</p> </div> </div> <div className="col"> <img src="/Images/wind.png" alt="" /> <div className='wind'> <p>{Math.round(data.speed)} km/h</p> <p>Wind</p> </div> </div> </div> </div> </div> </div> )}
export default Home
The CSS file:
.container {
width: 100%;
height: 100vh;
padding-top: 40px;
background-color: rgb(137, 170, 237);
}
.weather {
width: 380px;
padding: 30px;
border-radius: 10px;
margin: 50px auto;
text-align: center;
color: white;
background: linear-gradient(130deg, rgb(86, 86, 235), rgb(5, 5, 199));
}
.search {
display: flex;
align-items: center;
justify-content: space-between;
}
.search input { border: none; outline: 0; padding: 12px 25px; font-size: 18px; background-color: rgb(222, 237, 243); color: black; border-radius: 30px; flex: 1; margin-right: 12px;}.search button { border: none; outline: 0; width: 50px; height: 50px; border-radius: 50%; cursor: pointer;}.search button img { width: 20px;}.winfo .icon { margin-top: 20px; width: 170px;}
.winfo h1 { font-size: 70px; font-weight: 500; margin-top: 5px;}.winfo h2 { font-size: 40px; font-weight: 400; margin-top: -40px;}.details { display: flex; align-items: center; justify-content: space-between; padding: 0px 20px; margin-top: 50px;}.details .col { display: flex; align-items: center; text-align: left;}.details .col img { width: 45px; margin-right: 10px;}.humidity, .wind { font-size: 27px;}.humidity p, .wind p { margin: 0px;}.error { color: rgb(235, 169, 169); text-align: left; margin-left: 10px;}
YouTube link: