Hello Coders, In this article we are going to learn how to create a digital clock using html, css and javascript. Below I have given a step by step video tutorial as well as complete source code of this project.
In our previous articles:
- How to Create Analog Clock using HTML, CSS and JavaScript | Beginner JavaScript Project Tutorial
- Learn How to Create a Monthly Calendar Using HTML, CSS and JavaScript | Beginner JavaScript Project
I have shown how to use the JavaScript’s Date object to create a analog clock and monthly calendar. In this project we are going to use the same Date object to get the current time. If you haven’t read our previous articles, make sure you go through them.
Learn How to Create a Digital Clock Using HTML, CSS and JavaScript | Step by Step Video Tutorial
Build a Digital Clock Using HTML, CSS and JavaScript | Tutorial with Source Code
Lets start by creating three files that are required for this project: index.html, styles.css, script.js. Make sure you link both css file as well as script file to your html.
Step 1: Setting up the HTML
Our HTML is going to be very simple with just an container and two divs. One for displaying the time and another for the date. Refer below code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>4 Digital Clock</title>
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<div class="container">
<div id="digital-clock">
<div id="time"></div>
<div id="date"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Step 2: Adding JavaScript
Before we jump to the styling, lets add all the logic which will display the current time and the date.
First we will get the current time using the Date Object and store it in now variable. Using the now variable, lets get hours, minutes, seconds, day, month, year. Refer the code below for clear understanding.
Now we need to decide whether it is going to be AM or PM. We can do this by comparing the hours and check whether it is greater than 12. If it is greater than 12 than it will PM otherwise it will be AM.
Since we want to display the time in double digits. We will append a zero before the digit if it is a single digit. After that we will create two variables currentTime and currentDate respectively and display it in our HTML by setting the textContent property of time and date elements.
We will run this function every second so that the time gets updated in our UI real time.
var time = document.querySelector("#time")
var date = document.querySelector("#date")
function setTime() {
var now = new Date()
var hours = now.getHours()
var minutes = now.getMinutes()
var seconds = now.getSeconds()
var day = now.getDate()
var month = now.getMonth() + 1
var year = now.getFullYear()
var ampm = hours >= 12 ? "PM" : "AM"
hours = hours > 12 ? hours - 12 : hours
if (hours < 10) {
hours = "0" + hours
}
if (minutes < 10) {
minutes = "0" + minutes
}
if (seconds < 10) {
seconds = "0" + seconds
}
if (day < 10) {
day = "0" + day
}
if (month < 10) {
month = "0" + month
}
var currentTime = hours + ":" + minutes + ":" + seconds + " " + ampm
var currentDate = day + "/" + month + "/" + year
time.textContent = currentTime
date.textContent = currentDate
}
setInterval(setTime, 1000)
setTime()
Step 3: Styling the digital clock
Here comes the easy part. Below I have provided all the necessary styles to make the project look good. Feel free to play around with the styles and customise according to your needs.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: monospace;
}
body {
background-color: #ebebeb;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 5rem 0;
}
#digital-clock {
padding: 3rem;
font-size: 6rem;
font-weight: bold;
color: #fff;
text-shadow: 0 0 10px #333;
text-align: center;
padding: 1.5rem;
background-color: #333;
border-radius: 10px;
box-shadow: 0 0 20px #333;
}
#date {
font-size: 2rem;
margin-top: 1rem;
}
All right! Thats it. Congratulations on completing this project. You can get the source code from below. Make sure you also check our other JavaScript Projects tutorials. Thank you for Reading and I will see you next time.
