Introduction:
In this tutorial, we will explore how to create a real-time date and clock display using JavaScript. By the end of this tutorial, you will have a functional web page that dynamically updates the date and time, providing a visually appealing and informative feature for your website or application.
Things You Will Learn:
- How to use JavaScript to manipulate the DOM (Document Object Model)
- Working with date and time in JavaScript
- Utilizing arrays to store and retrieve data
- Enhancing user experience with dynamic content updates
- Building a simple yet effective project with HTML, CSS, and JavaScript
Video Tutorial:
For a more visual demonstration, you can watch the video tutorial on my YouTube channel. The video provides step-by-step guidance, allowing you to follow along and implement the code effectively.
Project Folder Structure:
To get started, create a project folder with the following structure:
- index.html
- style.css
- script.js
HTML:
In the index.html file, set up the basic structure of the webpage. Include div containers with appropriate classes to hold the date and clock elements:
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Time & Date Widget</title>
<!-- Google Fonts -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="clock-container"></div>
<div class="date-container"></div>
</div>
<script src="script.js"></script>
</body>
</html>
CSS:
In the style.css file, add styles to align and format the date and clock elements:
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #1a1a1a;
}
.container {
width: 21.87em;
display: grid;
position: absolute;
transform: translate(-50%, -50%);
left: 50%;
top: 50%;
color: #ffffff;
align-items: center;
grid-template-columns: 8fr 4fr;
background-color: #1e90ff;
border-radius: 0.5em;
}
.clock-container {
background-color: #1a1a1a;
color: #ffffff;
text-align: center;
font-size: 3.75em;
margin-left: 0.2em;
border-radius: 0.1em;
padding: 0.2em 0;
}
.date-container {
padding: 1em 0;
background-color: #1e90ff;
color: #ffffff;
text-align: center;
border-radius: 0.5em;
}
.date-container span {
font-size: 2.5em;
}
JS:
Within the script.js file, write the JavaScript code that dynamically updates the date and time on the webpage:
let dateContainer = document.querySelector(".date-container");
let clockContainer = document.querySelector(".clock-container");
const weekdays = [
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday",
];
const monthNames = [
"January",
"February",
"March",
"April",
"May",
"June",
"July",
"August",
"September",
"October",
"November",
"December",
];
const dateClock = setInterval(function dateTime() {
const today = new Date();
let date = today.getDate();
let day = weekdays[today.getDay()];
let month = monthNames[today.getMonth()];
let hours = today.getHours();
let minutes = today.getMinutes();
minutes = minutes < 10 ? "0" + minutes : minutes;
dateContainer.innerHTML = `<p>${day}</p><p><span>${date}</span></p><p>${month}</p>`;
clockContainer.innerHTML = `${hours}:${minutes}`;
}, 1000);
Conclusion:
By following this tutorial, you have successfully built a real-time date and clock display using JavaScript. You’ve learned how to manipulate the DOM, work with date and time, and enhance the user experience by dynamically updating content. This feature can be easily integrated into your web projects to provide a visually appealing and informative element. Experiment with different styles and layouts to customize the display to your liking.
