DEV Community

Cover image for Digital Clock Design (Segment Display Design)
Opeyemi Ogunsanya
Opeyemi Ogunsanya

Posted on

Digital Clock Design (Segment Display Design)

#webdev #html #css #javascript

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).

Let's get started in building our digital clock.
First let's create our html elements.
In the design of a 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.

<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>
Enter fullscreen mode Exit fullscreen mode

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

<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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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

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");
  }
}
Enter fullscreen mode Exit fullscreen mode

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:

Thanks for reading!!!

Top comments (2)

Collapse
 
dshaw0004 profile image
Dipankar Shaw •

it's great. working properly but it could be optimized more.

I didn't do the all optimization yet but one thing that I do is reduce your getNumber() function from 82 lines to 10 lines
updated version of getNumber function

Collapse
 
o-opeyemi profile image
Opeyemi Ogunsanya •

Thanks for this optimization.

Read next

kumarsanu profile image

React

Kumar Sanu -

zoltanszogyenyi profile image

Tailwind CSS Shopping Cart Component Examples

Zoltán Szőgyényi -

jxd-dev profile image

Deploying many apps from a single monorepo

jamie -

devasservice profile image

FastAPI Best Practices: A Condensed Guide with Examples

Developer Service -