1
- const input = document . getElementById ( ' input' ) ;
2
- const btn = document . getElementById ( ' btn' ) ;
3
- const apiKey = ' e3a46268fdc2475cb63214712240202' ;
4
- const cityName = document . getElementById ( ' city-name' ) ;
5
- const dateTime = document . getElementById ( ' date-time' ) ;
6
- const condition2 = document . getElementById ( ' condition2' ) ;
7
- const temp = document . getElementById ( ' temp' ) ;
8
- const humidity = document . getElementById ( ' humidity' ) ;
9
- const country = document . getElementById ( ' country' ) ;
10
- const locat = document . getElementById ( ' getlocation' ) ;
11
- const cities = document . getElementsByClassName ( ' city' ) ;
12
- const icon = document . getElementById ( ' icon' ) ;
13
- const body = document . querySelector ( ' .weather-app' ) ;
1
+ const input = document . getElementById ( " input" ) ;
2
+ const btn = document . getElementById ( " btn" ) ;
3
+ const apiKey = " e3a46268fdc2475cb63214712240202" ;
4
+ const cityName = document . getElementById ( " city-name" ) ;
5
+ const dateTime = document . getElementById ( " date-time" ) ;
6
+ const condition2 = document . getElementById ( " condition2" ) ;
7
+ const temp = document . getElementById ( " temp" ) ;
8
+ const humidity = document . getElementById ( " humidity" ) ;
9
+ const countryy = document . getElementById ( " country" ) ;
10
+ const locat = document . getElementById ( " getlocation" ) ;
11
+ const cities = document . getElementsByClassName ( " city" ) ;
12
+ const icon = document . getElementById ( " icon" ) ;
13
+ const body = document . querySelector ( " .weather-app" ) ;
14
14
const fetchData = async ( url ) => {
15
15
try {
16
16
const data = await fetch ( url ) ;
@@ -28,21 +28,22 @@ const updateWeatherInfo = (result) => {
28
28
const { error, location, current } = result ;
29
29
if ( error ) {
30
30
cityName . innerText = `Error: ${ error . message } ` ;
31
- [ country , dateTime , temp , humidity , condition2 , icon ] . forEach ( ( elem ) => {
32
- elem . innerText = '' ;
31
+ [ countryy , dateTime , temp , humidity , condition2 , icon ] . forEach ( ( elem ) => {
32
+ elem . innerText = "" ;
33
33
} ) ;
34
- icon . src = '' ;
34
+ icon . src = "" ;
35
35
} else {
36
36
const { name, country, localtime } = location ;
37
+ console . log ( country ) ;
37
38
cityName . innerText = name ;
38
- country . innerText = country ;
39
+ countryy . innerText = country ;
39
40
dateTime . innerText = localtime ;
40
41
temp . innerText = `${ current . temp_c } °C` ;
41
42
humidity . innerText = `${ current . humidity } %` ;
42
43
condition2 . innerText = current . condition . text ;
43
44
icon . src = current . condition . icon ;
44
45
45
- const isDay = current . is_day === 1 ? ' day' : ' night' ;
46
+ const isDay = current . is_day === 1 ? " day" : " night" ;
46
47
const codes = [
47
48
[ 1000 , 10000 , 10001 , 1100 , 11001 , 11000 , 51190 , 60030 ] , // clear
48
49
[
@@ -77,37 +78,38 @@ const updateWeatherInfo = (result) => {
77
78
const getData = async ( cityName ) => {
78
79
try {
79
80
const result = await fetchData (
80
- `https://api.weatherapi.com/v1/current.json?key=${ apiKey } &q=${ cityName } &aqi=no` ,
81
+ `https://api.weatherapi.com/v1/current.json?key=${ apiKey } &q=${ cityName } &aqi=no`
81
82
) ;
82
83
return result ;
83
84
} catch ( error ) {
84
85
return {
85
- error : { message : ' Failed to fetch data. Please try again later.' } ,
86
+ error : { message : " Failed to fetch data. Please try again later." } ,
86
87
} ;
87
88
}
88
89
} ;
89
- const getlocation = async ( lat , long ) => fetchData (
90
- `https://api.weatherapi.com/v1/current.json?key=${ apiKey } &q=${ lat } ,${ long } &aqi=no` ,
91
- ) ;
90
+ const getlocation = async ( lat , long ) =>
91
+ fetchData (
92
+ `https://api.weatherapi.com/v1/current.json?key=${ apiKey } &q=${ lat } ,${ long } &aqi=no`
93
+ ) ;
92
94
93
95
const gotlocation = async ( position ) => {
94
96
try {
95
97
const result = await getlocation (
96
98
position . coords . latitude ,
97
- position . coords . longitude ,
99
+ position . coords . longitude
98
100
) ;
99
101
console . log ( result ) ;
100
102
updateWeatherInfo ( result ) ;
101
103
} catch ( error ) {
102
- cityName . innerText = ' Error fetching weather based on location' ;
104
+ cityName . innerText = " Error fetching weather based on location" ;
103
105
}
104
106
} ;
105
- const failedlocation = ( ) => console . log ( ' failed to locate location' ) ;
107
+ const failedlocation = ( ) => console . log ( " failed to locate location" ) ;
106
108
107
- btn . addEventListener ( ' click' , async ( e ) => {
109
+ btn . addEventListener ( " click" , async ( e ) => {
108
110
try {
109
111
if ( input . value . length === 0 ) {
110
- alert ( ' Please type a city name' ) ;
112
+ alert ( " Please type a city name" ) ;
111
113
} else {
112
114
const { value } = input ;
113
115
const result = await getData ( value ) ;
@@ -116,21 +118,23 @@ btn.addEventListener('click', async (e) => {
116
118
console . log ( result ) ;
117
119
}
118
120
} catch ( error ) {
119
- cityName . innerText = ' Error to fetch weather' ;
121
+ cityName . innerText = " Error to fetch weather" ;
120
122
}
121
123
e . preventDefault ( ) ;
122
124
} ) ;
123
125
124
- locat . addEventListener ( 'click' , ( ) => navigator . geolocation . getCurrentPosition ( gotlocation , failedlocation ) ) ;
126
+ locat . addEventListener ( "click" , ( ) =>
127
+ navigator . geolocation . getCurrentPosition ( gotlocation , failedlocation )
128
+ ) ;
125
129
const citiesArray = [ ...cities ] ;
126
130
citiesArray . forEach ( ( element ) => {
127
- element . addEventListener ( ' click' , async ( ) => {
131
+ element . addEventListener ( " click" , async ( ) => {
128
132
const cityName = element . innerText ;
129
133
const result = await getData ( cityName ) ;
130
134
updateWeatherInfo ( result ) ;
131
135
} ) ;
132
136
} ) ;
133
137
134
- window . addEventListener ( ' load' , async ( ) => {
138
+ window . addEventListener ( " load" , async ( ) => {
135
139
navigator . geolocation . getCurrentPosition ( gotlocation , failedlocation ) ;
136
140
} ) ;
0 commit comments