WP Lab Final Programs

Part A Programs
1.Create a form having number of elements. Write a java script code to count the number of elements in
a form.
<html>
<head>
<title>COUNT OF NUMBER OF ELEMENTS IN A FORM</title>
<script type="text/javascript">
function countElements()
{
alert("The number of elements in form1 are:"+document.form1.length);
}
</script>
</head>
<body bgcolor="lightgrey">
<form name="form1">
<pre>
Firstname:<input type="text" name="fname" value=""/><br/>
Lastname:<input type="text" name="lname" value=""/><br/><br/>
<b>Gender</b>
Male<input type="radio" name="rad" value="radio_button1"/>
Female<input type="radio" name="rad" value="radio+button2"/><br/>
<b>Education</b>
UnderGraduate<input type="checkbox" name="check1"/>
Graduate<input type="checkbox" name="check2" value="Check2"/>
PostGraduate<input type="checkbox" name="check3" value="Check3"/>
<input type="submit" value="Submit" onclick="countElements()"/>
</form>
</body>
</html>
Output:
2. Create a HTML form that has number of textboxes. When the form runs in the Browser fill in the
textboxes with data. Write a Javascript code that verifies that all textboxes has been filled, if a textbox has
been left empty, popup an alert indicating which textbox has been left empty.
<html>
<head>
<title>Contact Form</title> <script type="text/javascript">
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 EmailID");
document.myForm.Email.focus() ;
return false;
}
if(document.myForm.Phone.value=="")
{
alert("Please provide your Phone Number");
document.myform.Phone.focus() ;
return false;
}
return true;
}
</script>
</head>
<body>
<center><h2>CONTACT FORM</h2>
<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"/></td>
</tr>
<tr>
<td>Phone</td>
<td><input type="text" name="Phone"/></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" value="Submit"/>
</td>
</tr>
</table>
</form>
</center>
</body>
</html>
Output:
3. Develop a HTML Form, which accepts any Mathematical expression. Write a JavaScript code to
evaluate the expression and display the result.
<html>
<head>
<title>Solution of Mathematical Expression</title>
function calc()
{
document.frmExp.result.value=eval(document.frmExp.expr.value)
}
</script>
</head>
<body>
<form name="frmExp">
Enter a mathematical expression in the textbox, Click on Calculate button to display the result<br></br>
<table cell padding="4" cellspacing="0"height=100 width=200 bgcolor="lightgrey">
<tr>
<td><input type="text" size="20"name="expr"></td>
<td><input type="button" name="Button1" value="Calculate" onclick="calc()"></td>
</tr>
<tr>
<td><b>Result:</b><input type="text" size="20" name="result"></td>
<td><input type="reset" name="reset" value="Reset"></td>
</tr>
</table>
<p>Click on Reset button to enter another new expression.</p>
</form>
</body>
</body>
</html>
Output:
4. Dynamic stacking
<html>
<head>
<title>DYNAMIC STACKING OF IMAGES</title>
<style type="text/css">
#first{border-style:solid;position:absolute;top:20px;left:20px;width:100px;height:100px;background-
color:red;z-index:10}
#second{border-style:solid;position:absolute;top:30px;left:60px;width:100px;height:100px;background-
color:orange;z-index:5}
#third{border-style:solid;position:absolute;top:40px;left:100px;width:100px;height:100px;background-
color:yellow;z-index:0}
</style>
</head>
<body>
<p id="first"> First</p>
<p id="second"> Second</p>
<p id="third"> Third</p>
</body>
</html>
Output with z-index: Output without z-index:
5. Write a javascript code to find the sum of N natural numbers. (Use user-defined function).
<html>
<head>
<title>SUM OF N NATURAL NUMBERS</title>
var num,n,s=0;
num=window.prompt("Enter a number","0");
n=parseInt(num);
if(n<=0)
{
alert("Enter a positive number");
}
document.write("<h1><center>Sum of "+n+"natural numbers is: ");
findsum(n);
document.write(s+"</center></h1>");
function findsum(n)
{
for(var i=0;i<=n;i++)
s=s+i;
}
</script>
</head>
<body bgcolor="powder blue">
</body>
</html>
Output:
6. Write a javascript code to find factorial of a number.
<html>
<head>
<title>Recursive factorial function</title>
var num,n,f;
num=window.prompt("Enter the number to find factorial","0");
n=parseInt(num) ;
document.write("<h1><center>Factorial of "+n+" is ");
for(var i=0;i<=n;i++)
f=fact(n);
document.write("<i>"+f+"</i></center></h1>");
function fact(n)
{
if(n==1)
return 1;
else
return n*fact(n-1);
}
</script>
</head>
<body bgcolor="red"></body>
</html>
Output:
7. Write a JavaScript code block using arrays and generate the current date in words, this should
include the day, month and year.
<html>
<head>
<title>CurrentDate</title>
var dnames=new
Array("Sunday","Monday","Tuesday",Wednesday","Thursday","Friday","Saturday");
var mnames=new
Array("January","February","March","April","May","June","July","August","Septemeber",
"October","Novemeber","Decemeber");
var d=new Date();
var curr_day=d.getDay();
var curr_date=d.getDate();
var sup="";
if(curr_date==1||curr_date==21||curr_date==31)
{
sup="st";
}
else if(curr_date==2||curr_date==22)
{
sup="nd";
}
else if(curr_date==3||curr_date==23)
{
sup="rd";
}
else
{
sup="th";
}
var curr_month=d.getMonth();
var curr_year=d.getFullYear();
document.write("<h1><center>"+dnames[curr_day]+""+ curr_date+"<SUP>"+sup+"</SUP>"
+mnames[curr_month]+""+curr_year+"</center></h1>");
</script>
</head>
<body bgcolor="cyan">
</body>
</html>
Output:
8.Create a form for Student information. Write Javascript code to
Find Total, Average, Result and Grade.
<html>
<head>
<titele>Declaration of results of students</title>
<script>
function findResult()
{
var result="";
var grade="";
var studname=document.frmStudent.sname.value;
var m1=parseInt(document.frmStudent.mark1.value);
var total=(m1+m2+m3+m4+m5+m6);
var avg=Math.round(total/6);
if(m1<40||m2<40||m3<40||m4<40||m5<40||m6<40)
result="Fail";
else
{
var mm=avg;
if(mm>=80)
{
grade="A";
result="Distinction";
}
else if(mm>=60)
{
grade="B"
result="Firstclass";
}
else if(mm>=50)
{
grade="C";
result="Secondclass";
}
else if(mm>=40)
{
grade="D";
result="Pass";
}
else if(mm<50)
{
grade="F";
result="Fail";
}
}
document.write("<br/><pre>--------------------------------------------------------------------------
------------------<br/>");
document.write("<br/><h1>B.Sc.VSemester-RESULTSHEET </h1>");
document.write("<br/>-----------------------------------------------------------------------------------
---------<br/>");
document.write("<br/>StudentName :: <b>"+studname+"</b>");
document.write("<br/>TotalMarks :: <b>"+total+"/600"+"</b>");
document.write("<br/>AverageMarks :: <b>"+avg+"</b>");
document.write("<br/>Result :: <b>"+result+"</b>");
document.write("<br/>Grade :: <b>"+grade+"</b>");
document.write("<br/>-----------------------------------------------------------------------------------
---------</pre><br/>");
}
</script>
</head>
<body bgcolor="lightgray">
<form name="frmStudent">
<center><b><h1>STUDENT INFORMATION</h1></b></center><br/><br/>
<h2>Please fill in details:</h2>
<pre>
STUDENT NAME : <inputtype="text"name="sname"><br>
PHYSICS V : <inputtype="text"name="mark1"><br/>
PHYSICS VI : <inputtype="text"name="mark2"><br/>
MATHEMATICS V: <inputtype="text"name="mark3"><br/>
MATHEMATICS VI: <inputtype="text"name="mark4"><br/>
COMPUTER SCIENCE V: <inputtype="text"name="mark5"><br/>
COMPUTER SCIENCE: <inputtype="text"name="mark6"><br/>
</pre>
<input type="button" value="Submit" onclick="findResult();">
</form>
</body>
</html>
Output:
9. Create a form for Employee information. Write javascript code to find DA, HRA, PF, TAX, GrossPay,
Deduction and Net pay.
<html>
<head>
<title>EMPLOYEE INFORMATION</title>
<script>
function findSalary()
{
var empname=document.frmEmp.ename.value;
var edept=document.frmEmp.dept.value;
var basicpay=parseInt(document.frmEmp.basic.value);
var da,hra,tax,pf,grosspay,deductions,netpay;
da=basicpay*0.5;
hra=basicpay*0.15;
grosspay=basicpay+da+hra;
pf=grosspay*0.12;
tax=grosspay*0.1;
deductions=pf+tax;
netpay=grosspay-deductions;
document.write("<h1>EMPLOYEESALARYDETAILS</h1><br/></br>");
document.writeln("EmployeeName :<b>"+empname+"</b>></br>");
document.writeln("Basicpay :<b>"+basicpay+"</b></br>");
document.writeln("DearnessAllowance :<b>"+da+"</b></br>");
document.writeln("HouseRentAllowances:<b>"+hra+"</b></br>");
document.writeln("GrossSalary :<b>"+grosspay+"</b></br>");
document.writeln("Deductions :<b>"+deductions+"</b></br>");
document.writeln("NetSalary :<b>"+netpay+"</b>");
}
</script>
</head>
<body bgcolor="lightgrey">
<form name="frmEmp">
<center><b><h1>EMPLOYEE SALARY DETAILS</h1></b></center><br/><br/>
<h2>Enter Employee Name, Department and Basic Pay</h2>
<pre>
<font size="4">
<center><h1>EMPLOYEE SALARY DETAILS</h1></center>
EMPLOYEE NAME <input type="text" name="ename"><br/>
DEPARTMENT <input type="text" name="dept"><br/>
BASICPAY <input type="text" name="basic"><br/><br/>
</font>
</pre>
<input type="button" value="CalculateNetSalary" onclick="findSalary();">
</body>
</html>
Output:
10. Create a form consists of a two multiple choice lists and one single choice list.
1)Thefirstmultiplechoicelist,displaysthemajordishesavailable.
2)Thesecondmultiplechoicelist,displaysthestartersavailable.
3)The single choice list, displays the soft drinks available.
<html>
<head>
<title>Menu Driven Program</title>
<script>
function findCost()
{
var starter=document.getElementById("starter");
var main=document.getElementById("main");
var soft=document.getElementById("soft");
var selecteditem="Item\t\t\t\tPrice\n----------------------------------------------\n";
var total=0;
for(var i=0;i<starter.options.length;i++)
{
var choice=starter.options[i];
if(choice.selected==true)
{
var price=parseInt(choice.value);
total=total+price;
selecteditem=selecteditem+choice.text+"\t\t\t"+price+"\n";
}
}
for(var i=0;i<main.options.length;i++)
{
var choice=main.options[i];
{
total=total+price;
selecteditem=selecteditem+choice.text+"\t\t\t"+price+"\n";
}
}
for(var i=0;i<soft.options.length;i++)
{
var choice=soft.options[i];
{
total=total+price;
selecteditem=selecteditem+choice.text+"\t\t\t\t"+price+"\n";
}
}
selecteditem=selecteditem+"\n\n\nTotalCost\t\t\t"+total;
document.getElementById("display").value=selecteditem;
}
</script>
</head>
<body bgcolor="grey">
<br/><br/><br/><br/>
<form name="menuform">
<table border="10" width="550" align="center" bgcolor="orange">
<tr>
<th colspan="3" align="center">
<h2>Restaurant Menu Details</h2>
</th>
</tr>
<tr>
<td>Starters</td>
<td>Main Course</td>
<td>Soft Drinks</td>
</tr>
<tr>
<td>
<select id="starter" size="4" multiple="multiple">
<option value="85">Gobi Manchurian</option>
<option value="100">Corn Manchurian</option>
<option value="50">Masala Papad</option>
<option value="65">Tomato Soup</option>
</select>
</td>
<td>
<select id="main" size="4" multiple="multiple">
<option value="100">Veg.Pulao</option>
<option value="150">Jeera Rice</option>
<option value="120">Curry & Roti</option>
<option value="160">Veg.Biriyani</option>
</select>
</td>
<td>
<select id="soft" size="4" multiple="multiple">
<option value="35">Maaza</option>
<option value="25">Pepsi</option>
<option value="30">Fanta</option>
<option value="25">Soda</option>
</select>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<textarea id="display" rows="10" cols="70">
</textarea>
</td>
</tr>
<tr>
<td colspan="3" align="center">
<input type="button" value="FindTotalCost" onclick="findCost();"/>

<input type="reset" value="Clearall"/>
</td></tr>
</table>
</form>
</body>
</html>
Output:
Part B Programs
1.Write a HTML Program to display list of fruits, vegetables and cereals usingordered list.
<html>
<head>
<title>Ordered list</title>
</head>
<body bgcolor="red">
<h4>list of fruits</h4>
<ol type="A" start="A">
<li>Strawberry</li>
<li>Fig</li>
<li>Mango></li>
<li>Pineapple></li>
</ol>
<h4>list of vegetables</h4>
<ol type ="i" start="i">
<li>tomato</li>
<li>cauliflower</li>
<li>carrot</li>
<li>beans<li>
</ol>
<h4>list of cereals</h4>
<ol type="1" start="1">
<li>rice</li>
<li>jowar</li>
<li>groundnuts</li>
<ol>
</body>
</html>
Output:
2. Write a HTML Program to display list of fruits, vegetables and cereals using Unordered list.
<html>
<head>
<title>unOrdered list</title>
</head>
<body bgcolor="pink">
<h4>list of fruits</h4>
<ul type="disc">
<li>Strawberry</li>
<li>Fig</li>
<li>Mango</li>
<li>Pineapple</li>
</ul>
<h4>list of vegetables</h4>
<ul type ="square">
<li>tomato</li>
<li>cauliflower</li>
<li>carrot</li>
<li>beans<li>
</ul>
<h4>list of cereals</h4>
<ul type="circle">
<li>rice</li>
<li>jowar</li>
<li>groundnuts</li>
<ul>
</body>
</html>
Output:
3. Write a HTML Program to demonstrate Confirm Box.

<html>
<head>
<script type ="text/javascript">
function show_confirm()
{
var r =confirm ("Press a button");
if(r==true)
{
alert("We pressed OK!");
}
Else
{
alert("We Pressed Cancel!")
}
}
</script>
</head>
</body>
<input type="button"onclick="show_confirm()"value="Show confirm box"/>
</body>
</html>
Output:
4. Write a HTML Program to demonstrate Prompt Box.
<html>
<head>
function show_prompt()
{
var name=prompt("Please enter your name","");
if(name!=null&&name!="")
{
document.write("Hello "+name+"! How are we today?");
}
}
</script>
</head>
<body>
<input type="button" onclick="show_prompt()" value="Show prompt box"/>
</body>
</html>
Output:
5. Write a JavaScript program to execute Mouse Events.

<html>
<head><script>
function myFunction(element, clr)
{
element.style.color = clr;
}
</script>
</head>
<body>
<h1 onmouseover="style.color='red'" onmouseout="style.color='black'">Get the Mouse over this text</h1>
<h1 onmousedown="myFunction(this,'red')" onmouseup="myFunction(this,'green')">
Click the text to change the color.<br/>A function, with parameters, is triggered when the mouse button is
pressed down, and again,<br/> with other parameters, when the mouse button is released.
</h1>
</body>
</html>
Output:
6. Write a JavaScript program to convert Lower Case to Upper Case.

<html>
<head>
<title>To convert the text to Uppercase</title>
<script type="text/javascript"> function change_case()
{
document.form1.type.value=document.form1.type.value.toUpperCase();
}
</script>
</head>
<body onLoad="form1.type.focus();">
<center><h1>To convert the character to Uppercase</h1></center>
<form name="form1" method="post">
Enter User ID<input type="text" name="type"value="">
<input type="button" value="Change to Upper" onclick="change_case();"></form>
</body>
</html>
Output:
7. Write a JavaScript program to generate Fibonacci series.
<html>
<head><title>Fibonacci Series</title></head>
<body>
var var1 = 0;
var var2 = 1;
var var3;
var num = prompt("Enter the limit to generate fibonacci no",0); document.write(var1+"<br />");
document.write(var2+"<br />");
for(var i=3; i <= num;i++)
{
var3 = var1 + var2;
var1 = var2;
var2 = var3;
document.write(var3+"<br />");
}
</script>
</body>
</html>
Output:
8. Write a JavaScript program to find the reverse of a given number and check whether the given
number is Palindrome or not.
<html>
<head>
function palin()
{
var rem,num,temp,rev=0;
num=document.getElementById("no_input").value;
temp=num;
while(num>0)
{
rem=num%10;
num=parseInt(num/10);
rev=rev*10+rem;
}
alert(rev);
if(temp==rev)
document.write("The Number is Palindraome");
else
document.write("The Number is not a Palindrome");
}
</script>
</head>
<body>
Enter any Number:
<input id="no_input">
<button onclick="palin()">Check</button></br></br>
</body>
</html>
Output:
9. Write a javascript code to demonstrate the use of addEventListener.

<html>
<head>
<style>
.divstyle{
display:table-cell;
border: 2px solid black;
padding: 20px;
text-align: center;
}
</style>
</head>
<body>
<div id = "div1" class="divstyle">
div1
div2
div3
<script>
var divs = document.getElementsByTagName("div");
for(var i = 0; i<divs.length; i++){
divs[i].addEventListener("click",clickhandler,true );
}
function clickhandler() {
alert(this.getAttribute("id") + "event got handled");
}
</script>
</body>
</html>
Output:
10. Create a page with dynamic effects. Write a code to include layers and Basic animation.
<html>
<head>
<title> Basic Animation </title>
<style>
#layer1{position:absolute;top:50px;left:50px;}
</style>
function moveImage(layer)
{
var top=window.prompt("Enter the top value");
var left=window.prompt("Enter the left value");
document.getElementById(layer).style.top=top+'px';
document.getElementById(layer).style.left=left+'px';
}
</script>
</head>
<body>
<div id="layer1"> <img src="car.jfif" onclick="moveImage('layer1')" alt="My Image"/></div>
</body>
</html>
Output:

WP Lab Final Programs

Uploaded by

Document Information

Original Description:

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

WP Lab Final Programs

Uploaded by

Copyright:

Available Formats

Part A Programs

Output with z-index: Output without z-index:

3. Write a HTML Program to demonstrate Confirm Box.

5. Write a JavaScript program to execute Mouse Events.

6. Write a JavaScript program to convert Lower Case to Upper Case.

9. Write a javascript code to demonstrate the use of addEventListener.

You might also like