7.2P: Event Handler and Dynamic Page

Tasks

You are required to complete the following tasks using JavaScript:

1. Prompt the user to enter their name into a text box (e.g., Michael).

2. Include a Button object that when clicked modifies the content of the page to

display an appropriate greeting message.

o The current time of day should be used to personalise the message, for example, Good Morning, Good Day, Good Afternoon, or Good Evening)

along with the input name (e.g., "Good Morning Michael") based on the hour of the day.

• Also include the time and date, showing the number of hours and minutes into the day, along with the day of the week, date, month and year; as

shown below.

3. Implement the onmouseover event handler for the welcome message paragraph to change the style of the welcome paragraph (background colour to yellow).

4. Implement onmouseout effects to change the style of a paragraph back to its original background colour.

What will you submit?

You should submit:

• HTML file with Javascript code.

• Screen-shot of the web page showing the output for Step 1.

• Screen-shot of the web page showing the output for Step 2.

• Screen-shot of the web page showing the output for Step 3.

• Screen-shot of the web page showing the output for Step 4.