Right-Click Menu and Geolocation

[x] Implement a custom right-click context menu to give the user a command that performs some task
[x] Use the geolocation API to determine the user's location
[ ] Use geolocation information to display the user's current time zone

To display the time zone:

HTML addition:

    <h1>Local Time Zone Information</h1>
    <div id="timezone-info"></div>

JavaScript addition:

document.addEventListener("DOMContentLoaded", () => {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(position => {
            displayLocalTimeZone();
        });
    } else {
        document.getElementById('timezone-info').innerText = "Geolocation is not supported by this browser.";
    }
});

function displayLocalTimeZone() {
    const now = new Date();
    const timeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
    const localTime = now.toLocaleTimeString();
    const gmtOffset = -now.getTimezoneOffset() / 60; // in hours

    const timezoneInfo = `
        <p>Time Zone: ${timeZone}</p>
        <p>GMT Offset: ${gmtOffset} hours</p>
        <p>Local Time: ${localTime}</p>
    `;
    document.getElementById('timezone-info').innerHTML = timezoneInfo;
}

Older notes:

Here's the code to trigger geolocation:

if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition((position) => {
    const { latitude, longitude } = position.coords;
    console.log(`Latitude: ${latitude}, Longitude: ${longitude}`);
  });
} else {
  console.log('Geolocation is not supported by this browser.');
}

Note: All this does is bring up this alert: This will return the user's precise latitude and longitude, which is displayed in the Console window. At that point you're "in business", but you'll need to research how to use this data.

PatrickFrankAIU / GradeManagerProject

Right-Click Menu and Geolocation #9