Weather App in React JS with Openweathermap API

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: