Create a greeting app That Changes Message Based on Time
Want to make your website or app feel a little more personal? A simple but powerful trick is to greet users based on the time of day — “Good Morning,” “Good Afternoon,” or “Good Evening.” In this tutorial, you’ll learn how to build a greeting app using HTML, CSS, and JavaScript that changes the message depending on the current time.
This is a great project for beginners to get hands-on experience with JavaScript date objects, DOM manipulation, and simple styling.
✅ What You’ll Learn:
-
How to get the current time using JavaScript.
-
How to use conditional statements to determine the right greeting.
-
How to display dynamic content using the DOM.
-
How to style your app with simple CSS.
🧩 Step 1: Create the HTML Structure
Let’s start by creating a simple HTML file that contains the structure of our greeting app.
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>dynamic greeting app</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="greeting-container">
<h1 id="greeting">Loading...</h1>
</div>
<script src="script.js"></script>
</body>
</html>
🔍 Explanation:
-
We created a
divwith the classgreeting-containerto center the content. -
Inside it, there's an
h1tag with the IDgreeting— this is where the greeting message will be displayed. -
The JavaScript file
script.jsis linked at the end so the HTML loads first.
🎨 Step 2: Add Some CSS Styling
Let’s give our app a nice, clean look.
/* style.css */
body {
font-family: Arial, sans-serif;
background: linear-gradient(to right, #00c6ff, #0072ff);
color: white;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
margin: 0;
}
.greeting-container {
text-align: center;
}
#greeting {
font-size: 3rem;
padding: 20px;
border: 2px solid white;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.1);
}
🔍 Explanation:
-
We use a gradient background for a modern look.
-
The content is centered using Flexbox.
-
The greeting has a transparent background and border to make it stand out.
🧠 Step 3: Write the JavaScript Logic
Now let’s add the logic to display different greetings based on the current time.
// script.js
function getGreeting() {
const now = new Date(); // Get the current date and time
const hours = now.getHours(); // Get the current hour (0-23)
let greetingText = "";
if (hours >= 5 && hours < 12) {
greetingText = "Good Morning!";
} else if (hours >= 12 && hours < 18) {
greetingText = "Good Afternoon!";
} else {
greetingText = "Good Evening!";
}
return greetingText;
}
function displayGreeting() {
const greetingElement = document.getElementById("greeting");
greetingElement.textContent = getGreeting();
}
// Call the function when the page loads
window.onload = displayGreeting;
🔍 Explanation:
-
new Date()gets the current date and time. -
getHours()gives us the current hour in 24-hour format. -
We use
if,else if, andelseconditions to decide what greeting to show:-
Between 5 AM and 12 PM → “Good Morning”
-
Between 12 PM and 6 PM → “Good Afternoon”
-
After 6 PM and before 5 AM → “Good Evening”
-
-
We then update the
textContentof the greeting element to display the correct message.
📱 Result: What You’ll See
When you open the page, it will display a greeting like:
Good Morning!
The message will change depending on the time when you open or refresh the page.
🚀 Bonus: Make It Update Automatically Every Minute (Optional)
Want your app to auto-update if someone leaves the page open? You can add a timer:
// Add this inside script.js
setInterval(displayGreeting, 60000); // Update every 60 seconds
This way, the greeting changes automatically without needing a refresh.
✅ Summary
You just created a simple but smart greeting app that:
-
Detects the current hour using JavaScript.
-
Changes the greeting message dynamically.
-
Looks clean and modern with CSS styling.
-
Is perfect for beginners to practice JavaScript logic and DOM updates.