My Blog

How to Customize a Greeting on Your Website or Blog

Elizabeth Bridge - Tuesday, June 14, 2016

How would you like to add a custom greeting to your website or blog ?  In this example, I use javascript to customize a greeting depending on the day of the week.  To get started, let's look at the elements needed whenever we want to make web pages more interactive.  First, identify the event which will trigger the custom message.  An event can be something like clicking on a button, hovering over an image, or even something as simple as opening a web page.  In this case,  whenever the web page is opened, we want to deliver a custom message depending on the day of the week. 

custom greeting using javascript

Here's your basic web page layout:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>

<body>
</body>
</html>


 Now here's your HTML code with the event trigger coded in

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>

<body onload="checkDay()">

</body>
</html>


When the page loads, the event triggers a javascript function to check the day.  We'll look at the javascript in a minute, but first let's finish with the code needed on our webpage.  Once javascript checks the day, and processes some other logic, we want to output the custom message to a spot on our page.  In this case, we'll create an ID called "message" associated with the custom message and attach it to a span.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
</head>

<body onload="checkDay()">

<span id="message"></span>

</body>
</html> 


Now let's get into the javascript.  Javascript can be coded inside the <head></head> tags on your website, or you can call the code from an outside .js file.  In this simple example, we will code the javascript right inside the <head></head> tags.  Here is how to start the script block:

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>

<script type = "text/javascript">

</script>


</head>

<body onload="checkDay()">

<span id="message"></span>

</body>
</html>


The javascript is coded in between the <script type = "text/javascript"> </script> tags.  First we call the javascript function called "checkday".  Then we set two variables (var) called "today" and "dow".  Next we apply logic to the day of week (dow) variable, and depending on the day, javascript will put into the span ID called "message" our custom message.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Example</title>
<script type = "text/javascript">
function checkDay()
{
var today = new Date();
var dow = today.getDay();
if (dow==0)
document.getElementById("message").innerHTML = "Its Sunday - Relax"
else if(dow==1)
document.getElementById("message").innerHTML = "Hi There! Its Happy Monday!"
else if(dow==2)
document.getElementById("message").innerHTML = "Happy Tuesday"
}

</script>

</head>

<body onload="checkDay()">

<span id="message"></span>

</body>
</html>

 Pretty cool right?  Tell me what you think!


Contact Details

Address: 702 Spirit 40 Park Suite 110 Chesterfield MO 63005

Email: info@hiphhopla.com

Google Maps: See our location online.

Phone: 314-651-5200


News

Hello World12-Jul-2016

Hello World - we are upgrading our website. In keeping with full transparency, we are not putt..


Balaban's Re-News Services Contract12-Mar-2016

The iconic restaurant, formerly located in the Central West End of St Louis and now residing in ..


Twitter updates