Clock Train in JavaScript

Welcome to my blog, In this article you can build a Clock Train in HTML, CSS, JavaScript it is javascript clock that works like train clock.

Current Video Link:

If you want to watch more videos subscribe my YouTube channelĀ click here

Javascript Clock HTML :

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Clock Coding Train</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="./style.css">
</head>
<body>
  <script  src="./script.js"></script>
</body>
</html>

Javascript Clock CSS :

Now design the train clock, firstly we design the static part of the page like set background color, font color, and align text in the center. after that set, the clock position the train clock align center and set the height and width of the javascript clock. the active digits in the clock set the rotation and increase the font size of the digit see the complete part of CSS below :

@import url("https://fonts.googleapis.com/css?family=Old+Standard+TT");
html,
body {
  font-family: "Old Standard TT", serif;
  background-color: #1f1f1f;
  margin: 0;
  font-size: 0;
  color: white;
  text-align: center;
  overflow: hidden;
}
#clock {
  font-size: 24px;
  width: 350px;
  height: 350px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -175px;
  margin-top: -175px;
}
.digit-group {
  display: inline-block;
  height: 350px;
}
.digit-group:not(:last-child):after {
  content: ":";
  font-size: 72px;
}
.digit {
  display: inline-block;
  width: 50px;
  height: 350px;
}
.digit .digit-number {
  color: rgba(255, 255, 255, 32%);
  transform: rotate(-90deg);
  transition: font-size 200ms, transform 350ms, color 150ms;
}
.digit .digit-number.highlight {
  color: inherit;
  font-size: 72px;
  transform: rotate(0deg);
}

Clock JavaScript :

The Clock Train javascript part first we take 3 variables _timeElement10Digits,_timeElement6Digits,_timeElement3Digits generate numbers for the time you see on the page first variable is hours second variable is minutes and the third is seconds and the _timeElementStructure variable create a group of each section.

each section set on the page and the last is the update() function to update the frame of each section add a highlight class on the active digit to increase the size of the active digit.

let _timeElement10Digits = Array.from(Array(10)).map((n, i) => i);
let _timeElement6Digits = _timeElement10Digits.slice(0, 6);
let _timeElement3Digits = _timeElement10Digits.slice(0, 3);
let _timeElementStructure = [
[_timeElement3Digits, _timeElement10Digits],
[_timeElement6Digits, _timeElement10Digits],
[_timeElement6Digits, _timeElement10Digits]];
let clock = document.createElement('div');
clock.id = 'clock';
document.body.appendChild(clock);
let digitGroups = [];
requestAnimationFrame(update);

_timeElementStructure.forEach(digits => {
  let digitGroup = document.createElement('div');
  digitGroup.classList.add('digit-group');
  clock.appendChild(digitGroup);
  digitGroups.push(digitGroup);
  digits.forEach(digitList => {
    let digit = document.createElement('div');
    digit.classList.add('digit');
    digitList.forEach(n => {
      let ele = document.createElement('div');
      ele.classList.add('digit-number');
      ele.innerText = n;
      digit.appendChild(ele);
    });
    digitGroup.appendChild(digit);
  });
});

function update() {
  requestAnimationFrame(update);
  let date = new Date();
  let time = [date.getHours(), date.getMinutes(), date.getSeconds()].
  map(n => `0${n}`.slice(-2).split('').map(e => +e)).
  reduce((p, n) => p.concat(n), []);
  time.forEach((n, i) => {
    let digit = digitGroups[Math.floor(i * 0.5)].children[i % 2].children;
    Array.from(digit).forEach((e, i2) => e.classList[i2 === n ? 'add' : 'remove']('highlight'));
  });
}

Javascript Clock Train is completed if you like the article share it with your friends. if you have any question or query related to the article and have any suggestions please leave in the comment box.

Thanks for reading the Article.

Leave a Reply

Your email address will not be published. Required fields are marked *