DEV Community

Cover image for Build your own digital clock with JavaScript
Jovan M.
Jovan M.

Posted on

Build your own digital clock with JavaScript

#begginers #javascript #tutorial #productivity

Why should I try this mini project?

If you’re on a website or using web applications with a digital self counting clock, there’s a big chance it’s powered by JavaScript code. This means JavaScript clocks don’t just make for good JavaScript projects, a JavaScript clock lets you get hands-on with the kind of actual work you’ll be doing as a JavaScript developer.

What we want to have

Here I list every feature I want my web clock to have

  • Display current date
  • Display current time
  • Increment the time on it's own (change every second)
  • Cycle through different wallpapers based on the time of day (morning, day, evening, night)

Now I'll go into detail how I implemented every feauture

0. Base design

Make the basic html structure

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width:device-width, initial-scale:1.0">
        <title>DATE AND TIME</title>
        <link rel="stylesheet" href="style/style.css">
    </head>

    <body>
        <img src="" id="wallpaper"> <!-- here we will have the wallpaper change during the different times of the day -->
        <div class="hero">
            <h3 id="print-date"></h3> <!-- spot for printing the date -->
            <h2 id="print-time"></h2> <!-- spot for printing the time -->
        </div>
    </body>

</html>
Enter fullscreen mode Exit fullscreen mode

1. Display current time

We create the js folder in our project folder and in it we make a file named time.js . Here we start with our JS code.

We set a var called noon so we can distinguish between AM and PM

var noon = 12;
Enter fullscreen mode Exit fullscreen mode

We make a function that will show the current time

