Creating a Digital Live Clock with AM/PM in 12-Hour Format Using HTML, CSS, and JavaScript

Digital Clock using JavaScript
5/5 - (1 vote)

In this blog post, we will create a simple yet elegant digital clock that displays the current time in a 12-hour format with AM/PM. We’ll utilize HTML for the structure, CSS for styling, and JavaScript to handle the dynamic updating of the time.

Step-by-Step Guide

Step 1: Setting Up the HTML Structure

We start by setting up the basic HTML structure. This will include a div element that will serve as the container for our clock.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Live Clock</title>
</head>
<body>
<div class="clock" id="clock"></div>
</body>
</html>

In the code above:

  • The <!DOCTYPE html> declaration defines this document as an HTML5 document.
  • The <html lang="en"> element specifies the language of the document.
  • The <head> section includes metadata such as character set and viewport settings.
  • The <body> contains a div with the class clock and the ID clock, which will display the time.

Step 2: Adding CSS for Styling

Next, we add some CSS to style our clock. We aim for a clean, centred design with a modern look.

<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.clock {
font-family: 'Arial', sans-serif;
color: #333;
font-size: 5em;
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>

In the CSS code:

  • We use display: flex on the body to center the clock both horizontally and vertically.
  • The clock class has a font size of 5em for large digits, a background colour of white, padding, rounded corners, and a slight shadow for a modern look.

Step 3: Adding JavaScript for Functionality

Now, we add JavaScript to dynamically update the time every second and format it to a 12-hour clock with AM/PM.

<script>
function updateClock() {
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
const ampm = hours >= 12 ? 'PM' : 'AM';

hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;

const timeString = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
document.getElementById('clock').textContent = timeString;
}

setInterval(updateClock, 1000);
updateClock(); // Initial call to set the clock correctly on load
</script>

In the JavaScript code:

  • The updateClock function gets the current time using the Date object.
  • It extracts hours, minutes, and seconds.
  • It determines whether the current time is AM or PM.
  • It converts the 24-hour format to 12-hour format and ensures that hours, minutes, and seconds are always displayed as two digits (e.g., “01” instead of “1”).
  • The time string is then displayed in the clock div.
  • setInterval(updateClock, 1000) calls the updateClock function every second.
  • An initial call to updateClock() ensures the clock is set correctly when the page loads.

Full Code

Here is the complete code for our digital live clock:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Digital Live Clock</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
}
.clock {
font-family: 'Arial', sans-serif;
color: #333;
font-size: 5em;
text-align: center;
background-color: #fff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
</style>
</head>
<body>
<div class="clock" id="clock"></div>
<script>
function updateClock() {
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();
const ampm = hours >= 12 ? 'PM' : 'AM';

hours = hours % 12;
hours = hours ? hours : 12; // the hour '0' should be '12'
hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;

const timeString = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
document.getElementById('clock').textContent = timeString;
}

setInterval(updateClock, 1000);
updateClock(); // Initial call to set the clock correctly on load
</script>
</body>
</html>

Conclusion

Creating a digital clock with AM/PM in a 12-hour format using HTML, CSS, and JavaScript is a great way to practice your web development skills. This project helps you understand how to work with dates and times in JavaScript, as well as how to dynamically update content on a webpage. With just a few lines of code, you can create a functional and stylish clock that can be incorporated into any web project.

FAQs

1. What is the purpose of this digital clock project?

The purpose of this project is to create a simple digital clock that displays the current time in a 12-hour format with AM/PM indicators using HTML, CSS, and JavaScript. It’s a great way to practice basic web development skills and understand how to manipulate time and dynamic content on a webpage.

2. Can I customize the appearance of the clock?

Yes, you can customize the appearance of the clock by modifying the CSS. You can change the font, size, color, background, padding, border radius, and box shadow to match your design preferences.

3. How does the JavaScript code update the time every second?

The JavaScript code uses the setInterval function to call the updateClock function every 1000 milliseconds (1 second). This ensures the time displayed is updated every second.

4. Why do we use hours % 12 in the JavaScript code?

We use hours % 12 to convert the 24-hour time format to a 12-hour format. The modulo operation ensures that hours are wrapped around correctly, and hours ? hours : 12 ensures that the hour ‘0’ is displayed as ’12’.

5. What if I want to display the clock in a 24-hour format instead?

To display the clock in a 24-hour format, you can remove the AM/PM calculation and formatting part from the JavaScript code. Modify the updateClock function as follows:

function updateClock() {
const now = new Date();
let hours = now.getHours();
let minutes = now.getMinutes();
let seconds = now.getSeconds();

hours = hours < 10 ? '0' + hours : hours;
minutes = minutes < 10 ? '0' + minutes : minutes;
seconds = seconds < 10 ? '0' + seconds : seconds;

const timeString = hours + ':' + minutes + ':' + seconds;
document.getElementById('clock').textContent = timeString;
}

6. Can I use this clock in my own website or project?

Absolutely! This digital clock is a great addition to any website or project. Feel free to use and customize it as needed.

7. What if I want to display the clock in a different time zone?

To display the clock in a different time zone, you need to adjust the Date object accordingly. You can use libraries like moment.js or the Intl.DateTimeFormat object for more complex time zone manipulations.

8. Why do we ensure that hours, minutes, and seconds are displayed as two digits?

Displaying hours, minutes, and seconds as two digits ensures a consistent format (e.g., “01” instead of “1”), which looks cleaner and is easier to read. We achieve this by prefixing single-digit values with a ‘0’.

9. How can I add additional features like date display or different styles?

You can extend the functionality by adding more elements in the HTML and updating the JavaScript to include date calculations. For different styles, you can enhance the CSS with additional properties and animations.

10. Is this clock responsive?

Yes, the clock is designed to be responsive. The flexbox layout centers it on the screen, and the text size adapts based on the container’s dimensions. However, you may need to tweak the CSS for specific responsive behavior based on your requirements.