-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.js
155 lines (112 loc) · 6.5 KB
/
main.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
//The user will enter a date and get the forecast for that date from weather API.
document.querySelector('button').addEventListener('click', weatherForecast)
function weatherForecast(){
// let todaysWeather= document.querySelector('input').value
let city =document.querySelector('.city').value
// let span = document.querySelector('span')
document.querySelector('span').innerText = document.querySelector('.city').value
//location:
//http://api.weatherapi.com/v1/forecast.json?key=73ad2a5104a64ba59a6161613220305&q=Boston&days=1&aqi=no&alerts=no
//date:
//http://api.weatherapi.com/v1/history.json?key=73ad2a5104a64ba59a6161613220305&q=Boston&dt=2010-01-01
//forecast & current:
//http://api.weatherapi.com/v1/forecast.json?key=73ad2a5104a64ba59a6161613220305&q=Boston&days=5&aqi=no&alerts=no
let url = `http://api.weatherapi.com/v1/forecast.json?key=73ad2a5104a64ba59a6161613220305&q=${city}&days=5&aqi=no&alerts=no`
// console.log(url)
fetch(url)
//'promise'-->will "fire" the .then function, when the request is fulfilled
//res= result ---> parse it into JSON syntax (parse response as JSON)
.then(res => res.json())//-->yields workable 'data'
// data ---> pass the data retrieved into the function
.then(data =>{
console.log(data)
let iconCurrent=data.current.condition.icon
let iconForecastOne= data.forecast.forecastday[1].day.condition.icon
let iconForecastTwo= data.forecast.forecastday[2].day.condition.icon
console.log(iconForecastOne)
console.log(iconForecastTwo)
// let iconForecastThree= data.forecast.forecastday[3].day.icon
// let iconForecastFour= data.forecast.forecastday[4].day.icon
// let iconForecastFive= data.forecast.forecastday[5].day.icon
// console.log(data.current.condition.icon)
// for(const value of iconCurrent){
// if(iconCurrent.includes('//')){
// iconCurrent.replace('//','')
// }
// }return
// let urlArr=iconCurrent.split('//')
// iconCurrent= urlArr.join('')
//reg expression
//string.split('//')---> [array]-----> .join()
// document.querySelector('h2').innerText=
// document.querySelector('img').src=
// document.querySelector('h3').innerText =
// console.log(data.drinks[0])
document.querySelector('.todays-date').innerText =data.current.last_updated
document.querySelector('.chance-rain').innerText =data.current.precip_in
document.querySelector('.current-temp').innerText=data.current.temp_f
document.querySelector('.current-text').innerText=data.current.condition.text
// for(const value of iconCurrent){
// if(iconCurrent.includes('//')){
// iconCurrent=iconCurrent.replace('//','')
// }
document.querySelector('.current-icon').src='https:'+iconCurrent
// console.log(iconCurrent)
// for(const value of iconCurrent){
// if(iconCurrent.includes('//'){
// replace('//','')
// iconCurrent.split('//')
// }
// }return iconCurrent
// }
// let urlArr=iconCurrent.split('//')
// iconCurrent= urlArr.join('')
//remove // from .png url using a loop ?
// console.log(data)
// console.log(data.current.condition.icon)
// document.querySelector('span').innerText=city.value
document.querySelector('.forecast-date-one').innerText=data.forecast.forecastday[1].date
// console.log(data.forecast.forecastday[1].date)
document.querySelector('.forecast-temp-one').innerText=data.forecast.forecastday[1].day.avgtemp_f
document.querySelector('.forecast-rain-one').innerText=data.forecast.forecastday[1].day.daily_will_it_rain
document.querySelector('.forecast-text-one').innerText=data.forecast.forecastday[1].day.condition.text
// for(const value of iconForecastOne){
// if(iconForecastOne.includes('//')){
// iconForecastOne=iconForecastOne.replace('//','')
// }
// }
document.querySelector('.forecast-icon-one').src='https:'+iconForecastOne
console.log(iconForecastOne)
// document.querySelector('img').src= data.hdurl
// document.querySelector('h3').innerText =data.explanation
document.querySelector('.forecast-date-two').innerText=data.forecast.forecastday[2].date
document.querySelector('.forecast-temp-two').innerText=data.forecast.forecastday[2].day.avgtemp_f
document.querySelector('.forecast-rain-two').innerText=data.forecast.forecastday[2].day.daily_will_it_rain
document.querySelector('.forecast-text-two').innerText=data.forecast.forecastday[2].day.condition.text
// for(const value of iconForecastTwo){
// if(iconForecastTwo.includes('//')){
// iconForecastTwo=iconForecastTwo.replace('//','')
// }
// }
document.querySelector('.forecast-icon-two').src='https:'+iconForecastTwo
console.log(iconForecastTwo)
// document.querySelector('.forecast-date-three').innerText=data.forecast.forecastday[3].date
// document.querySelector('.forecast-temp-three').innerText=data.forecast.forecastday[3].day.avgtemp_f
// document.querySelector('.forecast-rain-three').innerText=data.forecast.forecastday[3].day.daily_will_it_rain
// document.querySelector('.forecast-text-three').innerText=data.forecast.forecastday[3].day.condition.text
// document.querySelector('.forecast-icon-three').src=data.forecast.forecastday[3].day.icon
// document.querySelector('.forecast-date-four').innerText=data.forecast.forecastday[4].date
// document.querySelector('.forecast-temp-four').innerText=data.forecast.forecastday[4].day.avgtemp_f
// document.querySelector('.forecast-rain-four').innerText=data.forecast.forecastday[4].day.daily_will_it_rain
// document.querySelector('.forecast-text-four').innerText=data.forecast.forecastday[4].day.condition.text
// document.querySelector('.forecast-icon-four').src=data.forecast.forecastday[4].day.icon
// document.querySelector('.forecast-date-five').innerText=data.forecast.forecastday[5].date
// document.querySelector('.forecast-temp-five').innerText=data.forecast.forecastday[5].day.avgtemp_f
// document.querySelector('.forecast-rain-five').innerText=data.forecast.forecastday[5].day.daily_will_it_rain
// document.querySelector('.forecast-text-five').innerText=data.forecast.forecastday[5].day.condition.text
// document.querySelector('.forecast-icon-five').src=data.forecast.forecastday[5].day.icon
})
.catch(err =>{
console.log(`error ${err}`)
})
}