Time-based headings

Hi all, hope everyone is well. 

I want to be able to add a time-based heading to our website, based on the time of the users PC. I would like a heading to change based on the following timing:

4:00am-11:59am: Good Morning
12:00pm-6:59pm: Good Afternoon
7:00pm-3:59am: Good Evening

Does anyone know how this is possible? I had a developer code it for a custom web platform years ago but would love to know if it's possible using the SS platform.  Happy to discuss privately if this is a costly exercise. 

Many thanks!

You can achieve this with some simple JavaScript. Here's an example that you can paste into a Code Block on your page and then adjust to match your requirements.

<h2 id="greetingEl"><h2>

<script>
const time = new Date().getHours();
let greeting;
if (time < 12) {
  greeting = "Good morning";
} else if (time < 19) {
  greeting = "Good afternoon";
} else {
  greeting = "Good evening";
}
document.getElementById("greetingEl").innerHTML = greeting;
</script>

The first section creates a heading element where the greeting will appear. 

Below this is the script, which gets the time and then extracts the hour from this using the getHours() method. This returns an hour from 0 to 23 and this is used to determine which greeting to show. For a deeper explanation of this, see JavaScript if else and else if.

  If this post has helped you, please click a 'Like' or 'Thanks' icon below  ⬇️

6 minutes ago, paul2009 said:

<h2 id="greetingEl"><h2>

<script>
const time = new Date().getHours();
let greeting;
if (time < 12) {
  greeting = "Good morning";
} else if (time < 19) {
  greeting = "Good afternoon";
} else {
  greeting = "Good evening";
}
docume

Amazing, thank you so much. Worked perfectly!