How to Create a Digital Clock In HTML, CSS, and JavaScript - Javascript Project

How to Create a Digital Clock In HTML, CSS, and JavaScript - Javascript Project

 

Clocks are a useful element for any UI if used in a proper way. Clocks can be used in sites where time is the main concern like some booking sites or some apps showing arriving times of trains, buses, flights, etc. The clock is basically of two types, Analog and Digital. We will be looking at making a digital one.

Building a digital clock using JavaScript can be an excellent project for a beginner to understand the basic concepts of JavaScript. Creating this will help you know about accessing the DOM, adding activity to them, and much more.

Digital Clock in JavaScript [Source Codes]

To create this program [Digital clock]. First, you need to create three files, HTML File, CSS File, and JavaScript File. After creating these files just paste the following codes into your files. You can also download the source code files of the Digital Clock from the given download buttom.

First, create an HTML file with the name of index.html and paste the given codes in your HTML file. Remember, you’ve to create a file with .html extension.

<!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 in Javascript</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <div class="shape1"></div>
    <div class="shape2"></div>
    <div class="clock">
        <div id="hour">00</div>
        <span>:</span>
        <div id="minute">00</div>
        <span>:</span>
        <div id="seconds">00</div>
        
        <div id="midday">AM</div>
        
    </div>
    <script src="main.js"></script>
</body>
</html>

Second, create a CSS file with the name of style.css and paste the given codes in your CSS file. Remember, you’ve to create a file with .css extension.

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

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    height: 100vh;
    font-family: 'Orbitron', sans-serif;
    background-color: #fbfbfb;
    background-image: linear-gradient(135deg, #131414 0%, #000 100%);
}

.clock {
    position: absolute;
    width: 750px;
    height: 150px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clock div {
    position: relative;
    width: 150px;
    height: 100%;
    background-color: #fff;
    box-sizing: 1px 20px 1px rgb(0 0 0 / 10%);
    display: flex;
    justify-content: center;
    align-items: center;
    letter-spacing: 7px;
    font-size: 60px;
    border-radius: 5px;
    color: #ef4141;
}

.clock span {
    font-size: 60px;
    font-weight: bold;
    color: #ef4141;
}

.shape1 {
    position: absolute;
    width: 250px;
    height: 250px;
    background: linear-gradient(45deg, #eb9461, #ff5b84);
    border-radius: 50%;
    top: 15%;
    right: 15%;
}

.shape2 {
    position: absolute;
    width: 150px;
    height: 150px;
    background: linear-gradient(45deg, #1e90ff, #fff);
    border-radius: 50%;
    top: 45%;
    left: 15%;
}

Last, create a JavaScript file with the name of script.js and paste the given codes in your JavaScript file. Remember, you’ve to create a file with .js extension.

function showTime() {
  var date = new Date();
  var h = date.getHours();
  var m = date.getMinutes();
  var s = date.getSeconds();
  var session = "AM";

  if ( h == 0) {
    h = 12;
  }

  if ( h > 12) {
    h= h -0;
    session = "PM"
  }

  h = (h < 10) ? "0" + h : h;
  m = (m < 10) ? "0" + m : m;
  s = (s < 10) ? "0" + s : s;

  var time_h = h;
  var time_m = m;
  var time_s = s;
  var time_midday = session;
  document.getElementById("hour").innerText = time_h;
  document.getElementById("minute").innerText = time_m;
  document.getElementById("seconds").innerText = time_s;
  document.getElementById("midday").innerText = time_midday;
  setTimeout(showTime, 1000);
}

// call the function
showTime();


Download Source Code: Create a Digital Clock In HTML, CSS, Javascript.

That’s all, now you’ve successfully Create a Digital Clock In HTML, CSS, Javascript. If your code does not work or you’ve faced any error/problem then please comment down or contact us from the contact page.

Here are a few helpful posts you might want to read, too:

Why learning code? 7 Essential Benefits From Learning Programming

6 Things To Know Before Learning Programming

How to Teach Yourself to Learn Code

If you enjoyed this post about the digital clock in html, csss, javascript just drop me a line in the comments below!

P.S. If you found this post helpful, please share it with others! Thanks for your support!