Minimal Digital Clock With JavaScript And CSS

Category: Image | July 4, 2020

1 Comment

Demo Download

AUTHOR:	SlyTy7
VIEWS TOTAL:	5,473 views
OFFICIAL PAGE:	Go to website
LAST UPDATE:	July 4, 2020
LICENSE:	MIT

---

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