Digital Clock using HTML CSS and JavaScript | Html Css Javascript Project

Here we are going to build a digital clock using html css and javascript. After learning basics of HTML CSS and JavaScript, you must start creating projects immediately. If you want to be a good developer you must practice developing. Digital clock is one of the best beginner project in javascript. Also at beginner level, html css javascript projects like stop watch, tic-tac-toe game, simple calculator, basic website etc etc are the best ones to polish your developing skills.

Many years ago people used to guess time by looking at the sun but the invention of clock have made it really easy to tell time. Now, clock is the most important thing in our life. It helps us to keep track of time and also it is the most common thing that we see everywhere, in schools, offices, home, hospital, in our cars etc etc. Clock can be analog or digital. We are going to create a digital clock. So I think it is a good html css javascript project for beginners.

For this project I will suggest you to use VS Code as it is free, built on open source and a powerful source code editor that runs on Windows, Linus and macOs. There are hundreds of extensions that makes vs code a all-in-one editor. There are also lots of features which will help you while writing a code.

Create three new files for html css and javascript seperately and link them all in html file. HTML is the skeleton of our website, css adds design to the contents of HTML file and JavaScript adds the functionality in our clock.

This is how our project looks like -

Build Digital Clock using HTML CSS and JavaScript -

HTML Code (index.html)

<!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>Digital Clock</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
    <header>
        <h2>DigitalClock.com</h2>
    </header>
    <section class="container">
        <div class="clkcontainer">
            <p id="date"></p>
            <p class="f1">Current Time : </p>
            <div class="clkscreen">
                <p id="time"></p>
            </div>
        </div>
    </section>
    <footer>
        <h2>&copy; DigitalClock.com</h2>
        <p>Since - 2022</p>
    </footer>
</body>
<script src="script.js"></script>

</html>

CSS Code (style.css)

@font-face {
    font-family: 'digital';
    src: url('digital-7/digital-7.ttf');
}
*{
    margin: 0;
    padding: 0;
}
header{
    display: flex;
    align-items: center;
    background-color: #009688;
    height: 8vh;
    padding-left: 8px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: larger;
    font-weight: bolder;

}

.container{
    margin:30px;
    display: flex;
    justify-content: center;
    align-items: center;
    height:73vh;
}
.clkcontainer{
    display: grid;
    justify-content: center;
    width: 45vw;
    border: 2px solid rgb(73, 137, 173);
    color: whitesmoke;
    border-radius: 10px;
    padding: 25px;
    box-shadow:  0px -5px 0px 2px rgb(216, 14, 14);
    background: black;
    
}
.f1{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: larger;
    font-weight: bolder;
    padding: 25px 0px;
    padding-top: 55px;
    margin: 0 auto;
}
.clkscreen{
    display: grid;
    justify-content: center;
    width: 19vw;
    border: 2px solid rgb(73, 137, 173);
    border-radius: 10px;
    box-shadow:  0px -5px 0px 2px rgb(247, 6, 6);
    background-color: rgb(0, 0, 0);
    color: rgba(24, 255, 43, 0.979);
    
}

#time{
    margin: auto;
    font-family: 'digital';
    font-size: xxx-large;
}
#date{
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: larger;
    font-weight: bolder;
    position: absolute;
    padding: 0px 18px
}
  

footer{
    
    text-align: center;
    background-color: #009688;
    height: 10vh;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   
    font-weight: bolder;
    position: sticky;
    top: 1px;
    z-index: 1;   
}

Font which we have used to display time is digital-7. You can get the font by searching digital - 7 font on google. Get it and link in your css as shown. Change the location of the digital font to the folder where you have kept your html css and javascript files.

JavaScript Code (script.js)

let mt;
let t;
let d;
let h;
let c;
let ap;
const options = {weekday: 'long', year: 'numeric', month:'long',day: 'numeric'}

//function to update time
setInterval(() => {
    mt = new Date();
    d=mt.toLocaleDateString(undefined,options);
    h=mt.toLocaleTimeString();
    
    ap = h>=12?'PM':'AM';
    c=(h%12)||12;
    
    document.getElementById('time').innerHTML = h;
    document.getElementById('date').innerHTML = "Today : " + d;
}, 1000);// it updates time every second (1000ms=1s)

LIVE DEMO -

Current Time :

Now that we have build a good looking digital clock using html css and javascript, I will suggest you to not just copy paste the code but also to practice on your own. Go ahead and make changes in the code and see what visible changes you see, try to give this digital clock a different look. Code the entire digital clock on your own and if at any point you feel any problem or feel like stuck at some point, come back and see the code, understand the code and then again code yourself. Remember copy pasting won't make you good at developing but practicing on your own will.