Creating a Customizable Digital Clock with HTML, CSS, and JavaScript

A digital clock is a popular feature on many websites and applications. It’s a simple but useful tool that allows users to quickly see the current time. In this tutorial, we’ll show you how to create a customizable digital clock using HTML, CSS, and JavaScript.

Getting Started

To get started, we’ll create a basic HTML structure for our clock. Open up your favorite text editor and create a new file called index.html. Then, paste the following code into it:

This HTML code creates a basic structure for our clock. It includes a div with a class of “clock” and a child div with a class of “time”. Inside the time div, we’ve added separate span elements for hours, minutes, and seconds, with a separator span between each one. We’ve also included links to an external CSS file called style.css and an external JavaScript file called script.js.

Styling the Clock

Now that we have our basic HTML structure in place, let’s add some styles to make our clock look nice. Create a new file called style.css and paste the following code into it:

This CSS code adds several style rules to customize the appearance of our clock. Here’s what each rule does:

• .clock: Sets the background color of the clock to a dark gray (#333).
• .time: Sets the font size of the clock to 5 rem, the font family to sans-serif, and makes it a flex container so that the time elements can be aligned horizontally.
• .separator: Adds a margin of 0.5 rem on either side of the separator element.
• .hours, .minutes, .seconds: Sets the display to inline-block so that they can be styled as boxes, sets the width to 3.5 rem, sets the text alignment to center, sets the background color to white, sets the text color to dark gray (#333), adds a border radius of 0.5 rem to make the corners rounded, adds a margin of 0.25 rem on either side, adds padding of 0.25 rem to give the elements some space, and adds a box shadow to give them a subtle 3D effect.

You can further customize the clock’s appearance by changing these style rules or adding new ones.

Adding Functionality with JavaScript

Now that we have our clock styled, let’s add some functionality to make it actually tell time. Create a new file called script.js and paste the following code into it:

This JavaScript code defines a function called updateClock that retrieves the current time, formats it as a string, and updates the text content of the time elements inour HTML code. The function uses the Date object to get the current time, and the padStart method to add a leading zero to the hours, minutes, and seconds if they are less than 10. It then creates a time string in the format “hh:mm:ss” and sets the text content of the hours, minutes, and seconds elements in the HTML to the corresponding values.

The setInterval function is used to call the updateClock function once per second, effectively updating the clock in real time.

If you want to modify the digital clock to display the time in a 12-hour format (with AM/PM), you can modify the JavaScript code to include an additional step. Here’s an example of how you can modify the code:

If you want to modify the digital clock to display the time in a 12-hour format (with AM/PM), you can modify the JavaScript code to include an additional step. Here’s an example of how you can modify the code:

function updateClock() {
  const now = new Date();

  // Get the current hours, minutes, and seconds
  let hours = now.getHours();
  const minutes = now.getMinutes().toString().padStart(2, '0');
  const seconds = now.getSeconds().toString().padStart(2, '0');

  // Convert hours to 12-hour format
  const amOrPm = hours >= 12 ? 'PM' : 'AM';
  hours = hours % 12 || 12;

  // Update the time string
  const timeString = `${hours}:${minutes}:${seconds} ${amOrPm}`;

  // Update the HTML elements
  document.querySelector('.hours').textContent = hours.toString().padStart(2, '0');
  document.querySelector('.minutes').textContent = minutes;
  document.querySelector('.seconds').textContent = seconds;
  document.querySelector('.am-pm').textContent = amOrPm;
}

setInterval(updateClock, 1000);

In this modified code, we first get the current hours using now.getHours(). We then use the modulo operator (%) to convert the hours to a 12-hour format. If the hours are greater than or equal to 12, we set the amOrPm variable to ‘PM’, otherwise we set it to ‘AM’. We also use the padStart method to ensure that the hours are always two digits (e.g. ’01’ instead of ‘1’).

We then update the timeString variable to include the AM/PM indicator, and we update the text content of the .am-pm element in the HTML to display this value.

With these modifications, the clock will now display the time in a 12-hour format with AM/PM. Note that you may need to modify the CSS to accommodate the longer time string (e.g. by increasing the width of the .hours element).

Conclusion

And that’s it! With just a few lines of HTML, CSS, and JavaScript, you can create a customizable digital clock that displays the current time and looks great on any website or application. Feel free to experiment with different styles and functionality to create a clock that suits your needs.  You can download the files for this project from the following link: https://github.com/yemcoders/customizable-digital-clock Happy coding!