Mostly CSS Clock...

I actually created a CSS only clock just to see if I could do it. But although it worked, it was calculating the seconds which was not accurate at all 😁

So, I created a MOSTLY CSS Clock… Which you can see on CodePen.io → https://codepen.io/jessicabrown1028/pen/RNbeKEd

This clock, which honestly is nothing fancy, just some basic CSS, basic HTML, and stupid JavaScript to get your local time and sync the seconds… Pfft!

@import url("https://fonts.cdnfonts.com/css/lcd"); /* Retro Digital Font */

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #1d1e22;
}

.clock {
  width: 250px;
  height: 250px;
  border-radius: 50%;
  border: 5px solid white;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Center dot */
.clock::before {
  content: "";
  width: 8px;
  height: 8px;
  background: white;
  border-radius: 50%;
  position: absolute;
  z-index: 10;
}

/* Digital Clock Display */
.digital-display {
  position: absolute;
  top: 65%;
  transform: translateY(-50%);
  font-size: 20px;
  font-family: "LCD", sans-serif;
  color: red;
  background: black;
  padding: 8px 12px;
  border-radius: 5px;
  box-shadow: 0 0 5px red;
  text-align: center;
  width: 105px;
  display: flex;
  justify-content: space-between;
}

/* Style for AM/PM text */
#ampm {
  font-size: 14px;
  margin-left: 5px;
}

/* Hour Markers */
.hour-markers {
  position: absolute;
  width: 100%;
  height: 100%;
}

.hour-markers div {
  position: absolute;
  left: 48%;
  top: 46%;
  width: 0px;
  height: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  color: bisque;
  transform-origin: center;
}

/* Position the numbers inside the clock */
.hour-markers div:nth-child(1) {
  transform: rotate(30deg) translateY(-100px) rotate(-30deg);
  content: "1";
}
.hour-markers div:nth-child(2) {
  transform: rotate(60deg) translateY(-100px) rotate(-60deg);
  content: "2";
}
.hour-markers div:nth-child(3) {
  transform: rotate(90deg) translateY(-100px) rotate(-90deg);
  content: "3";
}
.hour-markers div:nth-child(4) {
  transform: rotate(120deg) translateY(-100px) rotate(-120deg);
  content: "4";
}
.hour-markers div:nth-child(5) {
  transform: rotate(150deg) translateY(-100px) rotate(-150deg);
  content: "5";
}
.hour-markers div:nth-child(6) {
  transform: rotate(180deg) translateY(-100px) rotate(-180deg);
  content: "6";
}
.hour-markers div:nth-child(7) {
  transform: rotate(210deg) translateY(-100px) rotate(-210deg);
  content: "7";
}
.hour-markers div:nth-child(8) {
  transform: rotate(240deg) translateY(-100px) rotate(-240deg);
  content: "8";
}
.hour-markers div:nth-child(9) {
  transform: rotate(270deg) translateY(-100px) rotate(-270deg);
  content: "9";
}
.hour-markers div:nth-child(10) {
  transform: rotate(300deg) translateY(-100px) rotate(-300deg);
  content: "10";
}
.hour-markers div:nth-child(11) {
  transform: rotate(330deg) translateY(-100px) rotate(-330deg);
  content: "11";
}
.hour-markers div:nth-child(12) {
  transform: rotate(0deg) translateY(-100px);
  content: "12";
}

/* Clock Hands */
.hand {
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform-origin: bottom;
  background: white;
  border-radius: 5px;
  transform: translateX(-50%) rotate(0deg);
}

.hour {
  width: 6px;
  height: 60px;
  background: aquamarine;
}

.minute {
  width: 4px;
  height: 80px;
  background: darksalmon;
}

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

<div class="clock">
  <div class="hour-markers">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>10</div>
    <div>11</div>
    <div>12</div>
  </div>

  <!-- Digital Display with AM/PM -->
  <div class="digital-display" id="digital-clock">
    <span id="time">00:00:00</span> <span id="ampm">AM</span>
  </div>

  <!-- Clock hands -->
  <div class="hand hour" id="hour-hand"></div>
  <div class="hand minute" id="minute-hand"></div>
  <div class="hand second" id="second-hand"></div>
</div>

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

  let hours = now.getHours();
  const minutes = now.getMinutes();
  const seconds = now.getSeconds();

  // Determine AM or PM
  const ampm = hours >= 12 ? "PM" : "AM";

  // Convert to 12-hour format
  hours = hours % 12 || 12; // Converts 0 to 12 for midnight

  // Calculate rotation angles
  const hourDeg = hours * 30 + minutes * 0.5;
  const minuteDeg = minutes * 6 + seconds * 0.1;
  const secondDeg = seconds * 6;

  // Apply rotation to clock hands
  document.getElementById(
    "hour-hand"
  ).style.transform = `translateX(-50%) rotate(${hourDeg}deg)`;
  document.getElementById(
    "minute-hand"
  ).style.transform = `translateX(-50%) rotate(${minuteDeg}deg)`;
  document.getElementById(
    "second-hand"
  ).style.transform = `translateX(-50%) rotate(${secondDeg}deg)`;

  // Format digital clock display
  const formattedHours = String(hours).padStart(2, "0");
  const formattedMinutes = String(minutes).padStart(2, "0");
  const formattedSeconds = String(seconds).padStart(2, "0");

  // Update time and AM/PM display
  document.getElementById(
    "time"
  ).innerText = `${formattedHours}:${formattedMinutes}:${formattedSeconds}`;
  document.getElementById("ampm").innerText = ampm;
}

// Run clock update every second
setInterval(updateClock, 1000);

// Initialize the clock immediately
updateClock();