script.js

/* variables */

let darkMode = localStorage.getItem("darkMode");
let themeButton = document.getElementById("themeButton");

let removeMarkersButton = document.getElementById("removeMarkersButton");

let liveClockUTC = document.getElementById("clockDisplay");

let ESTDisplay = document.getElementById("ESTDisplay");
let EDTDisplay = document.getElementById("EDTDisplay");
let PSTDisplay = document.getElementById("PSTDisplay");
let PDTDisplay = document.getElementById("PDTDisplay");
let GMTDisplay = document.getElementById("GMTDisplay");
let MSTDisplay = document.getElementById("MSTDisplay");
let MDTDisplay = document.getElementById("MDTDisplay");
let BRTDisplay = document.getElementById("BRTDisplay");

let CETDisplay = document.getElementById("CETDisplay");
let CESTDisplay = document.getElementById("CESTDisplay");
let AESTDisplay = document.getElementById("AESTDisplay");
let AEDTDisplay = document.getElementById("AEDTDisplay");
let BSTDisplay = document.getElementById("BSTDisplay");
let ISTDisplay = document.getElementById("ISTDisplay");
let JSTDisplay = document.getElementById("JSTDisplay");
let CSTDisplay = document.getElementById("CSTDisplay");

/* logic */

/* map */

const map = L.map('iMap').setView([0, 0], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
}).addTo(map);

const markers = [];

function updateMarkerTime(marker) {
if (!marker.timeZone) {
    marker.setPopupContent("Time zone not set.");
    return;
    }

    const now = new Date();
    const timeString = new Intl.DateTimeFormat('en-US', {
        timeZone: marker.timeZone,
        hour: '2-digit',
        minute: '2-digit',
        second: '2-digit',
        hour12: false
    }).format(now);

    marker.setPopupContent(`
        <strong>Time Zone:</strong> ${marker.timeZone}<br>
        <strong>Local Time:</strong> ${timeString}
    `);
}

// Map click: Add marker and store timeZone
map.on('click', function(e) {
    const { lat, lng } = e.latlng;

    const marker = L.marker([lat, lng]).addTo(map);
    marker.bindPopup("Loading...").openPopup();

    // Get time zone (this must work!)
    try {
        const timeZone = tzlookup(lat, lng);
        marker.timeZone = timeZone;
    } catch (err) {
        marker.setPopupContent("Couldn't get time zone.");
        return;
    }

    updateMarkerTime(marker); // initial display
    markers.push(marker);
});

// Update every second
setInterval(() => {
markers.forEach(updateMarkerTime);
}, 1000);

removeMarkersButton.addEventListener("click", () => {
    markers.forEach(i => map.removeLayer(i));
    markers.length = 0;
});

/* functions */

function add0To1Digit(number) {
    if (number.toString().length < 2) {
        return `0${number}`;
    }
    else {
        return number;
    }
}

function keepClockPosition(hour) {
    hour = parseInt(hour);
    if (hour >= 24) {return hour - 24;}
    else if (hour < 0) {return hour + 24;}
    else {return hour;}
}

function keepClockPositionMinutes(minute) {
    minute = parseInt(minute);
    if (minute >= 60) {return minute - 60;}
    else if (minute < 0) {return minute + 60;}
    else {return minute;}
}

liveClockUTC.textContent = `${add0To1Digit(new Date().getUTCHours())}:${add0To1Digit(new Date().getUTCMinutes())}:${add0To1Digit(new Date().getUTCSeconds())}`;

/* main function */

function updateClock() {
    /* variables */
    const timeZone = new Date();
    
    const UTChours = add0To1Digit(timeZone.getUTCHours());
    
    const ESThours = keepClockPosition(timeZone.getUTCHours() - 5);
    const EDThours = keepClockPosition(timeZone.getUTCHours() - 4);
    const PSThours = keepClockPosition(timeZone.getUTCHours() - 8);
    const PDThours = keepClockPosition(timeZone.getUTCHours() - 7);
    const MDThours = keepClockPosition(timeZone.getUTCHours() - 6);
    const BRThours = keepClockPosition(timeZone.getUTCHours() - 3);

    const CEThours = keepClockPosition(timeZone.getUTCHours() + 1);
    const CESThours = keepClockPosition(timeZone.getUTCHours() + 2);
    const AESThours = keepClockPosition(timeZone.getUTCHours() + 10);
    const AEDThours = keepClockPosition(timeZone.getUTCHours() + 11);
    const ISThours = keepClockPosition(timeZone.getUTCHours() + 5)
    const JSThours = keepClockPosition(timeZone.getUTCHours() + 9)
    const CSThours = keepClockPosition(timeZone.getUTCHours() + 8)

    const ISTMinutes = keepClockPositionMinutes(timeZone.getUTCMinutes() + 30);

    const minutes = add0To1Digit(timeZone.getUTCMinutes());
    const seconds = add0To1Digit(timeZone.getUTCSeconds());

    /* updating text content */

    liveClockUTC.textContent = `${UTChours}:${minutes}:${seconds}`; 
    
    ESTDisplay.textContent = `${add0To1Digit(ESThours)}:${minutes}`; 
    EDTDisplay.textContent = `${add0To1Digit(EDThours)}:${minutes}`; 
    PSTDisplay.textContent = `${add0To1Digit(PSThours)}:${minutes}`; 
    PDTDisplay.textContent = `${add0To1Digit(PDThours)}:${minutes}`; 
    GMTDisplay.textContent = `${UTChours}:${minutes}`; 
    MSTDisplay.textContent = `${add0To1Digit(PDThours)}:${minutes}`; 
    MDTDisplay.textContent = `${add0To1Digit(MDThours)}:${minutes}`; 
    BRTDisplay.textContent = `${add0To1Digit(BRThours)}:${minutes}`; 

    CETDisplay.textContent = `${add0To1Digit(CEThours)}:${minutes}`; 
    CESTDisplay.textContent = `${add0To1Digit(CESThours)}:${minutes}`; 
    AESTDisplay.textContent = `${add0To1Digit(AESThours)}:${minutes}`; 
    AEDTDisplay.textContent = `${add0To1Digit(AEDThours)}:${minutes}`; 
    BSTDisplay.textContent = `${add0To1Digit(CEThours)}:${minutes}`; 
    ISTDisplay.textContent = `${add0To1Digit(ISThours)}:${add0To1Digit(ISTMinutes)}`; 
    JSTDisplay.textContent = `${add0To1Digit(JSThours)}:${minutes}`; 
    CSTDisplay.textContent = `${add0To1Digit(CSThours)}:${minutes}`; 
}

function enableDarkmode() {
    document.body.classList.add("darkMode");
    localStorage.setItem("darkMode", "active");
}

function disableDarkmode() {
    document.body.classList.remove("darkMode");
    localStorage.setItem("darkMode", null);
}

themeButton.addEventListener("click", () => {
    darkMode = localStorage.getItem("darkMode");
    darkMode !== "active" ? enableDarkmode() : disableDarkmode() 
});

if (darkMode === "active") {enableDarkmode();}

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

setInterval(() => {
  markers.forEach(marker => updateMarkerTime(marker));
}, 1000);