Assignment No.

4
Semester: Fall 2015
Introduction to Computing CS101

Total Marks: 15
Due Date: 16-02-2016

Learning outcomes
After completing this assignment students will be able to:
1. Create an HTML web page using notepad
2. Make use of basic HTML tags (HTML, Head, Body, Heading tags, Form Tag, Input tag, BR tag etc.)
3. Access input elements of HTML web page with Java Script
4. Use Java Script code with HTML for form validation
Uploading instructions:
Please view the Assignment Submission Process document provided to you by the Virtual University of Pakistan
for uploading assignments.

Your assignment must be with .HTML extension.

(Any other format like scan images, PDF, text, Zip, rar, bmp etc will not be accepted)

No assignment will be accepted through email.

Rules for Marking:

It should be clear that your assignment will not get any credit if:

The assignment is submitted after due date.

The assignment file is not with. HTML extension

The submitted assignment does not open or file is corrupted.

Your assignment is copied from internet, handouts or from any other student
(Strict disciplinary action will be taken in this case).

Assignment
You are required to develop a web page using HTML and JavaScript as shown in image
below:
Image 1

You are required to write JavaScript code with only a single function that will be called
on onClick event of button Show Information to add validation and information
retrieval functionality.
JavaScript function should check that name field is not blank and show error as shown
below when user clicks the Show Information button and name text box is empty:
Image 2

JavaScript function should check the age field. Age text box should not be empty and
only consist of numbers from 1 to 100. If this text box has incorrect or empty value then
page should show error as shown below when user clicks the Show Information
button.
Image 3

User must select a qualification from radio button list, if user doesnt select any
qualification and Show Information button is clicked then show error message as
given below:
Image 4

If any error occurs as shown above then error message should also be displayed inside
div tag on onClick event of Show information button as shown below:
Image 5

On successful data entry, if user doesnt select job type then information should be
displayed inside div tag on onClick event of Show Information button as shown
below:
Image 6

On successful data entry, if user selects one or more job type then information should be
displayed inside div tag on onClick event of Show Information button as shown
below:
Image 7