bojidaryovchev/clock.html

## clock.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .clock {
        background: #414141;
        width: 200px;
        height: 200px;
        border-radius: 50%;
        position: relative;
        border: 2px solid #008eff;
      }

      .clock .clock-tick-wrapper {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
      }

      .clock .clock-tick {
        position: absolute;
        width: 2px;
        height: 8px;
        background: white;
        left: calc(50% - 1px);
      }

      .clock .clock-digit {
        color: white;
        margin-top: 14px;
      }

      .clock .clock-tick.clock-tick-hour {
        height: 12px;
      }

      .clock .clock-circle {
        width: 8px;
        height: 8px;
        background: red;
        position: absolute;
        left: calc(50% - 4px);
        top: calc(50% - 4px);
        border-radius: 50%;
        z-index: 1;
      }

      .clock .clock-seconds,
      .clock .clock-minutes,
      .clock .clock-hours {
        position: absolute;
        width: 100%;
        height: 100%;
      }

      .clock .clock-seconds-arrow {
        background: white;
        width: 2px;
        height: calc(50% - 16px);
        left: calc(50% - 1px);
        top: 16px;
        position: absolute;
      }

      .clock .clock-minutes-arrow {
        background: white;
        width: 2px;
        height: 36%;
        left: calc(50% - 1px);
        top: calc(50% - 36%);
        position: absolute;
      }

      .clock .clock-hours-arrow {
        background: white;
        width: 2px;
        height: 30%;
        left: calc(50% - 1px);
        top: calc(50% - 30%);
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="clock">
      <div class="clock-circle"></div>

      <div class="clock-seconds">
        <div class="clock-seconds-arrow"></div>
      </div>

      <div class="clock-minutes">
        <div class="clock-minutes-arrow"></div>
      </div>

      <div class="clock-hours">
        <div class="clock-hours-arrow"></div>
      </div>
    </div>

    <script>
      function initClockTicks(clock) {
        for (let i = 0; i < 60; i++) {
          const tickWrapper = document.createElement('div');

          tickWrapper.classList.add('clock-tick-wrapper');

          const delta = 90 / 15;

          tickWrapper.style.transform = `rotate(${i * delta}deg)`;

          const tick = document.createElement('div');

          tick.classList.add('clock-tick');

          let digit;

          if (i % 5 === 0) {
            tick.classList.add('clock-tick-hour');

            digit = document.createElement('div');

            digit.classList.add('clock-digit');

            digit.style.transform = `rotate(-${i * delta}deg)`;

            digit.innerHTML = `${Math.floor(i / 5) || 12}`;
          }

          tickWrapper.appendChild(tick);

          if (digit) {
            tickWrapper.appendChild(digit);
          }

          clock.appendChild(tickWrapper);
        }
      }

      initClockTicks(document.querySelector('.clock'));

      function updateArrows(date) {
        const secondsArrow = document.querySelector('.clock-seconds');
        const secondsDegrees = (date.getSeconds() * 90) / 15;

        secondsArrow.style.transform = `rotate(${secondsDegrees}deg)`;

        const minutesArrow = document.querySelector('.clock-minutes');
        const minutesDegrees = (date.getMinutes() * 90) / 15 + secondsDegrees / 60;

        minutesArrow.style.transform = `rotate(${minutesDegrees}deg)`;

        const hoursArrow = document.querySelector('.clock-hours');
        const hoursDegrees = date.getHours() * 30 + minutesDegrees / 12;

        hoursArrow.style.transform = `rotate(${hoursDegrees}deg)`;
      }

      updateArrows(new Date());

      setTimeout(() => {
        updateArrows(new Date());

        setInterval(() => {
          updateArrows(new Date());
        }, 1000);
      }, 1000 - new Date().getMilliseconds());
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>

	<style>
	.clock {
	background: #414141;
	width: 200px;
	height: 200px;
	border-radius: 50%;
	position: relative;
	border: 2px solid #008eff;
	}

	.clock .clock-tick-wrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	text-align: center;
	}

	.clock .clock-tick {
	position: absolute;
	width: 2px;
	height: 8px;
	background: white;
	left: calc(50% - 1px);
	}

	.clock .clock-digit {
	color: white;
	margin-top: 14px;
	}

	.clock .clock-tick.clock-tick-hour {
	height: 12px;
	}

	.clock .clock-circle {
	width: 8px;
	height: 8px;
	background: red;
	position: absolute;
	left: calc(50% - 4px);
	top: calc(50% - 4px);
	border-radius: 50%;
	z-index: 1;
	}

	.clock .clock-seconds,
	.clock .clock-minutes,
	.clock .clock-hours {
	position: absolute;
	width: 100%;
	height: 100%;
	}

	.clock .clock-seconds-arrow {
	background: white;
	width: 2px;
	height: calc(50% - 16px);
	left: calc(50% - 1px);
	top: 16px;
	position: absolute;
	}

	.clock .clock-minutes-arrow {
	background: white;
	width: 2px;
	height: 36%;
	left: calc(50% - 1px);
	top: calc(50% - 36%);
	position: absolute;
	}

	.clock .clock-hours-arrow {
	background: white;
	width: 2px;
	height: 30%;
	left: calc(50% - 1px);
	top: calc(50% - 30%);
	position: absolute;
	}
	</style>
	</head>
	<body>
	<div class="clock">
	<div class="clock-circle"></div>

	<div class="clock-seconds">
	<div class="clock-seconds-arrow"></div>
	</div>

	<div class="clock-minutes">
	<div class="clock-minutes-arrow"></div>
	</div>

	<div class="clock-hours">
	<div class="clock-hours-arrow"></div>
	</div>
	</div>

	<script>
	function initClockTicks(clock) {
	for (let i = 0; i < 60; i++) {
	const tickWrapper = document.createElement('div');

	tickWrapper.classList.add('clock-tick-wrapper');

	const delta = 90 / 15;

	tickWrapper.style.transform = `rotate(${i * delta}deg)`;

	const tick = document.createElement('div');

	tick.classList.add('clock-tick');

	let digit;

	if (i % 5 === 0) {
	tick.classList.add('clock-tick-hour');

	digit = document.createElement('div');

	digit.classList.add('clock-digit');

	digit.style.transform = `rotate(-${i * delta}deg)`;

	digit.innerHTML = `${Math.floor(i / 5) \|\| 12}`;
	}

	tickWrapper.appendChild(tick);

	if (digit) {
	tickWrapper.appendChild(digit);
	}

	clock.appendChild(tickWrapper);
	}
	}

	initClockTicks(document.querySelector('.clock'));

	function updateArrows(date) {
	const secondsArrow = document.querySelector('.clock-seconds');
	const secondsDegrees = (date.getSeconds() * 90) / 15;

	secondsArrow.style.transform = `rotate(${secondsDegrees}deg)`;

	const minutesArrow = document.querySelector('.clock-minutes');
	const minutesDegrees = (date.getMinutes() * 90) / 15 + secondsDegrees / 60;

	minutesArrow.style.transform = `rotate(${minutesDegrees}deg)`;

	const hoursArrow = document.querySelector('.clock-hours');
	const hoursDegrees = date.getHours() * 30 + minutesDegrees / 12;

	hoursArrow.style.transform = `rotate(${hoursDegrees}deg)`;
	}

	updateArrows(new Date());

	setTimeout(() => {
	updateArrows(new Date());

	setInterval(() => {
	updateArrows(new Date());
	}, 1000);
	}, 1000 - new Date().getMilliseconds());
	</script>
	</body>
	</html>