<div id="example">
  <strong class="time"></strong>
  <h1>Domino Clock</h1>
  <div id="clock">
    <!-- Hour -->
    <div class="domino hour">
      <div class="top">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="divider"></div>
      <div class="bottom">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="dots">:</div>
    <!-- Minutes -->
    <div class="domino minutes">
      <div class="top">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="divider"></div>
      <div class="bottom">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="domino minutes">
      <div class="top">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="divider"></div>
      <div class="bottom">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="dots">:</div>
    <!-- Seconds -->
    <div class="domino seconds">
      <div class="top">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="divider"></div>
      <div class="bottom">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="domino seconds">
      <div class="top">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
      <div class="divider"></div>
      <div class="bottom">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
      </div>
    </div>
    <div class="sun"></div>
  </div>
</div>

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  background-color: #1f1f1f;
  height: 100%;
  color: #fff;
  font-family: "Roboto Condensed", sans-serif;
  display: grid;
  place-content: center;
  gap: 1rem;
}
#clock {
  display: flex;
  align-content: center;
  align-items: center;
  gap: 2em;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.8vw;
}

.domino {
  background: linear-gradient(
    292deg,
    rgba(3, 3, 3, 1) 2%,
    rgba(46, 46, 46, 1) 100%
  );
  width: 12em;
  padding: 2em;
  border-radius: 0.8em;
  box-shadow: inset 0.1em 0.1em 0.2em rgba(255, 255, 255, 0.2),
    inset -0.1em -0.1em 0.2em rgba(0, 0, 0, 0.9),
    0.1em 0.1em 2em rgba(0, 0, 0, 1);
}
.domino .divider {
  margin-top: 2em;
  width: 100%;
  height: 0.3em;
  background-color: #000;
  box-shadow: inset 0 -0.15em 0.15em rgba(255, 255, 255, 0.2);
  margin-bottom: 2em;
  border-radius: 0.3rem;
}
.dots {
  font-size: 3em;
}
.sun {
  font-size: 5em;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
}
.time {
  font-size: 1em;
  font-weight: bold;
  color: rgba(255, 255, 255, 0.6);
}
.domino .top,
.domino .bottom {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1em;
}
.domino span {
  display: flex;
  width: 100%;
  aspect-ratio: 1/1;
  background-color: #fff;
  border-radius: 50%;
  transition: all 0.2s ease;
  transform: scale(0.5);
  opacity: 0.05;
}
.domino span.active {
  transition: all 0.2s ease;
  transform: scale(1);
  opacity: 1;
}

const numbersDots = {
  0: [],
  1: [5],
  2: [1, 9],
  3: [1, 5, 9],
  4: [1, 3, 7, 9],
  5: [1, 3, 5, 7, 9],
  6: [1, 3, 4, 6, 7, 9],
}

const dom = {
  hour: document.querySelectorAll(".hour"),
  minutes: document.querySelectorAll(".minutes"),
  seconds: document.querySelectorAll(".seconds"),
  sun: document.querySelector(".sun"),
  time: document.querySelector(".time"),
}

const clearDomino = function (dominos) {
  dominos.forEach(function (domino) {
    domino.querySelectorAll("span.active").forEach(function (dot) {
      dot.classList.remove("active")
    })
  })
}

const setPoints = function (dots, domino) {
  dots.top.forEach(function (dot) {
    const dotElm = domino.querySelector(`.top span:nth-child(${dot})`)
    if (dotElm) {
      dotElm.classList.add("active")
    }
  })
  dots.bottom.forEach(function (dot) {
    const dotElm = domino.querySelector(`.bottom span:nth-child(${dot})`)
    if (dotElm) {
      dotElm.classList.add("active")
    }
  })
}
const setDomino = function (dominos, value) {
  clearDomino(dominos)
  const numbers = value.toString().split("")
  let n1 = numbers.length === 2 ? parseInt(numbers[0]) : 0
  let n2 = numbers.length === 2 ? parseInt(numbers[1]) : parseInt(numbers[0])
  if (dominos.length === 1) {
    // Hour
    const dots = getDots(value)
    setPoints(dots, dominos[0])
  } else {
    const dotsFirst = getDots(n1)
    const dotsSecond = getDots(n2)
    setPoints(dotsFirst, dominos[0])
    setPoints(dotsSecond, dominos[1])
  }
}

const getDots = function (n) {
  // x + y = 6
  const first = n > 6 ? n - 6 : parseInt(n / 2)
  const second = Math.abs(n - first)

  return {
    top: numbersDots[first],
    bottom: numbersDots[second],
  }
}
setInterval(() => {
  const date = new Date()
  const hour = date.getHours() > 12 ? date.getHours() - 12 : date.getHours()
  const minutes = date.getMinutes()
  const seconds = date.getSeconds()
  setDomino(dom.hour, hour)
  setDomino(dom.minutes, minutes)
  setDomino(dom.seconds, seconds)
  dom.sun.innerText = date.getHours() >= 12 ? "PM" : "AM"
  dom.time.innerText = date.toLocaleTimeString()
}, 1000)