How to make a digital clock Using CSS and JavaScript

There are a couple of ways you can present your time besides the analog and digital display, I will build on that as we progress but for this walkthrough, I will be covering the basics concepts and then from what is established, we move on to creating a digital clock.

JavaScript Date object allows you work with dates (year, month, day, hour, minute, second). And of course working with date would mean being able to manipulate it, just in a way that suits your design.

For the markup setup of our digital clock, we need two containers;

• The clock container: which houses the clock display. and
• The display.

We'll add a false copy of an actual time to the display, so we can give effects to its styling.

<div id="clockCont">
   <div class="dispCont" id="clock"gt;08:57:22 AM</div>
</div>

That's all we need for the markup, but of course we know that the time will be populated from JavaScript, so for the mean time, let's keep this feign time.

Let's add flesh to the bones of what we've just done above, we head-on to CSS to give some styling effect.

Getting rid of browser's default setting allows you to have control over your display, seems these days some browsers, add margins to your document. We all set that to none, by assigning the asterisk, a margin, padding, and border property of 0 pixels.

* {
margin:0px;
padding:0px;
border:0px;
}

I'll give the body a signal black background color.

body {
background:#292929;
}

Now let's get to the clockCont, we want this to be positioned relatively, so that, the dispCont can be absolutely placed inside of it.

We declare a width and height for the container and place it in the center of the page, using the top and left property.

#clockCont{
position:relative;
height:300px;
width:900px;
margin-top:550px;
margin-left:50px;
background:linear-gradient(10deg, black, white, black);
box-shadow:10px 10px 15px black;
}

You can also see that we've added a background color and a box shadow to the element, basically so it has that nice shadow effect just as it is, in the preview.

We can now move on to the dispCont, remember we mentioned positioning this absolutely. We can also specify a width and height for the container, add a margin top and left to have it aligned centrally inside the clockCont.

.clockContainer{
position:absolute;
height:200px;
width:800px;
margin-top:50px;
margin-left:50px;
background-color:#292929;
font-size:120px;
font-family:serif;
text-align:center;
line-height:200px;
font-weight:bolder;
box-shadow:10px 10px 15px black;
text-shadow:20px 20px 10px black;
color:white;
}

At this point we’ve got the nice interface but nothing seems to be working. Lets add interactivity to this program, of course the essence of JavaScript.

So I’ll be using internal JavaScript, you can decide to make it external, it doesn’t matter, just make sure you’re comfortable with it.

<script type=”text/javascript”>//content goes here </script>

The first thing we’ll do from here is to create a function, a function that’ll get the time from the date object and display it to our dispCont. We’ll call this function digClock.

function digClock(){
}

To allow this function get time from the date object, let’s start with declaration of some variables. Remember; these declarations are made inside the function.

var date = new Date();
var hours = date.getHours();
var minutes = date.getMinutes();
var seconds = date.getSeconds();

We’ve just made four declarations above, what do they mean?

Let’s take a look at them one after the other.

• We assigned the variable date to the new Date() object: The new Date() object creates a string with the current date and time. So by setting the variable date to the new Date() object, we set the "date" variable to the current date and time.

To know the content of the new date variable (i.e. our new Date() object). You use the console.log() function to inquire of the date variable, just like this;

console.log(date);

So once you preview this and click on the right menu hamburger, there usually is an option for console. This brings you to a new interface which displays the console and its messages, usually this is where you would check to see if your code is error free. So as you can see below; we’ve got a message indicating our time and date.

But we’re interested just in the time values i.e. the hours, minutes, and seconds, which brings us to the next declaration.

• We assigned the variable hours to the date.getHours() method: From above, we now know that our date variable contains the current date and time. So what do we do with this information?

The javascript date method allows you to get specific data from the long string of date object you saw above.

So by setting the date.getHours() method to the variable hours, we get the hours from the date object and assign it to the variable "hours".

• We can do same for the minutes by using the date.getMinutes() and assigning it to the variable "minutes".

Same applies to the seconds, infact there are quite a number of the javascript date method. We’ll add a list just incase you’ll have need for it in the future.

Table1.1

Okay so, we now have the current hour, minute and second in our hours, minutes and hours variable. What we can do from here, is to create another variable to hold all of these other variables, separating them with a colon.

Let’s call this other variable "time".

var time = hour + “:” minutes + “:” + seconds;

We can now go ahead to set this "time" variable to the innerHTML of the element with an id=”clock”; (which is our dispCont), using the document.getElementById method.

document.get.ElementById(‘clock’).innerHTML = time;

If we call the digClock function outside of itself, our time would display on our dispCont but remains static.

Note:

Date object are static, so everytime you refresh the page, it outputs the current time but remains static, until another refresh is made to the page.

To solve this problem, we need a function that calls the digClock function, just like the refresh option, but this time for every second.

Thanks to JavaScript timing event, this comes in just handy and allows you to execute a function at specified time interval.

These are two JavaScript timing event methods.

setInterval(function(), milliseconds):

Executes a function repeatedly , with a fixed time delay between each call that function. (useful for countdown).

setTimeout(function(), milliseconds):

Executes a function once , after wa a specified delay.

Notes: 1000 milliseconds = 1 second.

Using the setTimeout timing method, we can call the digClock function for our specified number of time, of course which is one second (i.e. our time is updated every seconds), so we include this function to our digClock function.

setTimeout(digClock, 1000);

Notice how we've not included the function brackets to the function used as a parameter.

At this point everything is now working, just that we have the hours set to 23hr and we don't have the period of the day (AM/PM), attached to our time.

Let's go create some validations that'll take care of that for us.

First let's initialize the variable "period", so we can make use of it afterwards.

var period;

We know that the period of the day from dawn to midday (12°clock) is morning (more like saying once the hour is less than 12°clock then we know it's morning). Let's add this to our code;

  
if(hours<12){
period = "AM";
}

And also we know that from 12°clock through 23°clock, the period of the day is PM. So;

if(hours == 12 || hours>12){
var period = "PM";
}

We are using the OR (||) operator to check for two conditions, and what this does is that; either of the conditions must be true for the if statement (in our case " period " to equal "PM").

Okay so, what we can do from here is to include the period to our time variable, so we don't just output the hours, minutes, and seconds to the screen but also include the period of the day. So instead of what we had before we'll now have;

var time = hours + ":" + minutes + ":" + seconds + period;

Once we preview this program, we now see that our period has been updated based on our time. So let's move on to the next validation.

We also want it that, our time should be two valued (i.e. if the hrs, mins or secs is below 10, we still want it to output two values e.g. 04, 05, 06,...)

So what we can do is concatenating "0" as a string to any value below 10°clock.

if(hours<10){
hours = "0" + hours;
}
if(minutes<10){
minutes = "0" + minutes;
}
if(seconds<10){
seconds = "0" + seconds;
}

And finally we need to change the clock from a 23hrs clock to a 12hrs clock. This is it;

Once the hours is greater than 12°clock, we know that the period is "PM", so we subtract whatever hr it is, from 12 to have the actual time in a 12hr clock. If that doesn't make too much of a sense, then the code should;

if(hours>12){
hours = hours -12;
}

With that we've come to the end of the program. At this time everything is working all fine.

Note; We can improve the digital clock further by manipulating the values of the hours, minutes and seconds to build a progressBar just like what we have below.

Subscribe to our newslater for newer update. Share with your friends.