<p>in this tutorial, we will learn <strong>How to Make Digital Clock using JavaScript</strong>. 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.</p>
<p>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 in text format. Some also include alarm functions.</p>
<p>This project is for beginners or newbies, who are learning JavaScript. inside the project, you will learn step-by-step usage of HTML, and CSS to design the page. Then you will learn How to use JavaScript to display the dynamic clock.</p>
<h3 id="heading-what-you-will-need">What You Will Need</h3>
<p>-A computer with Internet Access<br />-A JavaScript Enabled Web Browser<br />-An Internet Connection<br />-A Text Editor</p>
<h3 id="heading-how-to-make-a-digital-clock-using-javascript">How to Make a Digital Clock Using JavaScript</h3>
<p>This is a guide on how to make a digital clock using JavaScript.</p>
<p>You will need the following:</p>
<p>– A web browser that supports JavaScript<br />– A text editor<br />– Optional: A desktop or laptop computer (this guide will assume you are using a computer)</p>
<p>Instructions:</p>
<p>First of All, you need to create an <strong>index.html</strong> file, inside the file you need to add the html structure. So, I’m going to share with you the complete codes inside the <strong>index.html</strong>.</p>
<p>&lt;!DOCTYPE html&gt;  </p>
<p><br />  <br />    <br />    <br />    <br />    How to Make Digital Clock in HTML, CSS and JavaScript<br />    <br />  <br />  <br />    <div><br />      <br />        <span><br />        <span><br />        <span><br />        <span><br />      </span></span></span></span><br />      </div></p>
<p></p><div><br />      <br />        <span>00<br />        <span>Hours<br />      </span></span><br />      <br />        <span>00<br />        <span>Minutes<br />      </span></span><br />      <br />        <span>00<br />        <span>Seconds<br />      </span></span><br />      <br />        <span>AM<br />      </span><br />    <br />    </div>

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 in text format. Some also include alarm functions.

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

### What You Will Need

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

### How to Make a 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 to create an **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 do 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 be able to see your design 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 the JS Code, you need to add it inside the JS file.

script.js

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

<iframe src="https://www.youtube.com/embed/VIcjQ6TdyrM?feature=oembed" width="700" height="393" frameborder="0" scrolling="no"></iframe>

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 changing automatically, If you want to add that inside your website, you can do that. Basically, there are 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 have a basic knowledge of HTML, CSS, and 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.

<iframe src="https://www.youtube.com/embed/5x58ASjE14o?feature=oembed" width="700" height="393" frameborder="0" scrolling="no"></iframe>

### 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:**

*   [**How to Make Calculator in JavaScript**](https://www.onlineittuts.com/how-to-make-a-calculator-in-javascript.html)
*   [**Best IDE for HTML CSS Javascript**](https://www.onlineittuts.com/best-ide-for-html-css-javascript.html)
*   [**JavaScript Projects For Beginners**](https://www.onlineittuts.com/javascript-project-for-beginners.html)

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!

How to Make a Digital Clock Using JavaScript

Write the Codes and Solve the Problems :)
