How to create a simple randomly greeting widget based on user's time of day

Hello, it's me again

Today, i will show you how to create a simple a randomly greeting widget based on user's time of day for your Forumotion site.


First of all, create a new widget (or put anywhere you want), copy and paste the following code :

Code:

<p id="greeting"></p>

<script type="text/javascript">
greeta = ["Morning1", "Morning2", "Morning3"];
greetb = ["Afternoon1", "Afternoon2", "Afternoon3"];
greetc = ["Evening1", "Evening2", "Evening3"];
userz = '<a href="{USERLINK}">&nbsp;{USERNAME}&nbsp;</a>';
greetza = Math.floor(Math.random() * greeta.length);
greetzb = Math.floor(Math.random() * greetb.length);
greetzc = Math.floor(Math.random() * greetc.length);
today = new Date()
if (today.getHours() >=6 && today.getHours() < 12) {
   document.getElementById('greeting').innerHTML = greeta[greetza] + userz;
}
   else
   if (today.getHours() >= 12 && today.getHours() <= 17) {
      document.getElementById('greeting').innerHTML = greetb[greetzb] + userz;
   }
      else
      if (today.getHours() > 17 && today.getHours() <= 24) {
         document.getElementById('greeting').innerHTML = greetc[greetzc] + userz;
      }
else
   document.getElementById('greeting').innerHTML = 'Sleep well zZz';
</script>


CSS (optional):

Code:

#greeting {color:red}
#greeting a {color:blue}

Next step, replace the default text in Morning1-2-3, Afternoon1-2-3 and Evening1-2-3 to any word or text you want.

For example :

Spoiler:

Or, you can add more text

Spoiler:

Live demo

Enjoy!

Sounds interesing.
Thanks for the code and your hardwok @SarkZKalie

Hello,

Nice job, but live demo seems to be broken (it worked few hours ago)

Oy o/
Nice one, thanks.

You may want to fix this; there's a letter missing here (thread and live demo):

Code:

      if (today.getHours() > 17 && today.getHours() <= 24) {
        document.getElementById('greeting').innerHTML = greetc[greetz] + userz;
      }

greetc[greetz] » greetc[greetzc]

Hi guys, thank you. I've edited the first post

Hope you like it

Thank you, this is awesome! I'm not very good with codes. Can you tell me where the CSS code to change the text color goes?

#greeting {color:red}
#greeting a {color:blue}

@KimiD56 hi, you may find it in Admin Control Panel -> Display -> CSS

Thank you

Thank you for sharing this @SarkZKalie,

I added this to my forum, in a different way, but it's a nice feature. Great work!

@TheCrow whaaaaaa that was great idea, my dear ))

@SarkZKalie I want to do this the same way @TheCrow did it. I've tried it a few times and it didn't work like I wanted it to. Can you advise me as to how to set it all up?

@The Last Outlaw, it is easy. You only add the html tags wherever you want in your template, and then you add the script as a javascript to your forum and it will be shown like mine. Nothing too difficult!

TheCrow wrote:@The Last Outlaw, it is easy. You only add the html tags wherever you want in your template, and then you add the script as a javascript to your forum and it will be shown like mine. Nothing too difficult!

Which one? Overall Header?

That depends on where you want this to appear. If you want it to the header of the forum like I did, then yes, overall_header would be the one.

Not working for me.