Download Week 8 Lab Resources

Create a Folder called ‘JS_Lab2’

Exercise 1

You will build up this file gradually Build up the file gradually – get ‘part a’ working first .. and then ‘part b’.. etc

Using ‘Form_Example.htm’ …. create a file called : ‘Lab2_ex1.htm’

a. The UserID must be exactly 4 characters long ( it can include any characters.)

( Hint : Review the String ‘length’ method )

b. The User has to input :

total Weekly hours worked - can be Any Number value

c. Assume the following hourly rates :

Weekly … £10 per hour

d. Add a field to display ‘Total Pay’ ( should be ‘disabled’)

e. Add a button to :

Calculate total pay

Use Alert Box to display errors

For the pound symbol in HTML5 – use " £ " …. E.g."Weekly Hours ( £ 10 )"

Exercise 2

Copy ‘Lab2_ex1.htm’ to create a new file called : ‘Lab2_ex2.htm’

a. Change the Weekly Hours from a text box to a Drop-Down Box (or similar)

The Weekly Hours - can now only be 5 hours max

The user can only input 0 – 5 hours

Can either use a Drop-down box … or similar ( e.g. HTML5 Number)

Initial values should be displayed as ‘0’

b. Add a ‘Clear’ Button :

Create a function called ‘ ClearAll() ‘

This will be used to clear each individual item :

Reset all Text boxes to blank (“”)

reset Drop-down field to be ‘0’

Exercise 3

Copy ‘Lab2_ex2.htm’ to create a new file called : ‘Lab2_ex3.htm’

a. If the UserID is 4 characters – display it as all UpperCase in a new text box

b. The User has to also input :

total Weekend hours worked –use a drop-down list

c. Assume the following hourly rates :

Weekly … £10 per hour

Weekend … £20 per hour

d. Update the code to calculate the Total Pay – using weekly and weekend hours

e. Update the ‘Clear’ Button to reset :

All Text boxes to blank

Drop-down fields to be ‘0’