Analog/Digital Clock with Global Timezone and Dark Mode Support

This is a JavaScript (jQuery) and CSS based clock that features both analog and digital displays, timezone selection across major global regions, and a dark mode option for varied viewing preferences.

Features:

• Real-time analog clock display with hour, minute, and second hands
• Digital time readout with AM/PM indicator
• Global timezone selection spanning multiple continents
• Dark mode toggle with animated sun/moon transition
• Responsive layout that adapts to different screen sizes

How to use it:

1. Set up the basic structure for the clock's hands. This code creates the hour, minute, and second hands. The <i> tags within each hand will be styled using CSS. The markers represent the numbers 12, 3, 6, and 9 on the clock face.

<div class="clock">
  <div style="--clr: #4f4d70; --h: 44px" id="hour" class="hand">
    <i></i>
  </div>
  <div style="--clr: #575979; --h: 64px" id="min" class="hand">
    <i></i>
  </div>
  <div style="--clr: #8687ac; --h: 74px" id="sec" class="hand">
    <i></i>
  </div>
  <!-- Markers for 12, 3, 6, 9 -->
  <span class="marker" style="--rotation: 0deg">|</span>
  <span class="marker" style="--rotation: 90deg">|</span>
  <span class="marker" style="--rotation: 180deg">|</span>
  <span class="marker" style="--rotation: 270deg">|</span>
</div>

2. Add the digital time display below the analog clock.

<div class="digital-time">
  <span id="time"></span>
  <span id="time_between"></span>
  <p id="date"></p>
</div>

3. Create a dropdown for selecting different timezones:

<div class="timezone-selector">
  <label for="timezone">Select a Timezone:</label>
  <select id="timezone"></select>
</div>
<div class="other-time">
  <span id="loaction"></span>
  <span id="otherTime"></span>
</div>

4. Include a button to switch between light and dark modes:

<button id="modeToggle" class="mode-toggle">
  <i class="fa-solid fa-moon fa-rotate-by" style="--fa-rotate-angle: -20deg;"></i>
</button>

5. Apply the following CSS to style the clock. These styles control the appearance of the clock, including its colors, layout, and responsiveness. You are free to modify these styles.

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #efeef5;
  transition: background-color 0.9s ease, color 0.9s ease;
}

/* Dark Mode */
body.dark-mode {
  background-color: #181732;
  color: #ffffff;
}

/* Dark mode specific styles for the clock */
body.dark-mode .clock {
  border: none;
}

/* Icon in the button */
.mode-toggle {
  background: none;
  border: none;
  font-size: 24px;
  color: inherit;
  cursor: pointer;
  position: relative;
  left: 150px;
  bottom: 20px;
  transition: transform 0.5s ease;
}

body.dark-mode .mode-toggle {
  transform: rotate(180deg); /* Rotate the icon in dark mode */
}

.timezone-selector label {
  display: flex;
  justify-content: center;
  margin: 15px 0;
}

.other-time {
  display: flex;
  justify-content:space-between;
  background-color: #181732;
  color: #ffffff;
  padding: 20px;
  border-radius: 15px;
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  align-items: center;
}

body.dark-mode .other-time {
  background-image: linear-gradient(to right, #dbd2fb, #fdfdff, #dbd2fb);
  color: #181732;
}

span#loaction {
  font-size: 14px;
  line-height: 24px;
  word-break: break-word;
  max-width: 115px;
  text-align: left;
}

span#otherTime {
  font-size: 20px;
}

select#timezone {
  max-width: 270px;
  padding: 10px;
  margin-bottom: 25px;
  border: 1px solid #181732;
  border-radius: 10px;
  outline: none;
  background-image: linear-gradient(to right, #dbd2fb, #fdfdff, #dbd2fb);
}

.container {
  text-align: center;
}

.clock {
  position: relative;
  width: 250px;
  height: 250px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.25);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
}

.clock::before {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: #6c67bf;
  z-index: 2;
}

.marker {
  position: absolute;
  transform: rotate(var(--rotation)) translateY(-119px);
  font-size: 12px;
  color: #8f8e8e;
  font-weight: bold;
}

.hand {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.hand i {
  position: absolute;
  background-color: var(--clr);
  width: 4px;
  height: var(--h);
  border-radius: 8px;
}

/* Digital Time and Date Styles */

.digital-time #time{
  font-weight: bold;
  color: #181732;
  font-size: 36px;
}

.digital-time #time_between{
  font-size: 16px;
  padding-left: 8px;
  color: #181732;
  font-weight: bold;
}


.digital-time #date {
  font-size: 16px;
  color: #717277;
}

body.dark-mode .digital-time #time,
body.dark-mode .digital-time #time_between{
  color: #ffffff;
}

6. Load the necessary jQuery library and Font Awesome iconic font in the document.

