Html – How can I solve the JS code problem to make my simple project better than before?

const hourHand = document.getElementById('hour');
const minuteHand = document.getElementById('minute');
const secondHand = document.getElementById('second');
const digitalClock = document.getElementById('digital-clock');

// Offset variables (to correct the delay)
const offsetHours = 3; // Analog clock is 3 hours ahead
const offsetMinutes = 15; // Analog clock is 15 minutes ahead
const offsetSeconds = 15; // Analog clock is 15 seconds ahead

function updateClock() {
  const now = new Date();

  // Adjust Bangladesh time for both clocks
  const localOffset = now.getTimezoneOffset() * 60 * 1000; // Local offset in milliseconds
  const bangladeshOffset = 6 * 60 * 60 * 1000; // Bangladesh offset in milliseconds (GMT+6)
  const bangladeshTime = new Date(now.getTime() + localOffset + bangladeshOffset);

  // Get digital time components
  const digitalHours = bangladeshTime.getHours();
  const digitalMinutes = bangladeshTime.getMinutes();
  const digitalSeconds = bangladeshTime.getSeconds();

  // Adjust analog clock by subtracting the offset
  const correctedHours = (digitalHours - offsetHours + 24) % 24; // Ensure valid 24-hour format
  const correctedMinutes = (digitalMinutes - offsetMinutes + 60) % 60; // Ensure valid 60 minutes
  const correctedSeconds = (digitalSeconds - offsetSeconds + 60) % 60; // Ensure valid 60 seconds

  // Calculate degrees for the analog clock hands
  const hourDeg = (360 / 12) * (correctedHours % 12) + (30 / 60) * correctedMinutes;
  const minuteDeg = (360 / 60) * correctedMinutes + (6 / 60) * correctedSeconds;
  const secondDeg = (360 / 60) * correctedSeconds;

  // Apply rotation to analog clock hands
  hourHand.style.transform = `rotate(${hourDeg}deg)`;
  minuteHand.style.transform = `rotate(${minuteDeg}deg)`;
  secondHand.style.transform = `rotate(${secondDeg}deg)`;

  // Update the digital clock display
  const formattedHours = digitalHours < 10 ? `0${digitalHours}` : digitalHours;
  const formattedMinutes = digitalMinutes < 10 ? `0${digitalMinutes}` : digitalMinutes;
  const formattedSeconds = digitalSeconds < 10 ? `0${digitalSeconds}` : digitalSeconds;
  const amPm = digitalHours >= 12 ? 'PM' : 'AM';

  digitalClock.textContent = `${formattedHours % 12 || 12}:${formattedMinutes}:${formattedSeconds} ${amPm}`;
}

// Update the clock every 1000ms (1 second)
setInterval(updateClock, 1000);

// Initialize the clock immediately
updateClock();

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  background: linear-gradient(to bottom, #f4f4f4, #ccc);
  font-family: 'Arial', sans-serif;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.clock {
  position: relative;
  width: 350px;
  height: 350px;
  border: 8px solid black;
  border-radius: 50%;
  background: white;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.center {
  position: absolute;
  width: 12px;
  height: 12px;
  background: black;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.hand {
  position: absolute;
  width: 50%;
  height: 6px;
  background: black;
  top: 50%;
  left: 50%;
  transform-origin: 0%;
  /* Ensure the hand rotates from the center */
  transform: translate(-50%, -50%);
  transition: transform 0.05s ease-in-out;
}

.hand {
  position: absolute;
  width: 50%;
  height: 6px;
  background: black;
  top: 50%;
  left: 50%;
  transform-origin: 0% 50%;
  /* Rotates around the base of the hand */
  transform: translate(-50%, -50%);
  transition: transform 0.05s ease-in-out;
}

.hour {
  width: 25%;
  height: 6px;
  background: black;
}

.minute {
  width: 40%;
  height: 4px;
  background: black;
}

.second {
  background: red;
  height: 2px;
}

.numbers {
  position: absolute;
  width: 100%;
  height: 100%;
}

.number {
  position: absolute;
  width: 40px;
  height: 40px;
  text-align: center;
  line-height: 40px;
  font-size: 1.2em;
  font-weight: bold;
  color: black;
  transform-origin: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(calc(var(--i) * 30deg)) translateY(-140px);
}

.number:after {
  content: attr(data-number);
  display: block;
  transform: rotate(calc(var(--i) * -30deg));
}

.digital-clock {
  margin-top: 20px;
  font-size: 2em;
  font-weight: bold;
  color: black;
  text-align: center;
  background: white;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

<div class="container">
  <!-- Analog Clock -->
  <div class="clock">
    <div class="numbers">
      <div class="number" style="--i: 1;" data-number="1"></div>
      <div class="number" style="--i: 2;" data-number="2"></div>
      <div class="number" style="--i: 3;" data-number="3"></div>
      <div class="number" style="--i: 4;" data-number="4"></div>
      <div class="number" style="--i: 5;" data-number="5"></div>
      <div class="number" style="--i: 6;" data-number="6"></div>
      <div class="number" style="--i: 7;" data-number="7"></div>
      <div class="number" style="--i: 8;" data-number="8"></div>
      <div class="number" style="--i: 9;" data-number="9"></div>
      <div class="number" style="--i: 10;" data-number="10"></div>
      <div class="number" style="--i: 11;" data-number="11"></div>
      <div class="number" style="--i: 12;" data-number="12"></div>
    </div>
    <div class="hand hour" id="hour"></div>
    <div class="hand minute" id="minute"></div>
    <div class="hand second" id="second"></div>
    <div class="center"></div>
  </div>
  <!-- Digital Clock -->
  <div class="digital-clock" id="digital-clock">
    00:00:00 AM
  </div>
</div>