PDA

View Full Version : Cs101 Assignment no 3 Spring 2011 Idea solution on 1 june



Ali-k
06-01-2011, 06:18 PM
Assignment No. 03
Semester Spring 2011
Introduction to Computing-CS101
Total Marks: 50

Due Date: 13/06/2011
Objective:
To learn the basics of HTML and JavaScript.
Instructions:
Please read the following instructions carefully before solving & submitting assignment:
Assignment should not be copied from net or any other student.

It should be clear that your assignment will not get any credit (zero marks) if:

o The assignment is submitted after due date.
o The submitted assignment does not open or file corrupt.
o The assignment is copied (from other student or internet).
o Assignment submitted in any format other than HTML format (i.e. file.html).



GOOD LUCK


Design a web page using HTML. Read assignment instructions carefully.


This assignment has two tasks : (Total Marks = 50)
1. Designing a web page with the help of HTML. (25 Marks)
2. Implementing event handing on HTML elements with the help of JavaScript. (25 Marks)

Follow the instructions given according to the task.























Instructions for Task 1.















Final layout should be same as given in the screen shot below.












Task 2: Perform event handling on HTML page designed in task 1. The fields that are read-only and disabled in task 1 must remain disabled and read-only in task 2.

Instructions for Task 2

















































Hints:
Read the hints carefully
How to access field object, read the handouts carefully. We can read object with help of document, form and fieldname.
Use onkeyup event for copy text in the disabled fields while typing.
If you want to set focus of pointer to any field use focus( ) function. i.e fieldobject.focus();

For writing and reading data to and from any field use field name and value property.
See handouts lecture 15 and page 96 for this purpose.



If you want to find the length of text in the field use length property after value property.
See handouts lecture 15 and page 96.

If you want to see which radio button is select use checked property after object.
If there are more than one radio buttons in group use (radio_button_name[0] for first and radio_button_name[1] for second radio button) for accessing the object of radio button.

Use the following addresses for different locations of VU Campuses

City Address
Lahore
Virtual University Campus (SHADMAN), Lahore
1st Floor 1-Shadman Market Shadman
Islamabad Virtual University Campus, Islamabad. 9-E, Rizwan Plaza, Blue Area, Islamabad.
Multan Virtual University Campus, Multan
23/3, Officers Colony, 2nd & 3rd Floor, Near Chungi No. 9, Bosan Road, Multan
Karachi Virtual University Campus, Karachi
A-21, KCHS, Near Duty Free Centre, Baloch Colony Bus Stop, Karachi
Peshawar Virtual University Campus, Peshawar
8-Jamrud Road, P.O. Tehkal Bala, Adjacent Toyota Froniter Motors, Peshawar.


Note:


o Submit you assignment file only in HTML format otherwise you will get zero marks.

Vuhelper
06-01-2011, 08:24 PM
<html>
<head>
<title>CS101 3rd assignment</title>
</head>
<body>

