Build your own digital clock with JavaScript
Tags: begginers, javascript, tutorial, productivity
Published: 2021-01-28 11:57:42

##**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>
```

##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;
```
We make a function that will show the current time
```
var showCurrentTime = function(){
```
 We set a var currentTime (For info about Date(); see [here](https://www.w3schools.com/jsref/jsref_obj_date.asp))
```
var currentTime = new Date();
```

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();
```
We set a variable for the meridian (AM/PM)
```
var meridian = "AM";
```
Now we use if statements to see if it is AM Or PM based on the hours variable
```
 if (hours >= noon)
    {
        meridian = "PM";
    }
```
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;
    }
```
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;
    }
```
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;
```
And now we display it in the *print-time* class in HTML
```
document.getElementById("print-time").innerHTML = clockTime;
```
we close the function here

##2. **Increment the time** on it's own
We make a new function 
```
var updateClock = function() 
{
```
Inside we put the previous function
```
showCurrentTime();
```
we close the function and we call it 
```
};
updateClock();
```
Then we set an universal variable of a second
```
var oneSecond = 1000;
```
And we make it update(reload) the clock every second like this
```
setInterval( updateClock, oneSecond);
```
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();
```
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;
```
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"};
```
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"};
```
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;
```
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;
```
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();
```
Now let's add the a string variable image that will hold the path to the image 
```
var image = "images/day.jpg";
```
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";
    }
```
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;
```
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;
}
```
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%;
}
```
#Final product
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/kgl4xiwbaelk7utz94ph.gif)

The whole project with the pictures and evrything used is in the [GitHub](https://github.com/miljkovicjovan/really-cool-clock) 

(star it if you like it (: )

###**Thank you for reading**
Thanks so much,
Stay safe,
~Jovan