DEV Community

Cover image for How to Display a Custom Daily Greeting
ajcwebdev
ajcwebdev

Posted on • Edited on • Originally published at ajcwebdev.com

6 1

How to Display a Custom Daily Greeting

Introduction

I discovered a cool little trick while source diving through Scott Mathson's web site. With just a couple lines of JavaScript you can create a message that displays a different greeting depending on the day of the week.

Create a Script with a Weekday Array

Create a <script> tag with type of text/javascript. Define a variable called weekday with a different greeting set to each index.

<script type="text/javascript">

  var weekday = new Array(7)

  weekday[0] = "spectacular Sunday"
  weekday[1] = "marvelous Monday"
  weekday[2] = "terrific Tuesday"
  weekday[3] = "wonderful Wednesday"
  weekday[4] = "totally cool Thursday"
  weekday[5] = "fantastic Friday"
  weekday[6] = "sweet Saturday"

</script>
Enter fullscreen mode Exit fullscreen mode

Set Weekday Value to the Current Date

Also inside the script tag, create a variable called currentDate set with the Date() object and then set the current day to weekdayValue.

var currentDate = new Date()
weekdayValue = currentDate.getDay()
Enter fullscreen mode Exit fullscreen mode

Write to the Document

Use the Document.write() method to write a string of text to the document with paragraph tags containing the weekday value..

document.write(
  '<p>Have a ' + weekday[weekdayValue] + '!</p>'
)
Enter fullscreen mode Exit fullscreen mode

Noscript Fallback

Lastly, you'll want to include a <noscript> tag in case the user has JavaScript turned off in their browser.

<noscript>
  <p>Have a great day!</p>
</noscript>
Enter fullscreen mode Exit fullscreen mode

Full Script

<script type="text/javascript">

  var weekday = new Array(7)

  weekday[0] = "spectacular Sunday"
  weekday[1] = "marvelous Monday"
  weekday[2] = "terrific Tuesday"
  weekday[3] = "wonderful Wednesday"
  weekday[4] = "totally cool Thursday"
  weekday[5] = "fantastic Friday"
  weekday[6] = "sweet Saturday"

  var currentDate = new Date()
  weekdayValue = currentDate.getDay()

  document.write(
    '<p>Have a ' + weekday[weekdayValue] + '!</p>'
  )
</script>

<noscript>
  <p>Have a great day!</p>
</noscript>
Enter fullscreen mode Exit fullscreen mode

Reinvent your career. Join DEV.

It takes one minute and is worth it for your career.

Get started

Top comments (4)

Collapse
 
scottmathson profile image
Scott Mathson

I appreciate the shout-out, Anthony! 😊

Collapse
 
cerchie profile image
Lucia Cerchie

This is so fun!

Collapse
 
godpleasers profile image
Kevin Spencer

Works great in joomla as long as you use code mirror editor.

Collapse
 
jonsan32 profile image
Jon Sanders

Would it be possible to do this for every day of the year, and to make it a bunch of embedded YouTube videos as well? If so, how so? Thanks for a great post.

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay