Building Clock through HTML, CSS, and JS | Build&Learn

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:

<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.

#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.

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).

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.

#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.

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.