world clock

DaGrisa · Mar 29, 2022 · 65290e5 · 65290e5
1 parent 5fb49e2
commit 65290e5
Show file tree

Hide file tree

Showing 3 changed files with 143 additions and 0 deletions.
diff --git a/world-clock/index.html b/world-clock/index.html
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>World Clock</title>
+
+    <link rel="stylesheet" href="style.css" />
+    <script src="worldclock.js"></script>
+</head>
+<body onload="startApp()">
+<h1>Worldclock</h1>
+<br>
+<div id="local">
+    <h2 id="local-time"></h2>
+    <h3 id="local-date"></h3>
+    <h3 id="local-timezone"></h3>
+</div>
+<div id="add-widget">
+    <select id="areas" onchange="setTimeZoneOptions()"></select>
+    <select id="timezones"></select>
+    <button onclick="addWidget()">Add</button>
+</div>
+<div id="widgets"></div>
+</body>
+</html>
diff --git a/world-clock/style.css b/world-clock/style.css
@@ -0,0 +1,5 @@
+body {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
diff --git a/world-clock/worldclock.js b/world-clock/worldclock.js
@@ -0,0 +1,113 @@
+let areas = [];
+let timezones = [];
+let widgets = [];
+
+async function startApp() {
+    widgets.push("local");
+    await reloadWidgets();
+
+    [areas, timezones] = await getTimeZoneData();
+    setAreaOptions(areas);
+    setTimeZoneOptions();
+
+    setInterval(() => reloadWidgets(), 60000);
+}
+
+async function reloadWidgets() {
+    for (const widget of widgets) {
+        const url = getUrl(widget);
+        const responseTimeInfo = await fetch(url);
+        const timeInfo = await responseTimeInfo.json();
+
+        const timestampWithoutOffset = timeInfo.datetime.substring(0, 26);
+        const dateObject = new Date(timestampWithoutOffset);
+        const localTime = new Intl.DateTimeFormat("de", {
+            hour: '2-digit',
+            minute: '2-digit'
+        }).format(dateObject);
+        const localDate = new Intl.DateTimeFormat("de", {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric'
+        }).format(dateObject);
+        const localTimeZone = timeInfo.timezone;
+
+        document.getElementById(widget + "-time").innerText = localTime;
+        document.getElementById(widget + "-date").innerText = localDate;
+        document.getElementById(widget + "-timezone").innerText = localTimeZone;
+    }
+}
+
+function getUrl(widgetName) {
+    if (widgetName == "local") {
+        return "http://worldtimeapi.org/api/ip";
+    }
+    return `http://worldtimeapi.org/api/timezone/${widgetName}`;
+}
+
+async function getTimeZoneData() {
+    const responseTimeZones = await fetch("http://worldtimeapi.org/api/timezones");
+    const timeZonesRaw = await responseTimeZones.json();
+
+    const timeZones = timeZonesRaw.filter(timeZone => timeZone.includes("/") && !timeZone.startsWith("Etc/"));
+
+    const areas = new Set();
+    for (const timeZone of timeZones) {
+        [area, region] = timeZone.split("/");
+        areas.add(area);
+    }
+
+    return [Array.from(areas).sort(), timeZones.sort()];
+}
+
+function setAreaOptions(areas) {
+    const selectList = document.getElementById("areas");
+    for (const area of areas) {
+        const option = document.createElement("option");
+        option.innerText = area;
+        selectList.appendChild(option);
+    }
+}
+
+function setTimeZoneOptions() {
+    const area = document.getElementById("areas").value;
+    const filteredTimeZones = timezones.filter(timeZone => timeZone.startsWith(area))
+    const selectList = document.getElementById("timezones");
+    selectList.innerHTML = undefined;
+    for (const timeZone of filteredTimeZones) {
+        const option = document.createElement("option");
+        option.innerText = timeZone;
+        selectList.appendChild(option);
+    }
+}
+
+function addWidget() {
+    const timezone = document.getElementById("timezones").value;
+    if (widgets.includes(timezone)) {
+        return;
+    }
+
+    widgets.push(timezone)
+    createWidget(timezone);
+    reloadWidgets();
+}
+
+function createWidget(timezone) {
+    const widgets = document.getElementById("widgets");
+    const newWidget = document.createElement("div");
+    newWidget.id = "widget-" + timezone;
+
+    const timeElement = document.createElement("div");
+    timeElement.id = timezone + "-time";
+    const dateElement = document.createElement("div");
+    dateElement.id = timezone + "-date";
+    const timezoneElement = document.createElement("div");
+    timezoneElement.id = timezone + "-timezone";
+
+    newWidget.appendChild(timeElement);
+    newWidget.appendChild(dateElement);
+    newWidget.appendChild(timezoneElement);
+
+    widgets.appendChild(newWidget);
+}