Web Tech Coding 002

S.
NO DATE CONTENT PAGE STAFF

NO SIGN
1
COUNT THE NUMBER OF ELEMENTS
2
POPUP MESSAGE
3
MATHEMATICAL EXPESSION
4
ANIMATION
5
NATURAL NUMBERS
6
DATE FUNCTION
STUDENT INFORMATION
DETAILS
EMPLOYEE PAYROLL
9
MULTIPLE CHOICE LIST
1.COUNT THE NUMBER OF ELEMENTS
CODING:
<html>
<head>
<title>Registration Form</title>
<script type = "text/javascript">
function display()
{
alert(document.getElementById("form1").length);
}
</script>
</head>
<body onload = "display()">
<form id = "form1">
<table border = "1">
<tr>
<td>Name</td>
<td><input type = "text" value = "firstname" /></td>
</tr>
<tr>
<td>Choose Your Username</td>
<td><input type = "text" value = "Username" /></td>
</tr>
<tr>
<td>Create Password</td>
<td><input type = "password" value = "password" /></td>
</tr>
<tr>
<td>Confirm Password</td>
<td><input type = "password" value = "confirmPass"></td>
</tr>
<tr>
<td>Birthday</td>
<td><select name = "date"><option value = "7" >11</td>
<td><select name = "month"><option value = "November">November</td>
<td><select name = "year"><option value = "1991">1991</td>
</tr>
<tr>
<td>Gender</td>
<td><input type = "radio" name = "gender"/>Male</td>
<td><input type = "radio" name = "gender"/>Female</td>
</tr>
<tr>
<td>Mobile</td>
<td><input type = "text" ></td>
</tr>
<tr>
<td>Location</td>
<td><input type = "text"></td>
</tr>
<tr>
<td><input type = "checkbox" /> I agree the terms and policy</td>
</tr>
<tr>
<td><input type = "button" value = "create" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
2. POPUP MESSAGE
CODING:
<html>
<head>
function validate()
{
if(document.myForm.Name.value == "")
{
alert("Please Provide Your Name");
document.myForm.Name.focus();
return false;
}
if(document.myForm.Email.value == "")
{
alert("Please Provide Your Email ID");
document.myForm.Email.focus();
return false;
}
if ((document.myForm.Zip.value == "")||(document.myForm.Zip.value.length !=
5))
{
alert("Please Provide a valid zip code format #####");
document.myForm.Zip.focus();
return false;
}
if(document.myForm.Country.value == "-1")
{
alert("Please Provide Your Country Name");
return false;
}
return true;
}
function validateEmail()
{
var emailID = document.myForm.Email.value;
atpos = emailID.indexOf("@");
dotpos = emailID.lastIndexOf(".");
if(atpos < 1 || (dotpos - atpos < 2))
{
alert("Please Enter Correct Email ID");
document.myForm.Email.focus();
return false;
}
return true;
}
</script>
</head>
<body >
<form name = "myForm" onsubmit = "return(validate());" >
<table cellspacing = "2" cellpadding = "2" border = "1">
<tr>
<td>Name</td>
<td><input type = "text" name = "Name" /></td>
</tr>
<tr>
<td>Email ID</td>
<td><input type = "text" name = "Email" onchange = "validateEmail();"/></td>
</tr>
<tr>
<td>Zip Code</td>
<td><input type = "text" name = "Zip" /></td>
</tr>
<tr>
<td>Country</td>
<td><select name = "Country" >
<option value = "-1" selected> [Choose Yours]</option>
<option value = "1" >INDIA</option>
<option value = "2" >USA</option>
<option value = "3" >Srilanka</option>
</select>
</td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "submit" value = "Submit" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
3. MATHEMATICAL EXPRESSION
CODING:
<html>
<head>
<title>Mathematical Expression</title>
function math_exp()
{
var x = document.form1.exptext.value;
var result = eval(x);
document.form1.resulttext.value = result;
}
</script>
</head>
<body >
<form name = "form1">
<table>
<tr>
<td>Expression</td>
<td><input type = "text" name = "exptext" /></td>
</tr>
<tr>
<td>Result</td>
<td><input type = "text" name = "resulttext" /></td>
</tr>
<tr>
<td><input type = "button" value = "calculate" onclick = "math_exp()" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
4. ANIMATION
CODING:
<html>
<head>
<style>
.moveable{
position: absolute;
}
</style>
var x = 5;
var y = 5;
var dest_x = 300;
var dest_y = 300;
var interval = 10;
function moveImage()
{
if(x < dest_x)
x = x + interval;
if(y < dest_y)
y = y + interval;
document.getElementById("ufo").style.top = y + "px";
document.getElementById("ufo").style.left = x + "px";
if((x + interval < dest_x) && (y + interval < dest_y))
{
window.setTimeout("moveImage()", 100);
}
}
</script>
</head>
<body onload = "moveImage()">
<div id = "ufo" class = "moveable">
<img src = "C:\Users\ADMIN\Desktop\images.jpg" alt = "please link to a valid
image" />
</div>
</body>
</html>
OUTPUT:
5. NATURAL NUMBERS
CODING:
<html>
<head>

