Search

JavaScript: How to make a time-based message

In order to make a local, time-based message (let's say for a greeting) that will display a message to the user based on their current time, you will need new Date();. Once you have that, the world is your Cloyster!

Let's take a look!

    try {
    	// Get the current date from browser
        var now = new Date();
    } catch (err) {
        console.log("Error: Could not get date. No soup for you!" + err.message );
    }

This try-catch block tries to grab the date with new Date(); and save it to the variable now. If there is an error it will log to the browser's console (not visible on the page, in the browser dev-tools) a saucy message plus the actual error. Cool!

  if (now != null)
    {
        var hour = now.getHours();
        if (hour >= 0 && hour <= 5)
        {
            // 12am - 5am
            document.getElementById("greeting").innerHTML = "Shhh... it's past midnight";
        }
        if (hour >= 6 && hour <= 11)
        {
            // 6am - 11am
            document.getElementById("greeting").innerHTML = "Good morning";
        }
        if (hour >= 12 && hour <= 16)
        {
            // 12pm - 4pm
            document.getElementById("greeting").innerHTML = "Good afternoon";
        }
        if (hour >= 17 && hour <= 23)
        {
            // 5pm - 11pm
            document.getElementById("greeting").innerHTML = "Good evening";
        }
    }

The last section starts with first checking if now doesn't equal null, implying that it couldn't get the date. If it has data in the now variable, it will proceed, if not, it can hit the road. Anyways, if now has data, we will get the current hour with now.getHours(); and save that to the variable hour. Next, we just need to define some if statements that define the slices of hours (greater or equal to this AND less or equal to that). BAM! That's it! Well, sort of... you need to define an HTML element (in this example greeting) to put the greeting in, sprinkle in some CSS, and you are good to go!

<html>
<style>
.timegreeting{
	font-family: "arial", sans-serif;
	font-weight: bold;
	font-size: 50px;
}
</style>
  
<p id="greeting" class="timegreeting"></p>

<script>
    try {
    	// Get the current date from browser
        var now = new Date();
    } catch (err) {
        console.log("Error: Could not get date. No soup for you!" + err.message );
    }
    if (now != null)
    {
        var hour = now.getHours();
        if (hour >= 0 && hour <= 5)
        {
            // 12am - 5am
            document.getElementById("greeting").innerHTML = "Shhh... it's past midnight";
        }
        if (hour >= 6 && hour <= 11)
        {
            // 6am - 11am
            document.getElementById("greeting").innerHTML = "Good morning";
        }
        if (hour >= 12 && hour <= 16)
        {
            // 12pm - 4pm
            document.getElementById("greeting").innerHTML = "Good afternoon";
        }
        if (hour >= 17 && hour <= 23)
        {
            // 5pm - 11pm
            document.getElementById("greeting").innerHTML = "Good evening";
        }
    }
</script>

</html>
Share the Post:

Related Posts

PNG Press – Convert all those annoying .webp files quickly

PNG Press is a lightweight desktop application built using .NET Core 8. It features a simple drag-and-drop interface designed to convert one or multiple images to PNG format with ease. This project was born out of my own necessity for a straightforward image conversion tool, and I’m excited to finally share it with you.

Read More

Yu-Gi-Oh! Rarity Collection 2 Set Overview

The Yu-Gi-Oh! TCG set Rarity Collection 2 is getting mixed reviews to say the least. I’ve consulted with the Millennium items and searched the labyrinth of Atem’s mind to find this Yu-Gi-Oh! set’s stats, metrics, and other neat insights, let’s go!

Read More