JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<div id="clock">
  <div class="hour centered"></div>
  <div class="minute centered"></div>
  <div class="second centered"></div>
  <div class="centered circle"></div>
  <p class="display-time"></p>
</div>
<div id="clock-1"></div>
<div id="clock-2"></div>

CSS

#clock {
  position: relative;
  width: 200px;
  height: 200px;
  background-color: #ccc;
  border-radius: 50%;
}

.display-time {
  position: absolute;
  bottom: -50px;
  left: 50%;
  transform: translateX(-50%);
}

#clock .centered {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 7px;
  transform: translate(-50%, -50%);
}

#clock .hour {
  width: 70px;
  height: 20px;
  background-color: yellow;
}

#clock .minute {
  width: 80px;
  height: 14px;
  background-color: green;
}

#clock .second {
  width: 90px;
  height: 10px;
  background-color: blue;
}

#clock .circle {
  width: 20px;
  height: 20px;
  background-color: red;
  border-radius: 50%;
}

JavaScript

if(gmt == 'Africa'){
	
}

getClock('clock-1', 0);
getClock('clock-2', 3);

function getClock(elId, delta) {
	let el = document.getElementById(elId);
  // создание стрелок
  // запустить таймер (setInterval)
  // функция отрисовки стрелок по таймеру
  // document.createElement
  // el.setAttribute
  // el.appendChild
}





let hour = document.querySelector('.hour');
let minute = document.querySelector('.minute');
let second = document.querySelector('.second');
let displayTime = document.querySelector('.display-time');

function getTime(hour) {
  let date = new Date();
  let hours = date.getHours();
  let minutes = date.getMinutes();
  let seconds = date.getSeconds();
  console.log(hours + ' ' + minutes + ' ' + seconds);
  let calcHours = hours * (360 / 12) - 90;
  hour.style.transform = 'rotate(' + calcHours + 'deg)';
  let calcMinutes = minutes * (360 / 60) - 90;
  minute.style.transform = 'rotate(' + calcMinutes + 'deg)';
  let calcSeconds = seconds * (360 / 60) - 90;
  second.style.transform = 'rotate(' +  calcSeconds + 'deg)';
  displayTime.innerHTML = hours + ':' + minutes + ':' + seconds;
}


setInterval(getTime, 1000);