fight coronavirus(corvid-19) - As they treat the sick & find the solution, please stay at home + wash your hands every after activity, GOD bless you.
How to create a Digital Clock using JavaScript

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

Related Post(s)

» How to print Webpage content using Javascript

» Learn how to Switch Between Dark and Light Mode With CSS and Javascript

» How to create a Digital Clock using JavaScript

» How to create a Dynamic GO BACK button on a 404 Error Page

» Learn how to create a progress bar using JavaScript

collections_bookmark Category :: Javascript
date_range Published :: 1 month ago At: 03:05 AM
event_note Detailed Date :: May 23rd, 2020
person Writer :: Code

YOU MAY LIKE THESE POSTS

share