-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
106 lines (83 loc) · 3.49 KB
/
script.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
const timeEl = document.getElementById('time');
const dateEl = document.getElementById('date');
const currentWeatherItemsEl = document.getElementById('current-weather-items');
const timezone = document.getElementById('time-zone');
const countryEl = document.getElementById('country');
const weatherForecastEl = document.getElementById('weather-forecast');
const currentTempEl = document.getElementById('current-temp');
const days = ['Sunday','Monday','Tuesday','Wednesday','Thrusday','Saturday'];
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
const API_KEY = '75949622d9bccceded71660959769674'
setInterval(() => {
const time = new Date();
const month = time.getMonth();
const date = time.getDate();
const day = time.getDay();
const hours = time.getHours();
const hoursIn12HrsFormat = hours >=13 ? hours%12 :hours
const minutes = time.getMinutes();
const ampm = hours >=12 ? 'PM':'AM'
timeEl.innerHTML = hoursIn12HrsFormat + ':'+(minutes <10 ?'0'+minutes : minutes) +' '+ `<span id="am-pm">${ampm}</span>`
dateEl.innerHTML = days[day] + ', '+date+' '+months[month]
}, 1000);
getWeatherData();
function getWeatherData(){
navigator.geolocation.getCurrentPosition((success) => {
console.log(success);
let{latitude,longitude} = success.coords;
fetch(`https://api.openweathermap.org/data/2.5/onecall?lat=${latitude}&lon=${longitude}&exclude=hourly,minutely&units=metric&appid=${API_KEY}`)
.then(res => res.json()).then(data => {
console.log(data)
showWeatherData(data);
})
})
}
function showWeatherData (data) {
let{humidity,pressure,sunrise,sunset,wind_speed} = data.current;
timezone.innerHTML =data.timezone;
countryEl.innerHTML = data.lat + 'N ' + data.lon + 'E'
currentWeatherItemsEl.innerHTML =
`<div class="weather-item">
<div>Humidity</div>
<div>${humidity}%</div>
</div>
<div class="weather-item">
<div>Pressure</div>
<div>${pressure}</div>
</div>
<div class="weather-item">
<div>Wind Speed</div>
<div>${wind_speed}</div>
</div>
<div class="weather-item">
<div>Sunrise</div>
<div>${window.moment(sunrise*1000).format('HH:mm a')}</div>
</div>
<div class="weather-item">
<div>Sunrise</div>
<div>${window.moment(sunset*1000).format('HH:mm a')}</div>
</div>`;
let otherDayForcast =''
data.daily.forEach((day,idx) =>{
if(idx==0){
currentTempEl.innerHTML = `
<img src="http://openweathermap.org/img/wn/${day.weather[0].icon}@2x.png"" alt="weather icon" class="w-icon">
<div class="other">
<div class="day">Today</div>
<div class="temp">Day - ${day.temp.day}° C</div>
<div class="temp">Night - ${day.temp.night}° C</div>
</div>
`
}else{
otherDayForcast += `
<div class="weather-forecast-item">
<div class="day">${window.moment(day.dt*1000).format('ddd')}</div>
<img src="http://openweathermap.org/img/wn/${day.weather[0].icon}@2x.png"" alt="weather icon" class="w-icon">
<div class="temp">Day - ${day.temp.day}° C</div>
<div class="temp">Night - ${day.temp.night}° C</div>
</div>
`
}
})
weatherForecastEl.innerHTML = otherDayForcast;
}