How to create a Digital Clock using JavaScript

Make money for being or staying online/internet.

You will get a $50 starting gift when you join using this code: Exode4LKrbujm1z and link:: GET THE OFFER NOW!!

In this simple article, I am going to share with you the source code of a simple animated Digital Clock in JavaScript.

Since, browsers can execute the JavaScript program at the client-side, the script(in this case app.js) will pick up the time of the client's computer and display it in the browser using the globally known date object and its methods.

Tutorial

HTML

copy


<div class="container">
<h1>Digital Clock</h1>
<div id="clock"></div>
</div>

CSS

copy


body{
  margin:0;
  padding:0;
  background:rgb(32, 28, 28);
}


h1{
  color:tomato;
  text-decoration: underline;
}

.container{
  display: flex;
  flex-direction:column;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#clock{
  text-align: center;
  font-size:2rem;
  color:#fff;
}

#clock span{
  padding:10px;
  background:#444;
  border-radius: 50%;
}

JAVASCRIPT

I added another simple line to tell if its PM or AM on the last span element.

copy


document.addEventListener('DOMContentLoaded', () => {

const clockDiv = document.querySelector('#clock');

const timer = () => {
const now = new Date();

const hour = now.getHours();
const minutes = now.getMinutes();
const seconds = now.getSeconds();


const markup = `
<span>${hour < 10 ? '0' + hour : hour}</span> :
<span>${minutes < 10 ? '0' + minutes : minutes}</span> :
<span>${seconds < 10 ? '0' + seconds : seconds}</span>

//Added it after tutorial
<span>${hour >= 12 ? 'PM' : 'AM'}</span>

`;

clockDiv.innerHTML = markup;
}

setInterval(() => {
timer();
}, 1000)

});

All videos and articles on Oston Code Cypher are free to watch and read because I believe that everyone should be able to learn for free. So if I have helped you in any way, consider becoming a SUBSCRIBER to my channel:: Oston Code Cypher