softare development

Greet your Website Visitors based On the time of the Day

JavaScript allows us to dynamically change greetings based on the current hour of the day, providing a personalized touch to web applications. In this article, we’ll walk through a step-by-step guide on creating a simple JavaScript function that changes greetings according to morning, afternoon, and evening.

Step 1: Set Up HTML Structure

Begin by creating a basic HTML structure with a placeholder for the greeting text:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Greetings</title>
</head>
<body>
    <div id="greeting-container">
        <p id="greeting-text">Good Morning!</p>
    </div>
    <script src="script.js"></script>
</body>
</html>

Step 2: Write JavaScript Logic

Now, create a JavaScript file (script.js) and add the logic to change greetings based on the current hour:

document.addEventListener('DOMContentLoaded', function () {
    const greetingText = document.getElementById('greeting-text');

    function getCurrentGreeting() {
        const currentHour = new Date().getHours();

        if (currentHour >= 5 && currentHour < 12) {
            return 'Good Morning!';
        } else if (currentHour >= 12 && currentHour < 18) {
            return 'Good Afternoon!';
        } else {
            return 'Good Evening!';
        }
    }

    function updateGreeting() {
        const greeting = getCurrentGreeting();
        greetingText.textContent = greeting;
    }

    // Update greeting initially
    updateGreeting();

    // Update greeting every minute
    setInterval(updateGreeting, 60000);
});

This JavaScript code defines a function getCurrentGreeting() that determines the current time and returns the appropriate greeting. The updateGreeting() function then updates the displayed greeting text on the webpage.

The setInterval method ensures that the greeting is updated every minute to reflect real-time changes.

Step 3: Style Your Greeting

Style your greeting to make it visually appealing. You can add some CSS to center the text and make it visually attractive:

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

#greeting-container {
    text-align: center;
}

#greeting-text {
    font-size: 24px;
    font-weight: bold;
    color: #333;
}

Step 4: Test Your Application

Open your HTML file in a web browser and observe the greeting text change dynamically based on the current hour. The application will greet the user with “Good Morning” in the morning, “Good Afternoon” in the afternoon, and “Good Evening” in the evening.

Certainly! Here’s the complete HTML file that integrates the HTML structure, JavaScript logic, and CSS styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Greetings</title>
    <style>
        body {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }

        #greeting-container {
            text-align: center;
        }

        #greeting-text {
            font-size: 24px;
            font-weight: bold;
            color: #333;
        }
    </style>
</head>
<body>
    <div id="greeting-container">
        <p id="greeting-text">Good Morning!</p>
    </div>
    <script>
        document.addEventListener('DOMContentLoaded', function () {
            const greetingText = document.getElementById('greeting-text');

            function getCurrentGreeting() {
                const currentHour = new Date().getHours();

                if (currentHour >= 5 && currentHour < 12) {
                    return 'Good Morning!';
                } else if (currentHour >= 12 && currentHour < 18) {
                    return 'Good Afternoon!';
                } else {
                    return 'Good Evening!';
                }
            }

            function updateGreeting() {
                const greeting = getCurrentGreeting();
                greetingText.textContent = greeting;
            }

            // Update greeting initially
            updateGreeting();

            // Update greeting every minute
            setInterval(updateGreeting, 60000);
        });
    </script>
</body>
</html>

Conclusion

Creating a JavaScript current hour change for greetings adds a personal and dynamic touch to your web applications. This simple script enhances user experience by adapting the displayed content to the time of day. Feel free to customize the greetings and styling to suit your application’s theme and requirements.

CSS Flex-Box

Recent Posts

Why Grok 4 is the AI Game-Changer You Need to Know

Move over ChatGPT, there's a new, significantly upgraded player causing a stir. xAI, Elon Musk's…

3 days ago

Cloudinary vs. AWS vs. ImageKit.io vs. Cloudflare

Choosing the right asset management service is vital. Cloudinary is frequently mentioned, but how does…

2 weeks ago

How to Integrate Cloudinary with PHP

Cloudinary is a powerful cloud-based media management platform that allows you to upload, store, manage,…

2 weeks ago

Trump Extends U.S. TikTok Sale Deadline to September 2025

In a surprising turn of events, former President Donald Trump announced on June 19, 2025,…

3 weeks ago

Master React Native Flexbox

Flexbox is a powerful layout system in React Native that allows developers to create responsive…

4 weeks ago

Getting Started With TensorFlow

"The journey of a thousand miles begins with a single step." — Lao Tzu Welcome…

1 month ago