Prerequisite
Basic knowledge of,
- HTML
- CSS
- JavaScript
What you will learn
- How to create a digital clock using JavaScript
- Date object
- Selecting HTML element by id
- ES6 let & const
Setting up the environment
Create a folder and give it a name, I will call mine “my clock”. Then create these 3 files in the folder you just created.- index.html
- style.css
- script.js
A website is made of 3 basic parts; Structure - Html, Style - CSS, Functionality - JavaScript, we try as much as possible to keep these codes separate as this will make it easier to manage.
Creating the structure for the clock
Now let’s link the three files we created so that they can interact. Inside the <head></head> we link our css stylsheet like this,
<link rel="stylesheet" href="style.css">
In our case, we have all three of our HTML CSS and JavaScript document in the same directory so we only need to specify the name of the CSS file as seen in the above code snippet.
To link the script.js, the correct practice is to place the tag at the very bottom of the body tag just above the closing </body> tag.
<script src="script.js">...</script>
This is to prevent our JavaScript from running when the structure of the webpage and style has not finished loading.
In the body tag, create a div element and assign to it an id called “clockFace”.
Inside the div you just created, create two more divs with ids timeDisplay and dateDisplay respectively. After following these steps your code should look something like this.
<!DOCTYPE html>
<html lang="en">
<head>
This is to prevent our JavaScript from running when the structure of the webpage and style has not finished loading.
In the body tag, create a div element and assign to it an id called “clockFace”.
Inside the div you just created, create two more divs with ids timeDisplay and dateDisplay respectively. After following these steps your code should look something like this.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Clock</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="clockFace">
<div id="timeDisplay">Time goes here...</div>
<div id="dateDisplay">Date goes here</div>
</div>
<script src="script.js"></script>
</body>
</html>
Styling the clock
Now let’s head to our style.css file you can style the clock anyhow you want but let’s stick to this one for the purpose of this tutorial.
/* styling the clock face */
/* styling the clock face */
#clockFace{
background-color: black;
border 6px solid grey;
border-radius: 10px;
margin: 50px auto;
overflow: hidden;
width: 250px;
font-family: arial;
margin: 50px auto;
overflow: hidden;
width: 250px;
font-family: arial;
}
/* styling the clock's time text */
#timeDisplay{
color: greenyellow;
font-size: 60px;
margin: 5px;
font-weight: bold;
}
/* styling the clock's date */
#dateDisplay{
color: greenyellow;
font-size: 30px;
width: fit-content;
margin: 0 auto 10px;
font-style: italic;
}
Adding functionality
Now it’s time for the more challenging part just do as I do and I will explain as much as I can so that you not only copy and paste put understand what the code is doing.
Inside the script.js write the following,
function myClock() {
const clock = new Date();
let hours = clock.getHours();
let minutes = clock.getMinutes();
let seconds = clock.getSeconds();
let day = clock.getDate();
let month = clock.getMonth() + 1;
let year = clock.getFullYear();
const sep1 = ":";
const sep2 = "/";
hours = addZero(hours);
minutes = addZero(minutes);
seconds = addZero(seconds);
document.getElementById
Inside the script.js write the following,
function myClock() {
const clock = new Date();
let hours = clock.getHours();
let minutes = clock.getMinutes();
let seconds = clock.getSeconds();
let day = clock.getDate();
let month = clock.getMonth() + 1;
let year = clock.getFullYear();
const sep1 = ":";
const sep2 = "/";
hours = addZero(hours);
minutes = addZero(minutes);
seconds = addZero(seconds);
document.getElementById
("timeDisplay").innerHTML =
hours + sep1 + minutes + sep1
+ seconds;
document.getElementById
("dateDisplay").innerHTML =
+ seconds;
document.getElementById
("dateDisplay").innerHTML =
day + sep2 + month + sep2 + year;
/* add a 0 in front of the hours,
minutes and seconds if it is
less than 10 */
function addZero(i) {
if (i < 10) {
/* add a 0 in front of the hours,
minutes and seconds if it is
less than 10 */
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
setTimeout(myClock, 1000);
}
myClock();
Notice the whole of our code is contained inside this piece of code
function myClock() {
/*some code*/
}
Here we created a function called “myClock” that will contain all the functionality of the clock.
We use new Date(); to create a new date object with the current date and time for example,
const clock = new Date();
The date object contains properties like date, day, hours, minutes, seconds, milliseconds etc. in order to access these properties to get the current hour for example, we use method getHours();
to get the minutes we use the method getMinutes(); and so on.
To implement this, since we named our date object "clock" we'll use dot notation together with former mentioned methods like
this clock.getHours(); and so on
JavaScript count months from 0 therefore,
January = 0
December = 11
So when we get the current month using the getMonth(); method, we must add +1 to it to get the correct month i.e. getMonth() + 1;
const sep1 = “:”;
const sep2 = “/”;
This is just a colon and slash that we put inside a variable sep1 & sep2 respectively, "sep" is short form for seperator. Here you can set whatever symbol you want as the separator for your time or date.
Date objects are static. The computers time keeps ticking but date objects don’t, so we use a timeout to call our myClock function every 1 second, that way we see date and time as it changes.
JavaScript count months from 0 therefore,
January = 0
December = 11
So when we get the current month using the getMonth(); method, we must add +1 to it to get the correct month i.e. getMonth() + 1;
const sep1 = “:”;
const sep2 = “/”;
This is just a colon and slash that we put inside a variable sep1 & sep2 respectively, "sep" is short form for seperator. Here you can set whatever symbol you want as the separator for your time or date.
Date objects are static. The computers time keeps ticking but date objects don’t, so we use a timeout to call our myClock function every 1 second, that way we see date and time as it changes.
setTimout(myClock, 100);
setTimout(); calls a function after a number of milliseconds.
1 second = 1000 milliseconds.
This function is to add a zero in front of the hours minutes and seconds
function addZero(i) {
if (i < 10) {
i = "0" + i;
}
return i;
}
Finally functions do not get executed unless they are called so, we use myClock(); to call the function.
If you want to download the full project you can do so from the download button below
[download button]
What tutorial do you want me to write next? Let me know in the comments.
What tutorial do you want me to write next? Let me know in the comments.
Post a Comment