weather app for beginner is completed

WeatherApp.css

@@ -0,0 +1,83 @@
+.container{
+    width: 407px;
+    height: 529px;
+    margin:  auto;
+    padding: 30px 20px 0px 20px;
+    margin-top: 40px;
+    border-radius: 12px;
+    background-image: linear-gradient(180deg, #130754 0%, #3b2f80 100%);
+}
+.top-bar{
+    display: flex;
+    justify-content: center;
+    gap: 14px;
+    padding-top: 16px;
+}
+.top-bar input{
+    display: flex;
+    width: 262px;
+    height: 58px;
+    background: #ebfffc;
+    border: none;
+    outline: none;
+    border-radius: 40px;
+    padding-left: 40px;
+    color: #626262;
+    font-size: 20px;
+    font-weight: 400;
+}
+.search-icon{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 58px;
+    height: 58px;
+    background: #ebfffc;
+    border-radius: 40px;
+    cursor: pointer;
+}
+.search-icon:active{
+    scale: 0.98;
+}
+.weather-image{
+    margin-top: 19px;
+    display: flex;
+    justify-content: center;    
+}
+.weather-temp{
+    display: flex;
+    justify-content: center;
+    color: white;
+    font-size: 40px;
+    font-weight: 400;
+}
+.weather-location{
+    display: flex;
+    justify-content: center;
+    color: white;
+    font-size: 30px;
+    font-weight: 400;
+}
+.data-container{
+    margin-top: 30px;
+    color: white;
+    display: flex;
+    justify-content: center;
+}
+.element{
+    margin: auto;
+    display: flex;
+    align-items: flex-start;
+    gap: 12px;
+}
+.data{
+    font-size: 24px;
+    font-weight: 400;
+}
+.text{
+    font-size: 16px;
+    font-weight: 400;
+}
+.icon{
+    margin-top: 10px;
+}

WeatherApp.jsx

@@ -0,0 +1,97 @@
+import React, { useState } from 'react'
+import './WeatherApp.css'
+import search_icon from '../Assests/search.png';
+import clear_icon from '../Assests/clear.png';
+import cloud_icon from '../Assests/cloud.png';
+import drizzle_icon from '../Assests/drizzle.png';
+import humidity_icon from '../Assests/humidity.png';
+import rain_icon from '../Assests/rain.png';
+import snow_icon from '../Assests/snow.png';
+import wind_icon from '../Assests/wind.png';
+const WeatherApp = () => {
+
+    let api_key = "e18a550a441f2978bb75e352f1ea7fa9";
+
+    const [wicon, setWicon] = useState(cloud_icon);
+
+    const search = async () =>{
+        const element = document.getElementsByClassName("cityInput");
+        if(element[0].value === ""){
+            return 0;
+        }
+
+        let url = `https://api.openweathermap.org/data/2.5/weather?q=${element[0].value}&units=metric&appid=${api_key}`;
+
+        let response = await fetch(url);
+        let data = await response.json();
+        const humidity = document.getElementsByClassName("humidity-percent");
+        const wind = document.getElementsByClassName("wind-rate")
+        const temp = document.getElementsByClassName("weather-temp");
+        const location = document.getElementsByClassName("weather-location");
+        humidity[0].innerHTML = data.main.humidity+"%";
+        wind[0].innerHTML = Math.floor(data.wind.speed)+"km/h";
+        temp[0].innerHTML = Math.floor(data.main.temp)+"°c";
+        location[0].innerHTML = data.name;
+
+        if(data.weather[0].icon==="01d" || data.weather[0].icon==="01n") {
+            setWicon(clear_icon);
+        }
+        else if(data.weather[0].icon==="02d" || data.weather[0].icon==="02n") {
+            setWicon(cloud_icon);
+        }
+        else if(data.weather[0].icon==="03d" || data.weather[0].icon==="03n") {
+            setWicon(drizzle_icon);
+        }
+        else if(data.weather[0].icon==="04d" || data.weather[0].icon==="04n") {
+            setWicon(drizzle_icon);
+        }
+        else if(data.weather[0].icon==="09d" || data.weather[0].icon==="09n") {
+            setWicon(rain_icon);
+        }
+        else if(data.weather[0].icon==="10d" || data.weather[0].icon==="10n") {
+            setWicon(rain_icon);
+        }
+        else if(data.weather[0].icon==="13d" || data.weather[0].icon==="13n") {
+            setWicon(snow_icon);
+        }
+        else{
+            setWicon(clear_icon);
+        }
+
+    }
+
+
+  return (
+    <div className = "container">
+       <div className="top-bar">
+         <input type="text" placeholder='search' className="cityInput" />
+         <div onClick={() => {search()}} className="search-icon">
+            <img src={search_icon}  alt="" />
+         </div>
+       </div>
+       <div className="weather-image">
+        <img src={wicon} alt="" />
+       </div>
+       <div className="weather-temp">24°c</div>
+       <div className="weather-location">London</div>
+       <div className="data-container">
+            <div className="element">
+                <img src={humidity_icon} alt="" className="icon" />
+                <div className="data">
+                    <div className="humidity-percent">64%</div>
+                    <div className="text">Humidity</div>
+                </div>
+            </div>
+            <div className="element">
+                <img src={wind_icon} alt="" className="icon" />
+                <div className="data">
+                    <div className="wind-rate">18 km/h</div>
+                    <div className="text">Wind Speed</div>
+                </div>
+            </div>
+       </div>
+    </div>
+  )
+}
+
+export default WeatherApp;