Building Clock through HTML, CSS, and JS | Build&Learn
Tags: html, css, javascript, webdev
Published: 2023-01-05 10:32:00

If you're just starting to learn JavaScript, one fun and practical project you can try is building a clock. In this tutorial, we'll be building a minimal and simple clock that displays the current time on a page. Not only will this give you a chance to practice your JavaScript skills, but it will also teach you about the `Date` object, which is an important tool for working with dates and times in JavaScript.

Let's get started. 

---

### HTML and CSS

The first step in building our clock is to set up the basic structure of the webpage using HTML. We'll create a container for the clock and add a few basic styles using CSS to make the clock look presentable.

Here is the HTML code for our clock:

```html
<div id="clock">
  <div class="time">
    <span class="hours">00</span>:<span class="minutes">00</span>:<span class="seconds">00</span>
  </div>
</div>
```

This creates a `div` element with an ID of "**clock**" that contains another `div` element with the class "time". Inside the "time" `div`, we have three `span` elements for the *hours*, *minutes*, and *seconds*, each with a default value of "00".

Next, let's add some basic styles using CSS. 

```css
#clock {
  font-size: 48px;
  color: #333;
  text-align: center;
  padding: 20px;
}
```

With this HTML and CSS in place, we now have a basic container for our clock. Next, we'll write the JavaScript code that will make the clock function.

---

### JavaScript

To make the clock display the current time, we'll need to use the `Date` object in JavaScript. The `Date` object represents a single point in time, and it has a number of methods for retrieving various pieces of information about the current date and time.

We'll start by writing a function that uses the `Date` object to extract the current *hour*, *minute*, and *second*, and displays these values on the webpage.

```js
function updateTime() {
  // Get the current date and time
  var now = new Date();

  // Extract the hours, minutes, and seconds from the date object
  var hours = now.getHours();
  var minutes = now.getMinutes();
  var seconds = now.getSeconds();

  // Add a leading zero to the hours, minutes, and seconds if they are less than 10
  if (hours < 10) hours = "0" + hours;
  if (minutes < 10) minutes = "0" + minutes;
  if (seconds < 10) seconds = "0" + seconds;

  // Update the clock display
  document.querySelector(".hours").innerHTML = hours;
  document.querySelector(".minutes").innerHTML = minutes;
  document.querySelector(".seconds").innerHTML = seconds;
}
```

**What does the function does?** 

- Creates a new `Date` object and stores it in the `now` variable.
- Extracts the hours, minutes, and seconds from the `Date` object using the `getHours()`, `getMinutes()`, and `getSeconds()` methods, respectively.
- Adds a leading zero to the hours, minutes, and seconds if they are less than 10, using an `if` statement and string concatenation.
- Updates the clock display by selecting the `.hours`, `.minutes`, and `.seconds` elements using the `querySelector()` method, and setting their `innerHTML` property to the current hour, minute, and second.

Now that we have coded the `updateTime()` function, we can call it to update the clock display whenever we want. To make the clock update automatically every second, we can use the `setInterval()` function, which calls a specified function at a specified interval (that is in milliseconds).

```js
setInterval(updateTime, 1000);
```

This above code calls the `updateTime()` function every every second (1000 is milliseconds above = 1 Second).

With this code in place, our simple JavaScript clock is now functioning! You can try it out by copying the HTML, CSS, and JavaScript code into a file and opening it in a browser.

---

### Let's enhance our Clock

There are a few ways you can enhance the functionality of the clock. Here are a few tips:

-   Add a digital or analog display: Instead of displaying the time as text, you could use an image or a set of `div` elements to create a digital or analog clock display.
-   Add a **stopwatch** or timer: You could modify the clock to function as a stopwatch or timer by adding buttons to start, stop, and reset the clock. [With this functionality I'll come up with detailed article]

Let's add digital display or I say design a little bit. 

```css
#clock {
  font-size: 48px;
  color: #333;
  text-align: center;
  font-family: sans-serif;
  padding: 20px;
  background: linear-gradient(to bottom, #eeeeee, #dddddd);
  box-shadow: 0  5px  10px  rgba(0, 0, 0, 0.1);
}

#clock .display {
  display: flex;
  justify-content: center;
  align-items: center;
}

#clock .display > div {
  width: 30px;
  height: 30px;
  background: #eee;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 5px;
  font-size: 24px;
  font-weight: bold;
}
```

With this tutorial above you can also refer to this codepen below. 

<iframe height="300" style="width: 100%;" scrolling="no" title="JavaScript Clock - Build&amp;Learn" src="https://codepen.io/rahulbiz/embed/bGjpGBZ?default-tab=result&theme-id=dark" frameborder="no" loading="lazy" allowtransparency="true" allowfullscreen="true">
  See the Pen <a href="https://codepen.io/rahulbiz/pen/bGjpGBZ">
  JavaScript Clock - Build&amp;Learn</a> by Rahul (<a href="https://codepen.io/rahulbiz">@rahulbiz</a>)
  on <a href="https://codepen.io">CodePen</a>.
</iframe>


### Takeaway

In this tutorial, we learned how to build a simple **JavaScript clock** that displays the current time on a page. We covered the basics of HTML and CSS, and learned how to use the `Date` object and the `setInterval()` function in JavaScript. We also looked at a few ways to enhance the clock, such as adding a digital or analog display and making the clock **update automatically**.

Building a JavaScript clock is a fun and practical way to practice your JavaScript skills, and it's a useful tool to have in your toolkit. I hope you enjoyed this tutorial, please share with others and help them. 


If you don't have any idea about HTML, I suggest you to read [HTML guide](https://rahulbiz.vercel.app/blog/html-unleashed).