Simple JavaScript Clock Tutorial For Beginners || Free Source Code || HTML, CSS and JavaScript

byramCoder -
2

 Hello friends, In this blog you will be able to create an simple digital JavaScript Clock. Actually, making this clock is not that hard as you maybe thinking. Actually, we can easily create an JavaScript clock using an simple library function in JavaScript called date(). This is the blog version of the tutorial of making an simple JavaScript clock. Let me clear that, all the source code use in this tutorial is completely free of cost. You can just copy and paste code from the blog or just download source code from my GitHub repository. Source code is given at the end of this blog and also you can find the GitHub repository link at the end of this article.

In this digital and simple JavaScript clock, I have use complete vanilla JavaScript and its function called date() to fetch the date and time from the local computer. This just an digital version of clock that is easy to read but if you want to go a move forward then you can always create an analog clock with CSS animations and styling. Now let's start with the making of the clock.


In order to create this clock, you will need to follow couple of steps mentioned below.


Step 1:

First of all you will need to create and index.html file in the directory that you want to create this JavaScript clock and paste the code given below and save the changes.

<!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>JavaScript Clock</title>
    <link rel="stylesheet" href="./style.css" />
  </head>
  <body>
    <section>
      <div class="title">JavaScript Clock</div>
      <div class="clock" id="clock"></div>
    </section>
    <script src="./script.js"></script>
  </body>
</html>{codeBox}

Step 2:

After finishing with the index.html file, you will need to create an style.css file and paste the code given below and save changes.

* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}
body {
  height: 100vh;
  background-color: rgb(100, 111, 173);
  color: rgb(240, 232, 232);
  font-family: "Courier New", Courier, monospace;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}
.title {
  font-size: 2.5rem;
  font-weight: bold;
}
.clock {
  background-color: rgb(131, 190, 131);
  width: 50%;
  margin-left: 25%;
  height: 20vh;
  border-radius: 15px;
  margin-top: 3%;
  border: 5px solid rgb(98, 165, 98);
  font-size: 15vh;
  font-weight: bolder;
  padding: 0.5rem;
}{codeBox}

Step 3:

After creating all the styling, you will just need to create an script.js file in the same directory and paste the following code and save changes.

let a;
let date;
let time;

setInterval(() => {
  a = new Date();
  hours = a.getHours();
  if (hours < 12) {
    time = hours + ":" + a.getMinutes() + ":" + a.getSeconds() + "AM";
    document.getElementById("clock").innerHTML = time;
  } else {
    time = hours + ":" + a.getMinutes() + ":" + a.getSeconds() + ":" + "PM";
    document.getElementById("clock").innerHTML = time;
  }
}, 1000);{codeBox}

So, this is it to create the simple JavaScript clock. Now you can just open the index.html file in your browser and enjoy the Simple JavaScript clock that you just build under 5 minutes.

Tags:

2 Comments

Previous Post Next Post