Minimal Digital Clock With JavaScript And CSS

Preview:

Description:

A simple, clean digital clock with AM/PM/Current day display, implement in pure JavaScript and CSS.

How to use it:

Create the container to display the day of the week.

<div class="days">
  <div class="day">
    <p class="monday">monday</p>
  </div>
  <div class="day">
    <p class="tuesday">tuesday</p>
  </div>
  <div class="day">
    <p class="wednesday">wednesday</p>
  </div>
  <div class="day">
    <p class="thursday">thursday</p>
  </div>
  <div class="day">
    <p class="friday">friday</p>
  </div>
  <div class="day">
    <p class="saturday">saturday</p>
  </div>
  <div class="day">
    <p class="sunday">sunday</p>
  </div>
</div>

Create the element for the clock.

<div class="clock">
  <!-- HOUR -->
  <div class="numbers">
    <p class="hours"></p>
    <p class="placeholder">88</p>
  </div>
  <div class="colon">
    <p>:</p>
  </div>
  <!-- MINUTE -->
  <div class="numbers">
    <p class="minutes"></p>
    <p class="placeholder">88</p>
  </div>
  <div class="colon">
    <p>:</p>
  </div>
  <!-- SECOND -->
  <div class="numbers">
    <p class="seconds"></p>
    <p class="placeholder">88</p>
  </div>
  
  <!-- AM / PM -->
  <div class="am-pm">
    <!-- AM -->
    <div>
      <p class="am">am</p>
    </div>
    <!-- PM -->
    <div>
      <p class="pm">pm</p>
    </div>
  </div>
</div>

Load the main JavaScript file at the end of the document.

<script src="javascript/main.js"></script>

The main CSS styles for the digital clock.

@font-face {
  font-family: 'digital-7';
  src: url('../fonts/digital-7.ttf');
}
body {
  color: #ffffff;
  background-color: #000000;
  font-family: 'digital-7', sans-serif;
}
/* DAYS OF THE WEEK */
div.days {
  margin: 0 auto;
  color: #131212;
}
div.days .day { display: inline-block; }
div.days .day p {
  font-size: 12px;
  font-weight: bold;
  font-family: sans-serif;
  text-transform: uppercase;
}
/* CLOCK */
div.clock { margin: 5px 0; }
div.clock div {
  display: inline-block;
  position: relative;
}
div.clock div p {
  font-size: 100px;
  position: relative;
  z-index: 100;
}
div.clock .placeholder {
  color: #131212;
  position: absolute;
  top: 0;
  z-index: 50;
}
div.clock .meridian { margin-left: 15px; }/*END CLOCK*/
/* AM OR PM*/
.am-pm {
  font-family: sans-serif;
  text-transform: uppercase;
  width: 20px;
}
div.am-pm div p {
  font-size: 12px;
  font-weight: bold;
  width: 100%;
}
.am, .pm { color: #131212; }
/*CLASS THAT CHANGES COLOR OF TEXT TO APPEAR LIKE ITS "ON"*/
.light-on { color: #ffffff; }

Changelog:

07/04/2020

• class rename