var showCurrentTime = function(){
Enter fullscreen mode Exit fullscreen mode

We set a var currentTime (For info about Date(); see here)

var currentTime = new Date();
Enter fullscreen mode Exit fullscreen mode

You can get a lot of outputs from Date(); but in this script we will use these:

 var hours = currentTime.getHours();
 var minutes = currentTime.getMinutes();
 var seconds = currentTime.getSeconds();
Enter fullscreen mode Exit fullscreen mode

We set a variable for the meridian (AM/PM)

var meridian = "AM";
Enter fullscreen mode Exit fullscreen mode

Now we use if statements to see if it is AM Or PM based on the hours variable

 if (hours >= noon)
    {
        meridian = "PM";
    }
Enter fullscreen mode Exit fullscreen mode

And if it is not PM the time needs to be converted to the 12 hour format like this

if (hours > noon)
    {
        hours = hours - 12;
    }
Enter fullscreen mode Exit fullscreen mode

Now we need to set the minutes to display correctly because we need to display it 12:05:45 and not 12:5:45 so when its less than 10 we append to the left a 0 like this

if (minutes < 10)
    {
        minutes = "0" + minutes;
    }
Enter fullscreen mode Exit fullscreen mode

Also the same is done for seconds

Now we set it all up together in one variable to be displayed in the print-time

var clockTime = hours + ':' + minutes + ':' + seconds + ' ' + meridian;
Enter fullscreen mode Exit fullscreen mode

And now we display it in the print-time class in HTML

document.getElementById("print-time").innerHTML = clockTime;
Enter fullscreen mode Exit fullscreen mode

we close the function here

2. Increment the time on it's own

We make a new function

var updateClock = function() 
{
Enter fullscreen mode Exit fullscreen mode

Inside we put the previous function

showCurrentTime();
Enter fullscreen mode Exit fullscreen mode

we close the function and we call it

};
updateClock();
Enter fullscreen mode Exit fullscreen mode

Then we set an universal variable of a second

var oneSecond = 1000;
Enter fullscreen mode Exit fullscreen mode

And we make it update(reload) the clock every second like this

setInterval( updateClock, oneSecond);
Enter fullscreen mode Exit fullscreen mode

Now When you add the script in the body of your HTML and reload your website you will get a really ugly clock but make sure it works , if it doesn't revist the steps above.

3. Display current date

Let's now make another file in the js folder named date.js and start coding
You are already familiar with the Date(); method now we need different outputs

var today = new Date();
var years = today.getFullYear();
var months = today.getMonth();
var days = today.getDate();
var day = today.getDay();
Enter fullscreen mode Exit fullscreen mode

Also we add a variable for the superscript ordinals(st nd rd th) so we can say 27th 3rd 2nd 1st of February

var endOfDay;
Enter fullscreen mode Exit fullscreen mode

Now the getMonth returns values from 0 to 11 and we need to translate that to string variables like "March" we do that like this

if (months == 0){months = "January"};
if (months == 1){months = "February"};
if (months == 2){months = "March"};
if (months == 3){months = "April"};
if (months == 4){months = "May"};
if (months == 5){months = "June"};
if (months == 6){months = "July"};
if (months == 7){months = "August"};
if (months == 8){months = "September"};
if (months == 9){months = "October"};
if (months == 10){months = "November"};
if (months == 11){months = "December"};
Enter fullscreen mode Exit fullscreen mode

We do the same for days because getDay returns values from 0 to 6 and we need to turn that into string like Friday

if (day == 0){day = "Sunday"};
if (day == 1){day = "Monday"};
if (day == 2){day = "Tuesday"};
if (day == 3){day = "Wendesday"};
if (day == 4){day = "Thursday"};
if (day == 5){day = "Friday"};
if (day == 6){day = "Saturday"};
Enter fullscreen mode Exit fullscreen mode

And now for the superscript ordinals we need to set for 1,21,31 to be st for 2,22 nd for 3,23 rd and for the rest th and append that to the day variable so it look like 21st

if (days == 1){endOfDay = "st"};
if (days == 2){endOfDay = "nd"};
if (days == 3){endOfDay = "rd"};
if (days == 21){endOfDay = "st"};
if (days == 22){endOfDay = "nd"};
if (days == 23){endOfDay = "rd"};
if (days == 31){endOfDay = "st"};
if (days > 3 || days < 21 || days > 23){endOfDay = "th"};
days += endOfDay;
Enter fullscreen mode Exit fullscreen mode

And for the end we just need to print everything we want in the format we want like Thursday, January 28th 2021

document.getElementById("print-date").innerHTML = day + ", " + months + " " + days + ", " + years;
Enter fullscreen mode Exit fullscreen mode

Don't forget to add the the script to the body element in your HTML and when you reload you will have today's date.
It is still ugly but don't worry first we need to make everything work and after that the styling comes.

4. Cycle through different wallpapers based on the time

Now to do this is simple you need to go to your time.js file in the updateClock and do the following.

Add a variable to see what hour of the day it is

var time = new Date().getHours();
Enter fullscreen mode Exit fullscreen mode

Now let's add the a string variable image that will hold the path to the image

var image = "images/day.jpg";
Enter fullscreen mode Exit fullscreen mode

Now it is set to day.jpg but it doesn't matter because it will change after one of the following if statements are met

if (time > 6 && time < 12)
    {
        image = "images/morning.jpg";
    }
    else if (time > 12 && time < 17)
    {
        image = "images/day.jpg";
    }
    else if (time > 17 && time < 21)
    {
        image = "images/evening.jpg";
    }
    else if (time > 21 && time > 6){
        image = "images/night.jpg";
    }
Enter fullscreen mode Exit fullscreen mode

Now make sure you have a folder images with morning.jpg day.jpg evening.jpg and night.jpg and this will work

After that we need to assign the wallpaper id in the HTML the path for what image to be and we do it like this

wallpaper.src = image;
Enter fullscreen mode Exit fullscreen mode

now this will automatically update because this function is happening every second remember?
So lets see how it looks.
ohh.. yeah everything breaks we are missing CSS so what are waiting for.

5. UI

Now this part is the easiest I encourage you to do however you like it but i will provide my code just for refrence and for some initial help in the right direction.

This part will make the website unscrollable , it will add a nice font it will center the hero div and make the background fit nicely

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap');

/* not allow scrolling */
html {
    overflow: hidden;
}

body {
    margin: 0;
    font-family: Roboto;
}

img {
    width: 100%;
    height: 100%;
}

.hero {
    text-align: center;
}
Enter fullscreen mode Exit fullscreen mode

Now this part (final part) will make the text come infront make it nicer bigger add a border some blur and nice effect to make it stand out.

.hero h3 {
    padding: 0.6rem;
    font-size: 3rem;
    position: absolute;
    backdrop-filter: blur(3px);
    letter-spacing: 0.1rem;
    color: rgb(250, 245, 245);
    border-radius: 2rem;
    border: 0.15rem solid rgb(184, 182, 182);
    top: 11rem;
    left: 22%;
    right: 22%;
    width: 56%;
}

.hero h2 {
    position: absolute;
    font-size: 3.5rem;
    letter-spacing: 0.1rem;
    color: rgb(243, 235, 235);
    backdrop-filter: blur(30px);
    border: 0.3rem solid rgb(184, 182, 182);
    border-radius: 1rem;
    top: 18rem;
    left: 35%;
    right: 35%;
    width: 30%;
}
Enter fullscreen mode Exit fullscreen mode

Final product

Alt Text

The whole project with the pictures and evrything used is in the GitHub

(star it if you like it (: )

Thank you for reading

Thanks so much,
Stay safe,
~Jovan

Top comments (0)

Read next

techpulse55 profile image

Unlocking Tube Magic AI’s Potential: Features, Pricing, and Performance Review

Techpulse -

okoye_ndidiamaka_5e3b7d30 profile image

CSS in JS: Complete guide to Styled-Components, Emotion and more for cleaner and scalable styling.

Okoye Ndidiamaka -

techpulse55 profile image

Unlocking Quickpix AI's Potential: Features, Pricing, and Performance Review

Techpulse -

ng_news profile image

Ng-News 24/46: Angular Camp, TypeScript 5.7 RC

ng-news -