Improving the experience - user friendliness

Right now, the page works quite well. We can type in any number between 1 & 12, select am or pm, and click on a time zone to see the corresponding time in 6 other time zones. If we enter something that is not a number between 1 & 12, we get a helpful message telling us that we need to enter a number between 1 and 12.

But there are a few things that are still a little awkward. One is that when a user first views the page, the entry box is blank and no time zone is clicked, but it still says

Lets change things so that when a user first views the page, they see a valid statement, like this:

1. To make the default value in the text box "12" add a "value" attribute to the <input> element which creates that box and make it equal to "12"

2. To make the "Hawaii" radio button selected by default, add a "checked" attribute to the <input> element for the Hawaii radio button and make it equal to "checked".

checked="checked"

3. Save you file and open it in a browser to see that these default values are filled in. You should still be able to change the number of click on a different time zone and see it update correctly.

 

Our final changes to the page will make the page more responsive to the user. Right now, if the user decides to switch am to pm, nothing happens until a time zone button is clicked. And if the user wants to see another time in the same time zone and changes the number do do that, nothing happens until the time zone is clicked again..

How can we cause the calculated time to update whenever the number is changed, or whenever am/pm is switched?

Well, to cause something to happen when we clicked on a radio button, we added an "onclick" attribute to the radio button <input> element.

We can also add "onclick" attributes to the text box or to the drop-down list. But that doesn't really make sense. For example, we don't want something to happen just because we clicked in the text box, we only want something to happen when we've finished entering a number. A good choice then is the "onkeyup" attribute. This will cause something to happen whenever we have a cursor in the textbox and have pressed a key and then released it.

4. Add an "onkeyup" attribute to the textbox. For now, have it open a popup box by typing an alert statement (you can decide what it should say).

5. Save your file and open it with a browser. Try typing in numbers in the textbox. The popup box should appear each time you let up on a key. (You may find this a little obnoxious, but we'll fix that).

6. To cause something to happen when you switch from am to pm or vice versa, add an "onchange" attribute to the <select> element that creates the drop-down box. Have it open a popup box too.

7. Return to the Catalyst WebQ and answer the next two questions.

Next, we'll have these events actually update the page