-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmain.js
53 lines (41 loc) · 1.47 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
import MicroModal from 'micromodal';
import dayjs from 'dayjs';
import utc from 'dayjs/plugin/utc';
import timezone from 'dayjs/plugin/timezone';
dayjs.extend(utc)
dayjs.extend(timezone)
// Variables to hold the elements to be changed
const timeZoneElem = document.getElementById('timezone')
const CurTime = document.getElementById('time')
const curDate = document.getElementById('date')
const applyBt = document.getElementById('apply-bt')
const selectElem = document.getElementById('timeZLi')
// declare a timezone in user's current location
let timeZObj = dayjs.tz.guess()
// initialize the element valaues
popScreen();
// function to populate the date and time zone screen elements
function popScreen(){
const now = dayjs().tz(timeZObj)
timeZoneElem.textContent = timeZObj.replace('/', ' / ').replace('_', ' ')
CurTime.textContent = now.format('hh:mm:ss')
curDate.textContent = now.format('dddd, D MMMM, YYYY')
}
// generate dropdown list of time zones
let SupTZArr = Intl.supportedValuesOf("timeZone");
for (const timz of SupTZArr){
// Create a new option
let newOption = new Option(timz, timz);
// Add the new option to the select element
selectElem.add(newOption, undefined);
}
// modal
MicroModal.init()
applyBt.addEventListener('click', changeTimeZone);
// function to change the time zone to selected one
function changeTimeZone(){
const selVal = selectElem.value
timeZObj = selVal
}
// reload the time every second
setInterval(popScreen, 1000);