var num = window.prompt("Enter the number:","");
var n = parseInt(num);
result = sumnaturalno(n);
window.alert("The sum of " + n + "natural number is" + result);

function sumnaturalno(n)
{
var i;
var sum = 0;
for(i = 1;i <= n; i++){
sum = sum + i;}
return (sum);
}
</script>
</head>
</html>
OUTPUT:
6. DATA FUNCTION
CODING:
<html>
<head>
var d = new Date();
var weekday = new

Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday")
;
var monthname = new

Array("Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec");
document.write(weekday[d.getDay()] + " ");

document.write(d.getDate() + ". ");
document.write(monthname[d.getMonth()] + " ");

document.write(d.getFullYear());;
</script>
</head>
<body>
</body>
</html>
OUTPUT:
7. STUDENT INFORMATION
CODING:
<!DOCTYPE html>
<html>
<head>
function calc()
{
var m1,m2,m3,avg = 0,total = 0, result = "",grade = "";
m1 = parseInt(document.form1.wp.value);
m2 = parseInt(document.form1.sp.value);
m3 = parseInt(document.form1.cg.value);
total = m1+m2+m3;
avg = total/3;
if( m1 < 35 || m2 < 35 || m3 < 35)
{
result = "fail";
grade = "D";
}
else if(avg >= 75)
{
result = "Distinction";
grade = "A+";
}
else if(avg >= 60 && avg < 75)
{
result = "First class";
grade = "A";
}
else if(avg >= 50 && avg < 60)
{
result = "Second class";
grade = "B";
}
else if(avg >=35 && avg < 50)

{
result = "Pass class";

grade = "C";
}
else if (avg < 35)
{
result = "Fail";
Grade = "D";
}
document.form1.result.value = result;
document.form1.grade.value = grade;
document.form1.total.value = total;
document.form1.average.value = avg;
}
</script>
</head>
<body>
<tr>
<td> Student Name</td>
<td><input type = "text" /></td>
</tr>
<tr>
<td colspan = "2" align = "center">Subject Marks</td>
</tr>
<tr>
<td>Web Programming</td>
<td><input type = "text" name = "wp" /></td>
</tr>
<tr>
<td>Computer Graphics</td>
<td><input type = "text" name = "cg" /></td>
</tr>
<tr>
<td>System Programming</td>
<td><input type = "text" name = "sp" /></td>
</tr>
<tr>
<td colspan = "2" align = "center"><input type = "button"
onclick = "calc()" value = "calculte" /></td>
</tr>
<tr>
<td>Total</td>
<td><input type = "text" name = "total"/></td>
</tr>
<tr>
<td>Average</td>
<td><input type = "text" name = "average" /></td>
</tr>
<tr>
<td>Result</td>
<td><input type = "text" name = "result" /></td>
</tr>
<tr>
<td>Grade</td>
<td><input type = "text" name = "grade"/></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
8. EMPLOYEE PAYROLL
CODING:
<html>
<head>
function calc()
{
var bp,DA,HRA,GP,PF,Tax,Deduction,NetPay,name,id,desg;
name = document.form1.firstname.value;
id = document.form1.userid.value;
desg = document.form1.designation.value;
bp = parseInt(document.form1.bp.value);
DA = bp * 0.5;
HRA = bp * 0.5;
GP = bp + DA + HRA;
PF = GP * 0.02;
Tax = GP * 0.01;
Deduction = Tax + PF;
NetPay = GP - Deduction;
document.form1.da.value = DA;
document.form1.hra.value = HRA;
document.form1.gp.value = GP;
document.form1.pf.value = PF;
document.form1.tax.value = Tax;
document.form1.deduction.value = Deduction;
document.form1.netpay.value = NetPay
}
</script>
</head>
<body >
<tr>
<td>Name</td>
<td><input type = "text" name = "firstname" /></td>
</tr>
<tr>
<td>User ID</td>
<td><input type = "text" name = "userid" /></td>
</tr>
<tr>
<td>Designation</td>
<td><input type = "text" name = "designation" /></td>
</tr>
<tr>
<td>Basic Pay</td>
<td><input type = "text" name = "bp"></td>
</tr>
<tr>
<td colspan = "2" align = "center">
<input type = "button" name = "calculate" value = "Click Here To Calculate"onclick
="calc()"></td>
</tr>
<tr>
<td>Dearness Allowance </td>
<td><input type = "text" name = "da"/></td>
</tr>
<tr>
<td>House Rent Allowance </td>
<td><input type = "text" name = "hra"></td>
</tr>
<tr>
<td>GP</td>
<td><input type = "text" name = "gp"></td>
</tr>
<tr>
<td>Provident Fund</td>
<td><input type = "text" name = "pf" /></td>
</tr>
<tr>
<td>Tax</td>
<td><input type = "text" name = "tax" /></td>
</tr>
<tr>
<td>Deduction</td>
<td><input type = "text" name = "deduction" /></td>
</tr>
<tr>
<td>NetPay</td>
<td><input type = "text" name = "netpay" /></td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:
9. MULTIPLE CHOICE LIST
CODING:
<html>
<head>
function findcost()
{
var major = document.getElementById("major");
var Starters = document.getElementById("starters");
var soft = document.getElementById("soft");
var s = "Item \t \t \t Price \n--------------------------------\n";
var totalcost = 0;
for( var i = 0; i < major.options.length; i++)

{
var option = major.options[i];
if(option.selected == true)
{
var price = parseInt(option.value);
totalcost = totalcost + price;
s = s+ option.text + "\t \t" + price + "\n";
}
}
for( var i = 0; i < starters.options.length; i++)
{
var option = starters.options[i];
if(option.selected == true)
{
var price = parseInt(option.value);
s = s + option.text + "\t \t" + price + "\n";
}
}
var softdrinkindex = soft.selectedIndex;
if(softdrinkindex != null)
{
var selectedsoftdrink = soft.options[soft.selectedIndex].text;
var price = parseInt(soft.options[soft.selectedIndex].value);
s = s + selectedsoftdrink + "\t \t" + price + "\n";
}
s = s + "\n\n Total Cost \t \t" + totalcost;
document.getElementById("ordereditems").value = s;
}
</script>
</head>
<body>
<form name = "menuForm">
<table border = "1" >
<tr>
<h2>Restaurant Menu Details</h2>
</td>
</tr>
<tr>
<td> Major Dishes:</td>
<td>
<select id = "major" size = "3" multiple = "multiple">
<option value = "100"> Vegetable Pulav</option>
<option value = "150"> Hyderabadi Biriyani</option>
<option value = "50"> Roti with Curry </option>
</select>
</td>
</tr>
<tr>
<td> Starters </td>
<td><select id = "starters" size = "3" multiple = "multiple">
<option value = "80"> Gobi Manchurian </option>
<option value = "40"> Veg Clear Soup </option>
<option value = "30"> Masala Papad </option>
</td>
</tr>
<tr>
<td>Soft Drinks</td>
<td>
<select id = "soft" size = "3" multiple = "multiple">
<option value = "20"> Pepsi</option>
<option value = "25"> Coke </option>
<option value = "30"> Lime Soda </option>
</select>
</td>
</tr>
<tr>
<textarea id = "ordereditems" rows = "10" cols = "40">
</textarea>
</td>
</tr>
<tr>
<td>
<input type = "button" value = "Find total Cost" onclick = "findcost()" />
</td>
<td>
<input type = "reset" value = "Clear" />
</td>
</tr>
</table>
</form>
</body>
</html>
OUTPUT:

Web Tech Coding 002

Uploaded by

Copyright:

Available Formats

Web Tech Coding 002

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Web Tech Coding 002

Uploaded by

Copyright:

Available Formats

S.

NO DATE CONTENT PAGE STAFF

<script type = "text/javascript">

window.alert("The sum of " + n + "natural number is" + result);

var weekday = new

var monthname = new

document.write(weekday[d.getDay()] + " ");

document.write(monthname[d.getMonth()] + " ");

else if(avg >=35 && avg < 50)

result = "Pass class";

for( var i = 0; i < major.options.length; i++)

You might also like