Clock-Visualization/clock.js at main · Roseghost/Clock-Visualization · GitHub

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
var clock;

function changeTimezone(timeZone) {
  clearInterval(clock);
  updateClock(timeZone);
  document.querySelector("[data-title]").innerHTML = timeZone;

  clock = setInterval(() => {
    updateClock(timeZone);
  }, 1000);
}

function updateClock(timeZone) {
  var date = new Date(
    new Date().toLocaleString("en-US", {
      timeZone,
    })
  );

  if (betweenHours(date, 0, 5)) {
    switchTheme("midnight");
  } else if (betweenHours(date, 6, 11)) {
    switchTheme("dawn");
  } else if (betweenHours(date, 12, 17)) {
    switchTheme("midday");
  } else if (betweenHours(date, 18, 23)) {
    switchTheme("dusk");
  }

  document.querySelector("[data-time]").innerHTML = date.toLocaleTimeString("nl-NL");
}

// Switch between day parts//

function betweenHours(dateObject, startHour, endHour) {
  if (dateObject.getHours() >= startHour && dateObject.getHours() <= endHour) {
    return true;
  }

  return false;
}

function switchTheme(themeName) {
  document.body.className = themeName;
  document.querySelector("[data-period]").innerHTML = themeName;
}

changeTimezone("America/Fortaleza");