11import React , { useState } from 'react'
2- import cloud_icon from '../assets/cloud.png'
3- import warm_icon from '../assets/warm.png'
4- import clear_icon from '../assets/clear.png'
5- import extremeWarm_icon from '../assets/extremeWarm.png'
6- import drizzle_icon from '../assets/drizzle.png'
7- import rain_icon from '../assets/rain.png'
8- import snow_icon from '../assets/snow.png'
2+
3+ import icon_01d from '../assets/icons/01d.png'
4+ import icon_01n from '../assets/icons/01n.png'
5+ import icon_02d from '../assets/icons/02d.png'
6+ import icon_02n from '../assets/icons/02n.png'
7+ import icon_03d from '../assets/icons/03d.png'
8+ import icon_03n from '../assets/icons/03n.png'
9+ import icon_04d from '../assets/icons/04d.png'
10+ import icon_04n from '../assets/icons/04n.png'
11+ import icon_09d from '../assets/icons/09d.png'
12+ import icon_09n from '../assets/icons/09n.png'
13+ import icon_10d from '../assets/icons/10d.png'
14+ import icon_10n from '../assets/icons/10n.png'
15+ import icon_11d from '../assets/icons/11d.png'
16+ import icon_11n from '../assets/icons/11n.png'
17+ import icon_13d from '../assets/icons/13d.png'
18+ import icon_13n from '../assets/icons/13n.png'
19+ import icon_50d from '../assets/icons/50d.png'
20+ import icon_50n from '../assets/icons/50n.png'
21+
922
1023import search_icon from '../assets/search.png'
1124import humidity_icon from '../assets/humidity.png'
1225import wind_icon from '../assets/wind.png'
26+
1327function WeatherApp ( ) {
1428
1529const [ city , setCity ] = useState ( null )
1630const [ search , setSearch ] = useState ( "" )
17- const [ tempImage , setTempImage ] = useState ( cloud_icon )
31+ const [ tempImage , setTempImage ] = useState ( )
1832const [ tempText , setTempText ] = useState ( "" )
1933
20-
21-
22-
23-
2434const fetchapi = async ( ) => {
2535const url = `https://api.openweathermap.org/data/2.5/weather?q=${ search } ${ import . meta. env . VITE_SECRET_KEY } ;
2636const res = await fetch ( url ) ;
@@ -32,35 +42,70 @@ function WeatherApp() {
3242if ( res . ok ) {
3343const response = await res . json ( ) ;
3444setCity ( response )
35-
36- if ( ( response . main . temp - 273.15 ) < - 20 ) {
37- setTempImage ( snow_icon )
38- setTempText ( "Snowy" )
39- }
40- else if ( ( response . main . temp - 273.15 ) < 0 ) {
41- setTempImage ( rain_icon )
42- setTempText ( "Rainy" )
43- }
44- else if ( ( response . main . temp - 273.15 ) < 10 ) {
45- setTempImage ( drizzle_icon )
46- setTempText ( "Drizzle" )
47- }
48- else if ( ( response . main . temp - 273.15 ) < 20 ) {
49- setTempImage ( cloud_icon )
50- setTempText ( "Cloudy" )
51- }
52- else if ( ( response . main . temp - 273.15 ) < 30 ) {
53- setTempImage ( clear_icon )
54- setTempText ( "Clear" )
55- }
56- else if ( ( response . main . temp - 273.15 ) < 35 ) {
57- setTempImage ( warm_icon )
58- setTempText ( "Warm" )
59- }
60- else if ( ( response . main . temp - 273.15 ) > 35 ) {
61- setTempImage ( extremeWarm_icon )
62- setTempText ( "Warm" )
45+ // console.log(response.weather[0].description);
46+ setTempText ( response . weather [ 0 ] . description ) ;
47+ // console.log(response.weather[0].icon);
48+
49+ switch ( response . weather [ 0 ] . icon ) {
50+ case '01d' :
51+ setTempImage ( `${ icon_01d } )
52+ break ;
53+ case '01n' :
54+ setTempImage ( `${ icon_01n } )
55+ break ;
56+ case '02d' :
57+ setTempImage ( `${ icon_02d } )
58+ break ;
59+ case '02n' :
60+ setTempImage ( `${ icon_02n } )
61+ break ;
62+ case '03d' :
63+ setTempImage ( `${ icon_03d } )
64+ break ;
65+ case '03n' :
66+ setTempImage ( `${ icon_03n } )
67+ break ;
68+ case '04d' :
69+ setTempImage ( `${ icon_04d } )
70+ break ;
71+ case '04n' :
72+ setTempImage ( `${ icon_04n } )
73+ break ;
74+ case '09d' :
75+ setTempImage ( `${ icon_09d } )
76+ break ;
77+ case '09n' :
78+ setTempImage ( `${ icon_09n } )
79+ break ;
80+ case '10d' :
81+ setTempImage ( `${ icon_10d } )
82+ break ;
83+ case '10n' :
84+ setTempImage ( `${ icon_10n } )
85+ break ;
86+ case '11d' :
87+ setTempImage ( `${ icon_11d } )
88+ break ;
89+ case '11n' :
90+ setTempImage ( `${ icon_11n } )
91+ break ;
92+ case '13d' :
93+ setTempImage ( `${ icon_13d } )
94+ break ;
95+ case '13n' :
96+ setTempImage ( `${ icon_13n } )
97+ break ;
98+ case '50d' :
99+ setTempImage ( `${ icon_50d } )
100+ break ;
101+ case '50n' :
102+ setTempImage ( `${ icon_50n } )
103+ break ;
104+
105+ default :
106+ break ;
63107}
108+
64109console . log ( search ) ;
65110} else {
66111alert ( 'City not found' ) ;
@@ -89,12 +134,12 @@ function WeatherApp() {
89134</ div >
90135{
91136! city ?(
92- < p > Hello </ p >
137+ < p > Welcome to the weather app 🙏 </ p >
93138) :(
94139< div className = 'material' >
95140
96141< div className = "weatherImage vibrate-1" >
97- < img src = { tempImage } className = 'weatherImageIcon' alt = "" />
142+ < img src = { tempImage } className = 'weatherImageIcon color-change ' alt = "" />
98143</ div >
99144
100145