Creating a Digital Clock UI with Greeting Messages Using HTML, CSS, and JavaScript
In this blog post, we will enhance our Digital Clock UI project by adding a greeting message based on the current time of day. This project will demonstrate how to structure the clock and incorporate dynamic greetings such as “Good Morning,” “Good Afternoon,” “Good Evening,” and “Good Night.” We will utilize HTML for the structure, CSS for styling, and JavaScript for real-time time display along with the greeting messages.
Project Overview
Here's what we will accomplish:
1. HTML for Structure
2. CSS for Design
3. JavaScript for Real-Time Display and Greetings
Step 1: Using HTML for Structure
First, we'll start with the basic HTML structure. In addition to the clock, we’ll add a div to display the greeting message:
<!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>Digital Greeting Clock | Free Projects1</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="wrap">
<h1 id="greeting"></h1>
<h1 id="clock"></h1>
</div>
<script src="main.js"></script>
</body>
</html>
Step 2: Using CSS for Design
Next, we will enhance the visual appeal of our digital clock and greeting message with CSS:
With these styles, we center our clock and greeting message, creating a visually appealing layout against a dark background.
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: sans-serif;
}
body{
background-color: gainsboro;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
min-height: 100vh;
}
.wrap{
text-align: center;
}
h1{
font-size: 58px;
margin-bottom: 15px;
}
#clock {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 10px;
}
#clock span{
display: inline-block;
width: 100px;
height: 100px;
line-height: 100px;
background: #3f58b5;
box-shadow: 0 5px 15px #3f58b5;
color: #fff;
margin: 0 15px;
}
#clock span:first-child{
margin-left: 0;
}
#clock span:last-child{
background: #e91e63;
}
#greeting{
background: #fff;
display: inline-block;
border-radius: 4px;
font-size: 42px;
padding: 20px 50px;
margin-bottom: 30px;
box-shadow: 0 5px 15px #bebebe;
animation: greeting 2s ease infinite 1s;
}
@keyframes greeting{
30%{
opacity: 0;
}
}
Step 3: Using JavaScript for Real-Time Display and Greetings
Now we’ll implement JavaScript to update both the time and the greeting message:
function clock(){
var date, hours, minutes, seconds, midday, name;
date = new Date();
hours = date.getHours();
minutes = date.getMinutes();
seconds = date.getSeconds();
midday;
name = ": Bholu Singh"
midday = (hours >= 12) ? "PM" : "AM";
document.getElementById('clock').innerHTML = "<span>"+hours+"</span>" + ":" + "<span>"+minutes+"</span>" + ":" + "<span>"+seconds+"</span>" + "<span>"+midday+"</span>";
var time = setTimeout(function(){
clock();
}, 1000);
// Good Morning, Good Afternoon, Evening
if(hours < 12){
var greeting = "Good Morning " + name + " Hurry Up!";
}
if(hours >= 12 && hours <= 16){
var greeting = "Good Afternoon " + name;
}
if(hours > 16 && hours <= 19){
var greeting = "Good Evening " + name;
}
if(hours > 19 && hours <= 24){
var greeting = "Good Night " + name;
}
document.getElementById('greeting').innerHTML = greeting;
}
// Call Clock function
clock();
In this JavaScript code, the clock() function retrieves the current time and dynamically generates a greeting message based on the current hour. The time and greeting message are then displayed in their respective elements.
Conclusion
You have now successfully created a Digital Clock UI that displays both the current time and a corresponding greeting message! By utilizing HTML for structure, CSS for design, and JavaScript for interactivity, you’ve created a functional and visually appealing tool.
Keep experimenting and happy coding!
Please do not enter any spam link in the comment box.