how to display a custom greeting based on the day of the week

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…


This content originally appeared on DEV Community and was authored by anthony-campolo

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>

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();

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>'
);

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>

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>


This content originally appeared on DEV Community and was authored by anthony-campolo


Print Share Comment Cite Upload Translate Updates
APA

anthony-campolo | Sciencx (2021-11-11T01:46:36+00:00) how to display a custom greeting based on the day of the week. Retrieved from https://www.scien.cx/2021/11/11/how-to-display-a-custom-greeting-based-on-the-day-of-the-week/

MLA
" » how to display a custom greeting based on the day of the week." anthony-campolo | Sciencx - Thursday November 11, 2021, https://www.scien.cx/2021/11/11/how-to-display-a-custom-greeting-based-on-the-day-of-the-week/
HARVARD
anthony-campolo | Sciencx Thursday November 11, 2021 » how to display a custom greeting based on the day of the week., viewed ,<https://www.scien.cx/2021/11/11/how-to-display-a-custom-greeting-based-on-the-day-of-the-week/>
VANCOUVER
anthony-campolo | Sciencx - » how to display a custom greeting based on the day of the week. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/11/how-to-display-a-custom-greeting-based-on-the-day-of-the-week/
CHICAGO
" » how to display a custom greeting based on the day of the week." anthony-campolo | Sciencx - Accessed . https://www.scien.cx/2021/11/11/how-to-display-a-custom-greeting-based-on-the-day-of-the-week/
IEEE
" » how to display a custom greeting based on the day of the week." anthony-campolo | Sciencx [Online]. Available: https://www.scien.cx/2021/11/11/how-to-display-a-custom-greeting-based-on-the-day-of-the-week/. [Accessed: ]
rf:citation
» how to display a custom greeting based on the day of the week | anthony-campolo | Sciencx | https://www.scien.cx/2021/11/11/how-to-display-a-custom-greeting-based-on-the-day-of-the-week/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts