Code for Time

The html for the clocks, if you run it through an AI you can have just a nice neat world clock on your page.

<!DOCTYPE html>




body {

    font-family: 'Open Sans', sans-serif;

    font-size: 1.6em;

    text-align: center;

    font-weight: 25;


h3 {

    font-family: 'Open Sans', sans-serif;

    font-size: 1.4em;

    text-align: center;

    font-weight: 25;


.clock {

    display: inline-block;

    margin-right: 20px;

    margin-bottom: 10px; /* Add some space between clocks */


.city {

    font-size: 20px;

    cursor: help; /* Change cursor to indicate hover interaction */

    border-bottom: 1px dotted black; /* Add a dotted underline */


/* Tooltip container */

.tooltip {

    position: relative;

    display: inline-block;


/* Tooltip text */

.tooltip .tooltiptext {

    visibility: hidden;

    width: 120px; 

    background-color: black;

    color: #fff;

    text-align: center;

    padding: 5px 0;

    border-radius: 6px;

    position: absolute;

    z-index: 1;

    bottom: 100%;

    left: 50%;

    margin-left: -60px;

    font-family: Arial, sans-serif; /* Arial font for time */

    font-size: 1em; /* Slightly smaller font for time */


/* Show the tooltip text on hover */

.tooltip:hover .tooltiptext {

    visibility: visible;






  <div id="clocks">



    const cityTimes = {

        "Sydney": "Australia/Sydney",

        "Melbourne": "Australia/Melbourne",

        "Canberra": "Australia/Canberra",

        "Perth": "Australia/Perth",

        "Adelaide": "Australia/Adelaide",

        "Hobart": "Australia/Hobart",

        "Darwin": "Australia/Darwin",

        "Brisbane": "Australia/Brisbane",

        "Christmas Island": "Indian/Christmas",

        "Port Moresby (PNG)": "Pacific/Port_Moresby",

        "Nouméa (New Caledonia)": "Pacific/Noumea",

        "Suva (Fiji)": "Pacific/Fiji",

        "Nauru": "Pacific/Nauru",

        "Rarotonga (Cook Islands)": "Pacific/Rarotonga",

        "Apia (Samoa)": "Pacific/Apia",

        "Nuku'alofa (Tonga)": "Pacific/Tongatapu"


    const clocksDiv = document.getElementById("clocks");

    for (const city in cityTimes) {

        const clockDiv = document.createElement("div");

        clockDiv.className = "clock tooltip";

        const citySpan = document.createElement("span");

        citySpan.className = "city";

        citySpan.textContent = city;

        const tooltipSpan = document.createElement("span");

        tooltipSpan.className = "tooltiptext"; = city.replace(/\s+/g, '').toLowerCase(); // Convert city name to lowercase and remove spaces for ID





    function updateClocks() {

      const now = new Date();

      for (const city in cityTimes) {

        const timeElement = document.getElementById(city.replace(/\s+/g, '').toLowerCase()); // Ensure correct ID for elements

        if (timeElement) {

          const timeString = now.toLocaleTimeString('en-AU', { timeZone: cityTimes[city] });

          timeElement.textContent = timeString;





    setInterval(updateClocks, 1000); // Update every second

    updateClocks(); // Initial call