<TABLE border="0" align="center">
<tr>
<td align="center">
<a href="http://vulms.vu.edu.pk/" target="_blank"><img src="vu_logo.PNG" width="150" alt="vu logo"></a>
</td>
</tr>
<tr><td align="center">
<br><b>CS101 Assignment</b>
</td></tr>
<tr width="20">
<td><br><FORM METHOD="POST" ACTION="http://bookshop.vu.edu.pk/">
<TABLE BORDER="1" BORDERCOLOR="#0000FF" BORDERCOLORLIGHT="#33CCFF" BORDERCOLORDARK="#0000CC" ALIGN="CENTER"><tr>
<td width="80" height="40" align="right" valign="top">Name:</td>
<td align="left"><input type="Name" name="User" MAXLENGTH="10" SIZE="25"></td>
<td align="left"><input type="Name" name="User" MAXLENGTH="10" SIZE="25" VALUE="Read Only Box by VRSHC" DISABLED></td>
</tr><tr>
<td width="80" height="40" align="right" valign="top">Password:</td>
<td align="left" valign="top"><input type="PASSWORD" name="pwd" MAXLENGTH="10" SIZE="25"></td>
<td align="left" valign="top"><input type="PASSWORD" name="pwd" MAXLENGTH="10" SIZE="25" VALUE="Read Only Box by VRSHC" DISABLED></td>
</tr>
<tr width="20">
<td width="80" height="100" align="right" valign="top">Address:</td>
<td align="left" valign="top"><TEXTAREA Name="comments" rows="4" cols="19"></TEXTAREA></td>
<td align="left" valign="top"><TEXTAREA Name="comments" rows="4" cols="19" VALUE="Read Only Box by VRSHC" DISABLED></TEXTAREA></td>
</tr>
<tr width="20">
<td width="100" height="30" align="right" valign="top">Gender:</td>
<td align="center">
<input type="radio" name="sex" value="male" /> Male <input type="radio" name="sex" value="female" CHECKED> Female</td>
</tr>
<tr width="20">
<td align="right" valign="top">Hobbies:</td>
<td>
<form>
<input type="checkbox" name="hobby" value="Cricket" /> Playing Cricket<br/>
<input type="checkbox" name="hobby" value="Internet" /> Surfing Internet<br/>
<input type="checkbox" name="hobby" value="Books" /> Reading Books
</form></td>
<td><br>
<form>
<input type="checkbox" name="hobby" value="Cricket" DISABLED /> Playing Cricket<br/>
<input type="checkbox" name="hobby" value="Internet" DISABLED /> Surfing Internet<br/>
<input type="checkbox" name="hobby" value="Books" DISABLED /> Reading Books
</form></td>
</tr>
<tr width="20">
<td width="80" height="110" align="right" valign="top">Location:</td>
<td width="90%" align="left" valign="top"><form name="Location" action="http://www.vuhelp.net/forum" method="POST">
<div align="center">
<select name="mydropdown">
<option value="">Select Location</option>
<option value="Cheese">Lahore</option>
<option value="Cheese">Karchi</option>
<option value="Cheese">Islamabad</option>
<option value="Cheese">Multan</option>
<option value="Cheese">Peshawar</option>
</select>
</div>
</form></td>

<td width="90%" align="left" valign="top"><TEXTAREA Name="comments" rows="4" cols="19" VALUE="Read Only Box by vuhelp" DISABLED></TEXTAREA></td>
</tr>

<tr><td>&nbsp</td><td><input type="submit" value="Submit" /><input type="reset" value="Reset" /> </td></tr></tabale>


