Introduction of the Project
Digital clocks are an integral part of our daily lives, whether it be on our smartphones, computers, or even on our wrists. In this Javascript tutorial, we’ll learn how to create a digital clock using JavaScript. JavaScript is a versatile and widely used programming language that allows us to add dynamic elements to web pages. With just a few lines of code, we’ll be able to build a functional digital clock that updates in real time. Whether you’re a beginner or an experienced programmer, this tutorial is a great way to enhance your JavaScript skills and build a fun and practical project.
We will use HTML to build the basic GUI and CSS to improve the styling of the website. Javascript will be used to create a method ‘setInterval’ that calls the function that changes the HTML after every 10 milliseconds so it appears the clock is running.
Objectives
- To understand the basic concepts of JavaScript and how to use it to create dynamic web elements.
- To learn how to use JavaScript to display the current time in a digital format.
- To gain experience with JavaScript functions, variables, and the date and time methods.
- To develop the ability to use JavaScript to create interactive web pages.
- To understand how to use CSS styles to customize the appearance of the digital clock.
- To build a practical and functional digital clock that can be used on any web page.
- To increase your JavaScript skills and gain experience working with real-world applications.
Requirements
- Text editor to write and save the HTML, CSS, and JavaScript code. [For instance: Visual Studio Code]
- Basic knowledge of HTML and CSS for structuring and styling the digital clock.
- Understanding of JavaScript fundamentals, including variables, functions, and date and time methods.
- Web browser to preview the digital clock and test its functionality.
- Access to the internet to find resources and information about JavaScript and digital clock development.
- Familiarity with the Document Object Model (DOM) and how to manipulate it with JavaScript.
Source Code
HTML Code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript Digital Clock</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <span id="hours">00</span> <span>:</span> <span id="minutes">00</span> <span>:</span> <span id="seconds">00</span> <span id="session">AM</span> </div> <script src="clock.js"></script> </body> </html>
CSS Code
body{
margin: 0%;
padding: 0%;
background: black;
}
.container{
font-family: "Arial", Helvetica, sans-serif;
padding: 30px;
color: #fff;
font-weight: bold;
position: absolute;
top: 50%;
right: 50%;
transform: translate(50%, -50%);
font-size: 150px;
white-space: nowrap;
}
body {
margin: 0;
padding: 0;
background-color: #000;
}JAVASCRIPT Code
function displayTime(){
let date = new Date();
let hrs = date.getHours();
let min = date.getMinutes();
let sec = date.getSeconds();
if(hrs>=12){
document.getElementById('session').innerHTML = 'PM';
}else document.getElementById('session').innerHTML ='AM';
document.getElementById('hours').innerHTML=hrs;
document.getElementById('minutes').innerHTML=min;
if(sec<10) document.getElementById('seconds').innerHTML = '0'+sec;
else document.getElementById('seconds').innerHTML=sec;
if(min<10) document.getElementById('minutes').innerHTML = '0'+min;
else document.getElementById('minutes').innerHTML=min;
}
setInterval(displayTime,10);Explanation of the Code
We have divided the code into three sections. The HTML & CSS involves creating the GUI and styling it. The other is retrieving the computer clock’s hours, minutes, and seconds data using JavaScript.
1. It consists of multiple <span> tags to denote hours, minutes, and seconds.
2. The CSS file is meant for styling the HTML, providing the container with appropriate margins, padding, font color, and font size.
Moving to the time extraction process, we will apply the following:
1. It uses a Date object that has several functions required to retrieve time data.
2. It has a ‘setInterval’ function which calls the function that sets the time every 10 milliseconds.
Output
Main Interface
Points To Remember
We have successfully built a simple digital clock using Javascript. It extracts data of minutes, hours, and seconds from the computer clock and displays it on the webpage using simple HTML and CSS code. Here are some important points to remember while building this javascript project.
- Use the Date object in JavaScript to get the current time and date.
- Use the setInterval() method to repeatedly update the time display every second.
- Format the time using appropriate methods and display it using innerHTML property of the HTML elements.
- Use CSS styles to control the appearance of the digital clock, including font size, color, and alignment.
- Remember to include the JavaScript code in the HTML file using script tags and to reference the correct file path if the code is stored in a separate file.
- Test the digital clock in different web browsers and devices to ensure it works correctly.
- Keep the code organized and well-commented to make it easier to understand and maintain.
- Continuously learn and expand your JavaScript skills to create more advanced and sophisticated digital clocks and other web applications.
Cisco Ramon is an American software engineer who has experience in several popular and commercially successful programming languages and development tools. He has been writing content since last 5 years. He is a Senior Manager at Rude Labs Pvt. Ltd.
0 Comments