<script src="/path/to/cdn/jquery.min.js"></script>
<link href="/path/to/font-awesome/all.min.css" rel="stylesheet" />

7. Add the JavaScript code to make the clock work. The script updates time every second, rotates clock hands via CSS transforms, and switches themes. Timezone data populates a dropdown, and toLocaleTimeString converts times based on the selected zone.

// JavaScript to toggle dark/light mode
const modeToggle = document.getElementById('modeToggle');
const body = document.body;

modeToggle.addEventListener('click', () => {
  body.classList.toggle('dark-mode');
  // Toggle the icon text between moon and sun
  if (body.classList.contains('dark-mode')) {
      modeToggle.innerHTML = '<i class="fa-solid fa-sun"></i>';
  } else {
      modeToggle.innerHTML = '<i class="fa-solid fa-moon fa-rotate-by" style="--fa-rotate-angle: -20deg;"></i>';
  }
});

$(document).ready(function () {
  function displayTime() {
      let date = new Date();

      // Local time calculations
      let hh = date.getHours();
      let mm = date.getMinutes();
      let ss = date.getSeconds();
      let ampm = hh >= 12 ? 'PM' : 'AM';
      hh = hh % 12 || 12; // Convert 24-hour time to 12-hour format
      let time = `${hh.toString().padStart(2, '0')}:${mm.toString().padStart(2, '0')}:${ss.toString().padStart(2, '0')}`;
      let time_between = `${ampm}`;
      $('#time').text(time);
      $('#time_between').text(time_between);

      // Update the analog clock
      let hRotation = 30 * hh + mm / 2;
      let mRotation = 6 * mm;
      let sRotation = 6 * ss;
      $('#hour').css('transform', `rotate(${hRotation}deg)`);
      $('#min').css('transform', `rotate(${mRotation}deg)`);
      $('#sec').css('transform', `rotate(${sRotation}deg)`);

      // Update the date
      const options = { day: '2-digit', month: 'short', year: 'numeric' };
      let currentDate = date.toLocaleDateString(undefined, options);
      $('#date').text(currentDate);
  }
  // Initial call to display time
  setInterval(displayTime, 1000);

  displayTime();
  const timezones = [
      // Africa
      "Africa/Cairo", "Africa/Nairobi", "Africa/Johannesburg", "Africa/Lagos", "Africa/Algiers", "Africa/Accra", "Africa/Abidjan",
      
      // America
      "America/New_York", "America/Los_Angeles", "America/Chicago", "America/Denver", "America/Argentina/Buenos_Aires", "America/Mexico_City",
      "America/Toronto", "America/Sao_Paulo", "America/Caracas", "America/Lima", "America/Chicago", "America/Edmonton",
      
      // Europe
      "Europe/London", "Europe/Paris", "Europe/Berlin", "Europe/Rome", "Europe/Moscow", "Europe/Amsterdam", "Europe/Madrid",
      "Europe/Brussels", "Europe/Stockholm", "Europe/Zurich", "Europe/Vienna", "Europe/Oslo",
      
      // Asia
      "Asia/Kolkata", "Asia/Tokyo", "Asia/Seoul", "Asia/Shanghai", "Asia/Singapore", "Asia/Hong_Kong", "Asia/Kuala_Lumpur", 
      "Asia/Baghdad", "Asia/Dubai", "Asia/Jakarta", "Asia/Manila", "Asia/Karachi", "Asia/Taipei",
      
      // Australia
      "Australia/Sydney", "Australia/Melbourne", "Australia/Perth", "Australia/Brisbane",
      
      // Pacific
      "Pacific/Auckland", "Pacific/Fiji", "Pacific/Honolulu"
  ];
  
  // Populate the dropdown
  const timezoneDropdown = $('#timezone');
  timezones.forEach(zone => {
      timezoneDropdown.append(new Option(zone, zone));
  });

  // Function to update the time based on the selected timezone
  function updateOtherTimezoneTime() {
      const timezone = timezoneDropdown.val();
      const date = new Date().toLocaleDateString('en-US', { 
          timeZone: timezone, 
          day: '2-digit', 
          month: 'short', 
          year: 'numeric' 
        });
        
      const times = new Date().toLocaleTimeString('en-US', { 
          timeZone: timezone, 
          hour: '2-digit', 
          minute: '2-digit', 
          hour12: true 
      });

      $('#loaction').html(`${timezone}</br>${date}`);
      $('#otherTime').html(`${times}`);
      

  }

  // Initial update and periodic updates
  timezoneDropdown.on('change', updateOtherTimezoneTime);
  setInterval(updateOtherTimezoneTime, 1000);

  // Trigger an initial time display
  updateOtherTimezoneTime();
  
});

---

This awesome jQuery plugin is developed by Snehalmoundekar. For more Advanced Usages, please check the demo page or visit the official website.