Create a digital clock with HTML, CSS, and JavaScript. This step-by-step guide will help you understand the basics of web development.
Table of Contents
Welcome to our tutorial on building a digital clock using HTML, CSS, and JavaScript. In this step-by-step guide, we will show you how to create a functional clock that you can integrate into your web projects. Whether you're a beginner or looking to expand your web development skills, this tutorial is perfect for you.
In today's digital age, clocks are not only functional but also play an essential role in enhancing the user experience on websites and applications. By incorporating a digital clock, you can provide real-time information to your users, whether it's displaying the current time, countdowns, or time-related events.
Building a digital clock using HTML, CSS, and JavaScript is a great way to understand the fundamentals of web development. HTML (Hypertext Markup Language) provides the structure and content, CSS (Cascading Style Sheets) allows us to style and customize the clock's appearance, and JavaScript adds interactivity and functionality.
Don't worry if you're new to web development. This tutorial is designed with beginners in mind. We will explain each step in detail, providing code examples and explanations to ensure you grasp the concepts and can apply them to your own projects.
By the end of this tutorial, you'll have a fully functional digital clock that you can customize and integrate into your websites or even use as a basis for more complex applications. So let's dive in and start building our digital clock using HTML, CSS, and JavaScript!
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Code by: Aaron Farrar
Source Code
Step 1 (HTML Code):
To get started, we will first need to create a basic HTML file. In this file, we will include the main structure for our Clock.
After creating the files just paste the following below codes into your file. Make sure to save your HTML document with a .html extension, so that it can be properly viewed in a web browser.
Let's go through each section:
1. <!DOCTYPE html>: This declaration is used to specify that the document is an HTML5 document.
2. <html lang="en">: This tag represents the root element of the HTML document and specifies the language of the content, which is English in this case.
3. <head>: The head section contains meta-information about the document and is not displayed on the web page itself.
4. <title>Digital Clock</title>: This tag sets the title of the web page, which is displayed in the browser's title bar or tab.
5. <meta charset="UTF-8" />: This meta tag specifies the character encoding for the HTML document, which is UTF-8 (a widely used character encoding for Unicode).
6. <meta name="viewport" content="width=device-width" />: This meta tag sets the viewport properties for responsive web design, ensuring that the page is rendered properly on different devices and screen sizes.
7. <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Orbitron'>: This link tag includes an external CSS file from Google Fonts. It imports the Orbitron font to be used in the web page.
8. <link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Aldrich'>: This link tag imports another external CSS file from Google Fonts, this time importing the Aldrich font.
9. <link rel="stylesheet" href="styles.css" />: This link tag imports a CSS file named "styles.css" from the same directory as the HTML file. It applies custom styles to elements on the page.
10. <body>: The body section contains the visible content of the web page.
11. <div id="MyClockDisplay" class="clock" onload="showTime()"></div>: This div element creates a container with an ID of "MyClockDisplay" and a class of "clock". The onload attribute calls a JavaScript function called "showTime()" when the page finishes loading. This element will be used to display a digital clock on the page.
12. <script src="script.js"></script>: This script tag includes an external JavaScript file named "script.js" from the same directory as the HTML file. It allows you to write JavaScript code that will be executed by the browser. In this case, the JavaScript code is responsible for updating and displaying the digital clock.
This is the basic structure of our Clock using HTML, and now we can move on to styling it using CSS.
Step 2 (CSS Code):
Once the basic HTML structure of the clock is in place, the next step is to add styling to the clock using CSS.
Next, we will create our CSS file. In this file, we will use some basic CSS rules to style our clock.
Let's go through each part of the code:
1. body selector: This selects the <body> element of the HTML document. It sets the background color of the entire page to black.
2. .clock selector: This selects elements with the class name "clock". It is used to style a specific element or group of elements representing a clock.
3. position: absolute;: This property positions the element absolutely within its parent element. This means that the element is removed from the normal flow of the document and positioned based on the values specified for the top, left, right, and bottom properties.
4. top: 50%;: This property positions the element 50% down from the top edge of its parent element.
5. left: 50%;: This property positions the element 50% across from the left edge of its parent element.
6. transform: translateX(-50%) translateY(-50%);: This property applies a 2D translation to move the element horizontally (-50% of its own width) and vertically (-50% of its own height). This centers the element both horizontally and vertically within its parent element.
7. color: #17D4FE;: This property sets the text color of the element to a cyan-like color with the hexadecimal value #17D4FE.
8. font-size: 60px;: This property sets the font size of the text within the element to 60 pixels.
9. font-family: Orbitron;: This property sets the font family of the text within the element to "Orbitron", which is a specific font style.
10. letter-spacing: 7px;: This property sets the spacing between individual characters in the text within the element to 7 pixels.
This will give our clock an upgraded presentation. Create a CSS file with the name of styles.css and paste the given codes into your CSS file. Remember that you must create a file with the .css extension.
body {
background: black;
}
.clock {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
color: #17D4FE;
font-size: 60px;
font-family: Orbitron;
letter-spacing: 7px;
} Step 3 (JavaScript Code):
Finally, we need to create a function in JavaScript.
Here's a breakdown of how the code works:
The function begins by creating a new Date object, which represents the current date and time.
It then retrieves the current hour, minute, and second from the Date object using the getHours(), getMinutes(), and getSeconds() methods, respectively. The hours range from 0 to 23, and the minutes and seconds range from 0 to 59.
A variable called session is initialized with the value "AM" to represent the time period of either "AM" or "PM".
The code checks if the hour (h) is equal to 0. If so, it sets h to 12 because 0 represents midnight in a 12-hour format.
Next, it checks if the hour (h) is greater than 12, indicating PM. If true, it subtracts 12 from h to convert it to a 12-hour format, and sets session to "PM" accordingly.
To ensure that the hours, minutes, and seconds are displayed in two-digit format (e.g., 01 instead of 1), the code uses the ternary operator (?) to check if any of these values are less than 10. If true, a leading zero is added; otherwise, the value remains as is.
The hours (h), minutes (m), seconds (s), and session (session) are concatenated to form a time string in the format "hh:mm:ss AM/PM".
The time string is then displayed on the web page by setting the innerText and textContent properties of the element with the ID "MyClockDisplay" to the time variable.
Finally, the showTime function is set to execute again after a 1000 millisecond (1 second) delay using the setTimeout function. This ensures that the displayed time is updated every second.
The showTime function is called once outside its definition to start the time display immediately when the page loads.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
function showTime(){
var date = new Date();
var h = date.getHours(); // 0 - 23
var m = date.getMinutes(); // 0 - 59
var s = date.getSeconds(); // 0 - 59
var session = "AM";
if(h == 0){
h = 12;
}
if(h > 12){
h = h - 12;
session = "PM";
}
h = (h < 10) ? "0" + h : h;
m = (m < 10) ? "0" + m : m;
s = (s < 10) ? "0" + s : s;
var time = h + ":" + m + ":" + s + " " + session;
document.getElementById("MyClockDisplay").innerText = time;
document.getElementById("MyClockDisplay").textContent = time;
setTimeout(showTime, 1000);
}
showTime();Final Output:
Conclusion:
Congratulations on completing our tutorial on building a digital clock using HTML, CSS, and JavaScript! You've learned how to create a functional clock from scratch and gained valuable insights into web development.
Throughout this tutorial, we covered the essential steps required to build a digital clock. We started by setting up the HTML structure, creating the necessary elements, and assigning IDs for easy identification. Then, we added CSS styles to enhance the visual appeal of the clock and make it fit seamlessly into your web design. Finally, we implemented JavaScript functionality to update the time dynamically.
By following along and understanding each step, you now have a solid foundation in using HTML, CSS, and JavaScript together to create interactive elements on the web. These skills can be further expanded upon to develop more complex web applications and add interactive features to your projects.
Remember, practice is key to mastering web development. Experiment with different styles, try adding additional features to your clock, or even incorporate it into a larger project. The more you practice and explore, the better you'll become at leveraging these technologies to create captivating and user-friendly web experiences.
We hope you enjoyed this tutorial and found it informative and helpful. Digital clocks are just the beginning of what you can achieve with HTML, CSS, and JavaScript. Keep exploring, keep learning, and continue building amazing things on the web.
Thank you for joining us on this journey, and best of luck with your future web development endeavors!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
