Building an Analog Clock with HTML, CSS, and JavaScript

The Analog Clock:

Fusing Style and Utility Beyond its role as a timekeeping device, our analog clock is a masterpiece that effortlessly combines both aesthetics and functionality. It's not just a tool for telling time; it's a visual delight designed for easy readability, making it a perfect enhancement for any website or project. The Significance of Analog Clocks Analog clocks go beyond mere timekeeping; they evoke emotions and trigger memories. The rhythmic ticking and fluid movement of the hands create a serene and reflective atmosphere. In a digitally precise world, analog clocks serve as a reminder of a simpler, more analog way of life. Why Incorporate an Analog Clock into Your Website? Before delving into the technical aspects, let's explore the reasons why integrating an analog clock into your website is a fantastic idea: Aesthetic Allure: Analog clocks radiate a timeless charm that can elevate the visual appeal of your website. They seamlessly complement various themes and design styles. Practicality: An analog clock isn't just visually pleasing; it serves a practical purpose. It aids users in timekeeping, particularly beneficial for websites featuring time-sensitive content or events. Enhanced Engagement: Interactive features like clocks contribute to increased user engagement. Visitors may find the analog clock captivating, leading them to spend more time exploring your site.



<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Analog CLock</title>
  
<style>
	@import url("https://fonts.googleapis.com/css2?family=Comfortaa:wght@300;400;500;600;700&display=swap");
*, *:afater, *:before {
  box-sizing: border-box;
}

body, html {
  background: #000;
  margin: 0;
  height: 100vh;
  color: #fff;
  font-family: "Comfortaa", cursive;
}

.clock {
  --clock-size: 360px;
  width: var(--clock-size);
  height: var(--clock-size);
  position: fixed;
  inset: 0;
  margin: auto;
  border-radius: 50%;
}
.spike {
  position: absolute;
  width: 8px;
  height: 1px;
  background: #fff9;
  line-height: 20px;
  transform-origin: 50%;
  z-index: 5;
  inset: 0;
  margin: auto;
  font-style: normal;
  transform: rotate(var(--rotate)) translateX(var(--dail-size));
}
.spike:nth-child(5n+1) {
  box-shadow: -7px 0 #fff9;
}
.spike:nth-child(5n+1):after {
  content: attr(data-i);
  position: absolute;
  right: 22px;
  top: -10px;
  transition: 1s linear;
  transform: rotate(calc( var(--dRotate) - var(--rotate)));
}

.seconds {
  --dRotate: 0deg;
  --dail-size: calc((var(--clock-size)/ 2) - 8px);
  font-weight: 800;
  font-size: 18px;
  transform: rotate(calc( -1 * var(--dRotate)));
  position: absolute;
  inset: 0;
  margin: auto;
  transition: 1s linear;
}

.minutes {
  --dail-size: calc((var(--clock-size)/ 2) - 65px);
  font-size: 16px;
  transform: rotate(calc( -1 * var(--dRotate)));
  position: absolute;
  inset: 0;
  margin: auto;
  transition: 1s linear;
}

.stop-anim {
  transition: 0s linear;
}
.stop-anim .spike:after {
  transition: 0s linear !important;
}

.hour {
  font-size: 70px;
  font-weight: 900;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.minute {
  font-size: 36px;
  font-weight: 900;
  position: absolute;
  background: #000;
  z-index: 10;
  right: calc(var(--clock-size)/ 4.5);
  top: 50%;
  transform: translateY(-50%);
}
.minute:after {
  content: "";
  position: absolute;
  border: 2px solid #fff;
  border-right: none;
  height: 50px;
  left: -10px;
  top: 50%;
  border-radius: 40px 0 0 40px;
  width: calc(var(--clock-size)/ 2.75);
  transform: translatey(-50%);
}
</style>
</head>
<body>

<second class="clock">
  <div class="seconds"></div>
  <div class="minutes"></div>
  <div class="minute">44</div>
  <div class="hour"></div>
</second>

  <script>
	const seconds = document.querySelector('.seconds');
const minutes = document.querySelector('.minutes');
const minute = document.querySelector('.minute');
const hour = document.querySelector('.hour');

// Create spikes
for(let s = 0; s < 60 ; s++){
  let mSpikeEl = document.createElement('i');
  let sSpikeEl = document.createElement('i');
  mSpikeEl.className = 'spike'
  sSpikeEl.className = 'spike'
  mSpikeEl.style = `--rotate:${6 * s}deg`;
  sSpikeEl.style = `--rotate:${6 * s}deg`;
  mSpikeEl.setAttribute('data-i', s);
  sSpikeEl.setAttribute('data-i', s);

  seconds.append(sSpikeEl);
  minutes.append(mSpikeEl);
}

function getTime() {
		let date = new Date(),
    s  = date.getSeconds() ,
    m  = date.getMinutes();
  
  	hour.textContent = date.getHours();
  	minute.textContent = m;
  

  	minutes.style = `--dRotate:${6 * m}deg`;

    if(s == 0){
			seconds.classList.add('stop-anim')
    } else{
      seconds.classList.remove('stop-anim')
    }
    if(m == 0){
			minutes.classList.add('stop-anim')
    } else{
      minutes.classList.remove('stop-anim')
    }
  	
  		seconds.style = `--dRotate:${6 * s}deg`;
}






setInterval(getTime, 1000);
getTime();
  </script>

</body>
</html>

Building an Analog Clock with HTML, CSS, and JavaScript

The Analog Clock: