How to create a clock using JavaScript?
Tags: html, css, javascript
Published: 2020-12-08 04:28:26

---
title: How to create a clock using JavaScript?
published: true
date: 2020-12-04 11:00:00 UTC
tags: html,css,javascript
canonical_url: https://blog.murtajaziad.xyz/how-to-create-a-clock-using-javascript/
---

In the beginning, create a new HTML, CSS & JavaScript file..

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Clock using JavaScript</title>
    <link rel="stylesheet" href="style.css" />
    <script src="app.js" defer></script>
  </head>
  <body></body>
</html>
```

Then, put a `h2` with three `span` with the ID `hours`, `minutes` and `seconds`..

```html
<h2>
  <span id="hours">00</span> : <span id="minutes">00</span> :
  <span id="seconds">00</span>
</h2>
```

Now, it will look like this..[![how to create a clock using javascript 1](https://blog.murtajaziad.xyz/static/fe028e0ffc50360ed1c17ec4950c73dc/fcda8/how-to-create-a-clock-using-javascript-1.png "how to create a clock using javascript 1")](/static/fe028e0ffc50360ed1c17ec4950c73dc/d8104/how-to-create-a-clock-using-javascript-1.png)

Add some basic styling with a background..

```css
body {
  padding: 0;
  margin: 0;
  box-sizing: border-box;

  min-height: 100vh;

  background-image: url("https://images.unsplash.com/photo-1605364441002-c1dbf7d9c7f1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&q=100");
  background-repeat: no-repeat;
  background-position: center 40%;

  display: flex;
  align-items: center;
  justify-content: center;
}

h2 {
  font-size: 7rem;
  color: white;
}
```

It will look like this..[![how to create a clock using javascript 2](https://blog.murtajaziad.xyz/static/49cb76dc19bda1aca427b35d0be57c8b/fcda8/how-to-create-a-clock-using-javascript-2.png "how to create a clock using javascript 2")](/static/49cb76dc19bda1aca427b35d0be57c8b/d8104/how-to-create-a-clock-using-javascript-2.png)

After that, create the main function which will get the time and put it into the `span`s

```js
// Define the hours, minutes & seconds elements.
const hoursEl = document.getElementById("hours");
const minutesEl = document.getElementById("minutes");
const secondsEl = document.getElementById("seconds");

function main() {
  const totalSeconds = new Date().getTime() / 1000;

  const hours = Math.floor(totalSeconds / 3600) % 24;
  const minutes = Math.floor(totalSeconds / 60) % 60;
  const seconds = Math.floor(totalSeconds) % 60;

  hoursEl.innerText = formatTime(hours);
  minutesEl.innerText = formatTime(minutes);
  secondsEl.innerText = formatTime(seconds);
}

// Format the time by adding 0 before the time if it's less than 10..
function formatTime(time) {
  return time < 10 ? `0${time}` : time;
}

// Initial call.
main();

// Call the function every second.
setInterval(main, 1000);
```

and yeah, now it’s working..[![how to create a clock using javascript 3](https://blog.murtajaziad.xyz/static/0ffe5f966de4b0cedc0c171cdd27fb54/fcda8/how-to-create-a-clock-using-javascript-3.png "how to create a clock using javascript 3")](/static/0ffe5f966de4b0cedc0c171cdd27fb54/d8104/how-to-create-a-clock-using-javascript-3.png)