Digital Clock Design (Segment Display Design)
Tags: webdev, html, css, javascript
Published: 2023-05-13 23:14:48


Hi there long time of me writing an article here. 

Few months ago while designing my personal website i actually thought of a design element and surfed through the internet if i could find one that matches it but did not. Well after thinking through it finally designed it and used it on my [Personal Website (OPEYEMI OGUNSANYA)](https://o-opeyemi.github.io).

Let's get started in building our digital clock.
First let's create our html elements.
In the design of a seven [segment display](https;//en.m.wikipedia.org/wiki/seven-segment_display) for each digits there are seven bars forming a digit to be displayed and to display a digit from 0 - 9 we either turn on one or all bars for a digit to be displayed.
```html
<style>
.clock {
  width: 300px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.hours {
  width: 25%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-evenly;
}
.digit_1,
.digit_2 {
  width: 40%;
  height: 100%;
  position: relative;
}
.digit_1 div {
  position: absolute;
}
.bar_1,
.bar_2,
.bar_3,
.bar_4,
.bar_5,
.bar_6,
.bar_7 {
  height: 10%;
  width: 60%;
  border-radius: 5px;
  background: #000000;
}
.bar_1 {
  left: 30%;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_2 {
  top: 20%;
  left: 70%;
  transform: rotate(90deg);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_3 {
  top: 70%;
  left: 70%;
  transform: rotate(90deg);
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_4 {
  top: 90%;
  left: 30%;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_5 {
  top: 70%;
  left: -10%;
  transform: rotate(90deg);
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_6 {
  top: 20%;
  clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
  left: -10%;
  transform: rotate(90deg);
}
.bar_7 {
  top: 45%;
  left: 30%;
  clip-path: polygon(80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);
}
</style>
<div class="container">
<div class="clock">
    <div class="hours">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
  </div>
</div>
```
This shows a digit been displayed very well and a full design of a digit can be represented using this design. To have the full time display use code below:

**HTML**
``` html
<div class="container">
  <div class="clock">
    <div class="hours">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
      <div class="digit_2">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
    <div class="colon">
      <div class="dot_1"></div>
      <div class="dot_2"></div>
    </div>
    <div class="minutes">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
      <div class="digit_2">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
    <div class="colon">
      <div class="dot_1"></div>
      <div class="dot_2"></div>
    </div>
    <div class="seconds">
      <div class="digit_1">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
      <div class="digit_2">
        <div class="bar_1"></div>
        <div class="bar_2"></div>
        <div class="bar_3"></div>
        <div class="bar_4"></div>
        <div class="bar_5"></div>
        <div class="bar_6"></div>
        <div class="bar_7"></div>
      </div>
    </div>
    <div class="day"></div>
  </div>
</div>
```
**CSS** 

``` css
.container {
    display: flex;  
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}
.clock {
    width: 300px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.hours,
.minutes,
.seconds {
    width: 25%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.colon {
    width: 3%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
}
.digit_1,
.digit_2 {
    width: 40%;
    height: 100%;
    position: relative;
}
.digit_1 div,
.digit_2 div {
    position: absolute;
}
.bar_1,
.bar_2,
.bar_3,
.bar_4,
.bar_5,
.bar_6,
.bar_7 {
    height: 10%;
    width: 60%;
    border-radius: 5px;
    background: #000000;
}
.dot_1,
.dot_2 {
    height: 10%;
    width: 40%;
    border-radius: 5px;
    position: relative;
    background: #000000;
}
.dot_1{
    top: -20%;
    left: 20%;
}
.dot_2{
    top: 20%;
    right: 20%;
}
.bar_1 {
    left: 30%;
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_2 {
    top: 20%;
    left: 70%;
    transform: rotate(90deg);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_3 {
    top: 70%;
    left: 70%;
    transform: rotate(90deg);
    clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
}
.bar_4 {
    top: 90%;
    left: 30%;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_5 {
    top: 70%;
    left: -10%;
    transform: rotate(90deg);
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
}
.bar_6 {
    top: 20%;
    clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%);
    left: -10%;
    transform: rotate(90deg);
}
.bar_7 {
    top: 45%;
    left: 30%;
    clip-path: polygon(80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%, 20% 0);
}
```
This is a representation of a digit in the seven segment display
We can see that we have defined each segments well detailed by setting each bars for each number to be displayed in each sections of a digital clock, sections such as

- Hours
- Minutes
- Seconds

So for full design implementation we need to add an handler for full implementation by adding the following JavaScript.

> Note: Add one of the latest version of jquery.

**JavaScript**

```javascript
function time() {
  var day = new Date();
  var hh = day.getHours();
  if (hh > 12) {
    hh = hh - 12;
    $(".day").text("PM");
  } else {
    $(".day").text("AM");
  }
  var hour = hh.toString(10);
  if (hour.length < 2) {
    hour = "0" + hour;
  }
  if (hh > 12) {
    console.log(hh);
    hh = hh - 12;
  }
  for (var i = 0; i < hour.length; i++) {
    var digit_index = i + 1;
    getNumber(hour[i], ".hours ", ".digit_" + digit_index);
  }
  var mm = day.getMinutes();
  var minutes = mm.toString(10);
  if (minutes.length < 2) {
    minutes = "0" + minutes;
  }
  for (var i = 0; i < minutes.length; i++) {
    var digit_index = i + 1;
    getNumber(minutes[i], ".minutes ", ".digit_" + digit_index);
  }
  var ss = day.getSeconds();
  var seconds = ss.toString(10);
  if (seconds.length < 2) {
    seconds = "0" + seconds;
  }
  for (var i = 0; i < seconds.length; i++) {
    var digit_index = i + 1;
    getNumber(seconds[i], ".seconds ", ".digit_" + digit_index);
  }
}
setInterval(() => {
  time();
});
  function getNumber(number, position, digit) {
  if (number == "0") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "none");
  } else if (number == "1") {
    $(position + digit + " .bar_1").css("display", "none");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "none");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "none");
  } else if (number == "2") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "none");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "3") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "4") {
    $(position + digit + " .bar_1").css("display", "none");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "none");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "5") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "none");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "6") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "none");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "7") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "none");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "none");
    $(position + digit + " .bar_7").css("display", "none");
  } else if (number == "8") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "block");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  } else if (number == "9") {
    $(position + digit + " .bar_1").css("display", "block");
    $(position + digit + " .bar_2").css("display", "block");
    $(position + digit + " .bar_3").css("display", "block");
    $(position + digit + " .bar_4").css("display", "block");
    $(position + digit + " .bar_5").css("display", "none");
    $(position + digit + " .bar_6").css("display", "block");
    $(position + digit + " .bar_7").css("display", "block");
  }
}
```
Finally our digital clock display has been created. 
For Support kindly add me to your next project as a full stack web developer or recommending me to someone. My profile links are as follows:

- [Linkedin](https://linkedin.com/in/opeyemi-ogunsanya)
- [Personal Website](https://o-opeyemi.github.io)
- [Github](https://githib.com/o-opeyemi)

**Thanks for reading!!!**