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 div with the class greeting-container to center the content.
Inside it, there's an h1 tag with the ID greeting — this is where the greeting message will be displayed.
The JavaScript file script.js is 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, and else conditions 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 textContent of 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.

TOPICS MENTIONED IN THIS ARTICLE

greeting app

JavaScript time based greeting

dynamic greeting app

JavaScript tutorial

beginner web project

Build a Smart Greeting App Using JavaScript and Time Logic

Follow us on

Create a Greeting App That Changes Message Based on Time

✅ What You’ll Learn:

🧩 Step 1: Create the HTML Structure

🔍 Explanation:

🎨 Step 2: Add Some CSS Styling

🔍 Explanation:

🧠 Step 3: Write the JavaScript Logic

🔍 Explanation:

📱 Result: What You’ll See

🚀 Bonus: Make It Update Automatically Every Minute (Optional)

✅ Summary

TOPICS MENTIONED IN THIS ARTICLE

Website

Policies and Guidelines

Contact Us