How to Make Digital Clock Using JavaScript

By
Asif Ali
-
0

in this tutorial we will learn How to Make Digital Clock using JavaScript. Making a digital clock using JavaScript is a fun and easy project. With a few lines of code, you can create a clock that will display the current time on your webpage.

A digital clock is a type of clock that displays the time in digital form, i.e. using digits. Clocks of this type are often electronic and count seconds, minutes, and hours. Also you will learn How to add the day, month, date and also year with text format. Some also include alarm functions.

This project for beginners or newbies, they are learning JavaScript. inside the project, you will learn step by step usage of HTML, CSS to design the page. Then you will learn How to use JavaScript to display the dynamic clock.

How to Make Digital Clock Using JavaScript

What You Will Need

-A computer with Internet Access
-A JavaScript Enabled Web Browser
-An Internet Connection
-A Text Editor

How to Make Digital Clock Using JavaScript

This is a guide on how to make a digital clock using JavaScript.

You will need the following:

– A web browser that supports JavaScript
– A text editor
– Optional: A desktop or laptop computer (this guide will assume you are using a computer)

Instructions:

First of All, you need create a index.html file, inside the file you need to add the html structure. So, i’m going to share with you the complete codes inside the 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>How to Make Digital Clock in HTML, CSS and JavaScript</title>
    <link rel="stylesheet" href="css/style.css" />
  </head>
  <body>
    <div class="days">
      <p>
        <span id="dy"></span>
        <span id="mt"></span>
        <span id="dt"></span>
        <span id="yr"></span>
      </p>
    </div>

    <div class="clock">
      <div>
        <span id="hour">00</span>
        <span class="text">Hours</span>
      </div>
      <div>
        <span id="minutes">00</span>
        <span class="text">Minutes</span>
      </div>
      <div>
        <span id="seconds">00</span>
        <span class="text">Seconds</span>
      </div>
      <div>
        <span id="ampm">AM</span>
      </div>
    </div>

    <script src="js/script.js"></script>
  </body>
</html>

Once you did that then you need to style it. I’ve included the style.css file inside the index.html file. So, you need to create a style.css file, inside the file, you need to add the style of the clocks.

@import url("https://fonts.googleapis.com/css2?family=Poppins&family=Roboto&display=swap");
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "poppins", sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background: #36454f;
  overflow: hidden;
  background: url("../img/bg3.jpg") no-repeat center center/cover;
}

h2 {
  font-size: 5rem;
  letter-spacing: 5px;
  margin: 1rem 0px;
  text-align: center;
  color: #fff;
}

.clock {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.clock div {
  margin: 05px;
  position: relative;
}

.days p {
  background: #db347d;
  padding: 1rem 6rem;
  text-align: center;
  font-size: 1.2rem;
  color: #fff;
}

.clock div span {
  display: flex;
  width: 100%;
  height: 100px;
  background: #fff;
  justify-content: center;
  align-items: center;
  font-size: 5rem;
  padding: 4rem 3.5rem;
  font-weight: 800;
  border-radius: 04px;
}

.clock .text {
  font-size: 14px;
  height: 10px;
  padding: 1.5rem;
  letter-spacing: 2px;
  background: #3e57d0;
  color: #fff;
  font-weight: 600;
}

.clock #ampm {
  bottom: 0;
  position: absolute;
  width: 60px;
  height: 30px;
  font-size: 25px;
  padding: 1.5rem 3rem;
}

Once you do that, then you will able to see your designing has been completed. The next thing you need to use JavaScript to display the time with date.

So, in the JS file, you need to get the values from the index.html file, and then you need to use it inside the JS File, here is JS Code, you need to add it inside the JS file.

let hours = document.getElementById("hour");
let minutes = document.getElementById("minutes");
let seconds = document.getElementById("seconds");
let ampm = document.getElementById("ampm");

function update_fun() {
  let h = new Date().getHours();
  let m = new Date().getMinutes();
  let s = new Date().getSeconds();

  let ampm = "AM";

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

  if (h < 10) {
    h = "0" + h;
  }
  if (m < 10) {
    m = "0" + m;
  }
  if (s < 10) {
    s = "0" + s;
  }

  hours.innerText = h;
  minutes.innerText = m;
  seconds.innerText = s;
  ampm, (innerText = ampm);

  let days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

  // Day
  let d = new Date();
  let dayName = days[d.getDay()];
  dy.innerText = dayName + ",";

  // Month
  let month = d.toLocaleString("default", { month: "long" });
  mt.innerText = month;

  // Date
  let date = d.getDate();
  dt.innerText = date + ",";

  // Year
  let year = d.getFullYear();
  yr.innerText = year;

  setInterval(() => {
    update_fun();
  }, 1000);
}

update_fun();

Tips and Tricks

Here are some tips and tricks to help you make a digital clock using JavaScript:

1. Use the Date object to get the current time.

2. Use the setInterval() method to call a function that will update the clock every second.

3. Use the innerHTML property to set the content of an element.

4. Use CSS to style your clock.

Javascript Digital Clock 12 Hour Format

I’ve made the video tutorial inside that, you will learn step by step How to Make JavaScript Digitla CLock 12 Hour Format. Also you will learn How to display the Day, Month, Date and Also Year.

It’s chaning automatically, If you want to add that inside your website, you can do that. Basically, there many websites displaying the digital clock with date.

So, I’m going to share with you How to make a digital clock using JavaScript step by step. Before learning that, you’ve a basic knowledge of HTML, CSS and Also JavaScript.

FAQs

Q: What is a digital clock?
A digital clock is a type of clock that displays the time in digital format.

Q: How do digital clocks work?
Digital clocks work by displaying the time in numerical form. This is usually done by using an LCD or LED display.

Q: How do I make a digital clock?
You can make a digital clock using various different methods. One popular method is to use a microcontroller such as an Arduino, and create the clock using code written in C++ or a similar language. Another method is to use a Raspberry Pi and create the clock using code written in Python or a similar language.

Q: What are the benefits of using a digital clock?
Digital clocks have many benefits over traditional analog clocks. They are more accurate, easier to read, and take up less space.

How to Create Analog Clock Using HTML CSS and JavaScript

Hey everybody, recently, I’ve made a project namely Analog Clock. So, I’m going to share with you how to use HTML, CSS & JavaScript to create it from scratch. Inside the project, I didn’t use any image to display the analog clock, I used HTML and CSS to design it and then JavaScript to move the time.

Conclusion

In this project, we’ve learned How to Make a Digital Clock Using JavaScript. We used JavaScript for the clock’s functionality and CSS for the styling.

You May Also Like:

JavaScript was used to generate the current time, which is updated every second. Finally, we styled the clock with CSS to give it a nicer look.

Overall, this was a simple project that only required basic knowledge of HTML, CSS, and JavaScript. With that said, it was still a fun project to build and it looks great!

RELATED ARTICLESMORE FROM AUTHOR

LEAVE A REPLY

Please enter your comment!
Please enter your name here

This site uses Akismet to reduce spam. Learn how your comment data is processed.