Design a Digital Clock using JavaScript

In this article, we are going to design a working digital clock using JavaScript.

The basic setup for digital clock :

<div id="clock"></div>


<script type="text/javascript">
  function showTime(){
    let time = new Date();
    let hour = time.getHours();
    let min = time.getMinutes();
    let sec = time.getSeconds();

    hour = hour < 10 ? "0" + hour:hour;
    min = min < 10 ? "0" + min:min;
    sec = sec < 10 ? "0" + sec:sec;

    let currentTime = hour + ':' + min + ':' +sec;

    document.getElementById('clock').innerHTML = currentTime;
  }

  showTime();
</script>

Complete source code with design

<style type="text/css">
  body{
    background: linear-gradient(to bottom right, #265f54, #61322b);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #clock{
    text-align: center;
    margin-bottom: 35px
  }
  .digit{
    display: inline-block;
    margin: 5px 10px;
  }
  .box1,.box2{
    width: 20px;
    height: 17px;
    border:  3px solid aqua;
    border-radius: 10px;
    border-width: 10px;
  }
  .box2{
    border-top-color: transparent;
  }
  .zero .box1{
    border-bottom-color: transparent;
  }
  .zero .box2{
    border-top-color: transparent;
  }
  .one .box1, .one .box2, .four .box2, .seven .box2{
    border-color: transparent;
    border-right-color: aqua;
  }
  .dot .box1, .dot .box2{
    background: aqua;
    border: none;
    margin-top: 25px;
  }
  .dot .box2{
    margin-bottom: 7px;
  }
  .two .box1, .three .box1{
    border-left-color: transparent;
  }
  .two .box2{
    border-right-color: transparent;
  }
  .three .box2, .five .box2, .nine .box2{
    border-left-color: transparent;
  }
  .four .box1{
    border-top-color: transparent;
  }
  .six .box1, .five .box1{
    border-right-color: transparent;
  }
  .seven .box1{
    border-left-color: transparent;
    border-bottom-color: transparent;
  }
</style>


<div id="clock"></div>


<script type="text/javascript">
  setInterval(showTime,1000);
  function showTime(){
    let time = new Date();
    let hour = time.getHours();
    let min = time.getMinutes();
    let sec = time.getSeconds();

    hour = hour < 10 ? "0" + hour:hour;
    min = min < 10 ? "0" + min:min;
    sec = sec < 10 ? "0" + sec:sec;

    hour = getDigit(hour);
    min = getDigit(min);
    sec = getDigit(sec);
    let currentTime = hour + getDot() + min + getDot() +sec;

    document.getElementById('clock').innerHTML = currentTime;
  }

  function getDot(){
    return '<div class="one dot digit"><div class="box1"></div><div class="box2"></div></div>';
  }

  function getDigit(num){
    html = '';
    num = num.toString();
    for(var i=0;i<num.length;i++){
      html += '<div class="'+getNumberText(num[i])+' digit"><div class="box1"></div><div class="box2"></div></div>';
    }
    return html;
  }

  function getNumberText(num){
    if(num=="0"){
      return 'zero';
    } else if(num=="1"){
      return "one";
    } else if(num=="2"){
      return "two";
    } else if(num=="3"){
      return "three";
    } else if(num=="4"){
      return "four";
    } else if(num=="5"){
      return "five";
    } else if(num=="6"){
      return "six";
    } else if(num=="7"){
      return "seven";
    } else if(num=="8"){
      return "eight";
    } else if(num=="9"){
      return "nine";
    }
  }

  showTime();
</script>