</tr></table><br>
<style type="text/css">
.html-marquee {height:150px;width:470px;background-color:ffff33;background-image:url(http://vuhelp.net/images/misc/vbulletin4_logo.png);font-family:Garamond;font-size:28pt;color:FF0000;font-weight:bold;border-width:4;border-style:dotted;border-color:ff0000;}
</style>
<marquee class="html-marquee" direction="left" behavior="scroll" scrollamount="8" >Dear friends, i am very sorry, knowingly i am just doing some minor mistakes so no one can copy paste this stuff, we at vrshc.com are just providing idea not a perfect solution, so please check the errors.</marquee></p><br>

</body>
</html>

download required file in attachment

Vuhelper
06-08-2011, 05:51 PM
one more solution


<html>
<head>





<script type='text/javascript'>

function copyIt() {
var firstname = document.getElementById("firstname").value;
var password = document.getElementById("password").value;

document.getElementById("txt1").value = firstname;
document.getElementById("pass").value = password;

}


function formValidator(){
// Make quick references to our fields
var firstname = document.getElementById('firstname');
var password = document.getElementById('password');
var addr = document.getElementById('addr');
var addr = document.getElementById('gender');
var zip = document.getElementById('zip');
var state = document.getElementById('state');



// Check each input in the order that it appears in the form!
if(isAlphabet(firstname, "Please enter values in Name Field")){
if(lengthRestriction(password , 6, 8)){
i
if(isAlphanumeric(addr, "PLease enter value in address field!")){
if(isNumeric(zip, "Please enter a valid zip code")){
if(madeSelection(state, "Please Choose a State")){

return true;
}
}
}
}

}

return false;

}

function notEmpty(elem, helperMsg){
if(elem.value.length == 0){
alert(helperMsg);
elem.focus(); // set the focus to this input
return false;
}
return true;
}

function isNumeric(elem, helperMsg){
var numericExpression = /^[0-9]+$/;
if(elem.value.match(numericExpression)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphabet(elem, helperMsg){
var alphaExp = /^[a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function isAlphanumeric(elem, helperMsg){
var alphaExp = /^[0-9a-zA-Z]+$/;
if(elem.value.match(alphaExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}

function lengthRestriction(elem, min, max){
var uInput = elem.value;
if(uInput.length >= min && uInput.length <= max){
return true;
}else{
alert("The Password length must be between " +min+ " and " +max+ " characters");
elem.focus();
return false;
}
}

function madeSelection(elem, helperMsg){
if(elem.value == "Please Choose"){
alert(helperMsg);
elem.focus();
return false;
}else{
return true;
}
}

function emailValidator(elem, helperMsg){
var emailExp = /^[\w\-\.\+]+\@[a-zA-Z0-9\.\-]+\.[a-zA-z0-9]{2,4}$/;
if(elem.value.match(emailExp)){
return true;
}else{
alert(helperMsg);
elem.focus();
return false;
}
}
</script>
<title>CS101 3rd assignment idea by VRSHC.com</title>

</head>
<body>

<TABLE border="0" align="center">
<tr>
<td align="center">
<a href="http://vulms.vu.edu.pk/" target="_blank"><img src="vu_logo.PNG" width="150" alt="vu logo"></a>
</td>
</tr>
<tr><td align="center">
<br><b>CS101 Assignment # 3 solved by VRSHC Team</b>
</td></tr>
<tr width="20">

<td><br>

<TABLE BORDER="1" BORDERCOLOR="#0000FF" BORDERCOLORLIGHT="#33CCFF" BORDERCOLORDARK="#0000CC" ALIGN="CENTER"><tr>



<form onsubmit='return formValidator()' >
<td>Name:</td> <td><input type="text" name="text" id = "firstname" value="" onchange = "copyIt()"><br /></td><td><input type="text" name="text" id = "txt1" value="" onchange = "copyIt()" DISABLED ><br /></td></tr>



<td>Password:</td><td><input type="text" name="pass" id = "password" value="" onchange = "copyIt()"><br /></td><td><input type="password" name="pass" id = "pass" value="" onchange = "copyIt()" DISABLED ><br /></td> </tr>


<tr><td>Address: </td> <td> <textarea type=text name=name id = "addr" size=15 value="" onChange="this.form.userid.value=this.value;"></textarea><br /></td>
<td><textarea type=text name=userid size=15 value="" onChange="this.value=this.form.name.value;" disabled></textarea><br /></td></tr>



<tr><td>Gender: </td> <td width="42%" align="left" align="top" colspan="2"><script LANGUAGE="JavaScript">
<!--
function ValidateForm(form){
ErrorText= "";
if ( ( form.gender[0].checked == false ) && ( form.gender[1].checked == true ) ) { alert ( "Please choose Male" ); return false; }
if (ErrorText= "") { form.submit() }
}
-->
</script><INPUT TYPE="radio" NAME="gender" VALUE="male" > Male <INPUT TYPE="radio" NAME="gender" VALUE="female" Checked> Female</td></tr>


<tr><td>Hobbies: </td><td><input type="checkbox" name="option1" value="Milk"> Playing Cricket<br>
<input type="checkbox" name="option2" value="Butter"> Surfing INternet<br>
<input type="checkbox" name="option3" value="Cheese"> Reading Books<br></td>

<td><input type="checkbox" name="option1" value="Milk" disabled> Playing Cricket<br>
<input type="checkbox" name="option2" value="Butter" disabled > Surfing INternet<br>
<input type="checkbox" name="option3" value="Cheese" disabled > Reading Books<br></td>


<tr><td>State: </td><td width="42%" height="8%" align="left" align="top"><select id='state'>
<option value="" selected>Please Choose</option>
<option>Lahore</option>
<option>Karachi</option>
<option>Islamabad</option>
<option>Peshawer</option>
<option>Multan</option>
</select><br /></td><td width="42%" align="left" align="top">
<TEXTAREA name="area" cols="20" rows="4" disabled></TEXTAREA></td></tr>



</td>

<tr><td>&nbsp</td><td width="42%" align="center" align="top" colspan="2"><input type="submit" name="SubmitButton" value="Submit" onClick="ValidateForm(this.form)">
<INPUT type="reset" name="reset" value="Clear"> </td></tr></tabale></form>


</tr></table><br>
<center><font size=1>Join the VRSHC Community,Get better help in Studies. Solved by<a href="http://www.vrshc.com/forum"><b>VRSHC Team</b></a><br></font></center>


</body>
</html>