WEB Technologies LAB: Abhishek MP

WEB
TECHNOLOGIES
LAB
18MCA18
abhishek mp
MCA
1. Create an XHTML page that provides information about your department. Your
XHTML page must use the following tags: a) Text Formatting tags b) Horizontal
rule c) Meta element d) Links e) Images f) Tables
dws.html
<html>
<head>
<title>MCA DEPARTMENT</title>
</head>
<body>
<table align="center" border="1" cellpadding="10">
<tr>
<td align="center" width="20%">
<p>
<img src="1.jpg" width="200" height="200" align="center"/>
</p>
</td>
<td align="center">
<p><pre>
Bapuji Institute Of Engeering & Technology
P.O.Box No. 325, Shamanur Road
Davangere
Master of Computer Applications
</pre>
</p>
</td>
<td align="center">
<p>
<img src="h.jpg" width="700" height="200" align="center" />
</p>
</td>
<td align="center" width="20%">
<img src="2.png" width="200" height="200" align="center"/>
</td>
</tr>
<tr>
<td><ol>
<li><a href="aboutmca.html" ><input type="button" vspace="8"
hspace="10" value="ABOUT MCA" /></a></li><br />
<li><a href="fac.html" ><input type="button" vspace="8"
hspace="10" value="FACULTY" /></a></li><br />
<li><a href="croom.html"><input type="button" vspace="8"
hspace="10" value="CLASS ROOM" /></a></li><br />
<li><a href="lroom.html" ><input type="button" vspace="8"
hspace="10" value="LAB" /></a></li><br />
<li><a href="lroom.html"><input type="button"vspace="8"
hspace="10" value="LIBEARY" /></a></li><br />
</td>
<td align="center" width="20%"><p>
use pedagogical such that which is adapable to learn continues
changes in the technology
</p>
</td>
<td>
<h2>contacts</h2>
ph: 08192-221461, 220938,222245 <br >
website:www.bietdvg.edu
</td>
<td>
<h2> contact persons</h2>
Dr. Shamanur Shivashankarappa
Sri A C Jayanna
Prof. Y Vrushabhendrappa
Dr.S.Subrahmanya Swamy
</td>
</tr>
</table>
</body>
</html>
Aboutmca.html
<html>
<head>
<title>ABOUT MCA</title>
</head>
<body>
<center>
<h1> ABOUT MCA</h1>
<per>
“MCA (Master of Computer Applications) is a professional
master’s degree in computer science.
It focuses on providing a theoretical as well as practical
training to students in the related field.”
</per>
</center>
<body>
</body>
</html>
croom.html
<html>
<head>
<title>class room</title>
</head>
<body>
<table align="center" cellpadding="15" border="1">
<caption><h1> CLASSS ROOM </h1></caption>
<tr>
<th>SN</th>
<th>ROOM TYPE</th>
<th>ROOM NUM</th>
<th>SEATING CAPACITY</th>
</tr>
<tr>
<td>1.</td>
<td>class room</td>
<td>121</td>
<td>lecture room</td>
</tr>
<td>2.</td>
<td>class room</td>
<td>122</td>
</tr>
<td>3.</td>
<td>class room</td>
<td>123</td>
</tr>
<td>4.</td>
<td>class room</td>
<td>124</td>
</tr>
</table>
</body>
</html>
fac.html
<html>
<head>
<title>FACULTY LIST</title>
</head>
<body>
<table cellpadding="15" border="1" align="center">
<caption><h1> MCA DEPT. FACULTY LIST</h1></caption>
<tr>
<th>
<b> SN </b>
</th>
<th>
<b> NAME </b>
</th><th>
<b> QUALIFICATION</b>
</th>
<th>
<b> DESIGNATION </b>
</th>
</tr>
<tr>
<td>1.</td>
<td>CHATHANA PRAKESH</td>
<td>PHD</td>
<td>HOD</td>
</tr>
<tr>
<td>2.</td>
<td>M SADIQUE</td>
<td>MTECH</td>
<td>PROFF</td>
</tr>
<td>3.</td>
<td>M SADIQUE</td>
<td>MTECH</td>
<td>PROFF</td>
</tr>
<td>4.</td>
<td>M SADIQUE</td>
<td>MTECH</td>
<td>PROFF</td>
</tr>
<td>5.</td>
<td>M SADIQUE</td>
<td>MTECH</td>
<td>PROFF</td>
</tr>
<td>6.</td>
<td>M SADIQUE</td>
<td>MTECH</td>
<td>PROFF</td>
</tr>
</table>
</body>
</html>
lroom.html
<html>
<head>
<title>LAB ROOM</title>
</head>
<body>
<table align="center" cellpadding="15" border="1">
<caption><h1> LAB ROOM </h1></caption>
<tr>
<th>SN</th>
<th>ROOM TYPE</th>
<th>ROOM NUM</th>
</tr>
<tr>
<td>1.</td>
<td>CN LAB</td>
<td>121</td>
</tr>
<td>2.</td>
<td>NETWORK LAB</td>
<td>122</td>
</tr>
<td>3.</td>
<td>c LAB</td>
<td>123</td>
</tr>
<td>4.</td>
<td>UNIX LAB</td>
<td>124</td>
</tr>
</table>
</body>
</html>
2. Develop and demonstrate the usage of inline, external and internal style sheet
using CSS. Use XHTML page that contains at least three paragraphs of text, listed
elements and a table with four rows and four columns.
<? xml version="1.0" encoding="utf-8"?>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>example</title>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style>
h2 { color:red; margin:0px;}
p,ol,li{margin:3px solid red}
p.one{
width:500px;
color:blue;
background-color:pink;
margin:20px;
padding:20px;
border-style:solid;
border-color:black;
}
p.two{
padding:30px;
color:yellow;
background-color:black;
border-style:solid;
}
p.three
{
padding:20px;
color:white;
background-color:blue;
border-style:solid;
}
</style>
</head>
<body>
<h1 style="color:blue; background-color:coral">
introduction</h1>
<h2>orgin</h2>
<p class="one">
unset is the time of day when our sky meets the outer space
solar winds. There are blue, pink, and purple swirls, spinning and
twisting, like clouds of balloons caught in a blender. The sun
moves slowly to hide behind the line of horizon, while the moon
races to take its place in prominence atop the night sky. People
slow to a crawl, entranced, fully forgetting the deeds that still
must be done. There is a coolness, a calmness, when the sun
does set.
</p>
<h2>the </h2>
<p class="two">
On July 16, 1969, the Apollo 11 spacecraft launched from the
Kennedy Space Center in Florida. Its mission was to go where no
human being had gone before—the moon! The crew consisted of
Neil Armstrong, Michael Collins, and Buzz Aldrin. The spacecraft
landed on the moon in the Sea of Tranquility, a basaltic flood
plain, on July 20, 1969. The moonwalk took place the following
day. On July 21, 1969, at precisely 10:56 EDT, Commander Neil
Armstrong emerged from the Lunar Module and took his famous
first step onto the moon’s surface. He declared, “That’s one small
step for man, one giant leap for mankind.” It was a monumental
moment in human history!
</p>
<p class="three">
It was July 21, 1969, and Neil Armstrong awoke with a start. It was
the day he would become the first human being to ever walk on
the moon. The journey had begun several days earlier, when on
July 16th, the Apollo 11 launched from Earth headed into outer
space. On board with Neil Armstrong were Michael Collins and
Buzz Aldrin. The crew landed on the moon in the Sea of
Tranquility a day before the actual walk. Upon Neil’s first step
onto the moon’s surface, he declared, “That’s one small step for
man, one giant leap for mankind.” It sure was
</p>
<h2> levels of css</h2>
<ol style="list-style-type:decimal;">
<li>inline</li>
<li>document level</li>
<li>external css</li>
</ol>
<h2>selector</h2>
<p> selector may one of the following form:
<ol style="list-style-type:upper-roman;">
<li>simple</li>
<li>class</li>
<li> genric </li>
</ol>
</p>
<table>
<tr>
<th>sn</th>
<th>tag</th>
<th>what it does</th>
<th>some attributes</th>
</tr>
<tr>
<td>1</td>
<td>table</td>
<td>define table </td>
<td>border,width,adding</td>
</tr>
<tr>
<td>2</td>
<td>th</td>
<td>table header </td>
<td>align</td>
</tr>
<tr>
<td>3</td>
<td>td</td>
<td>table data </td>
<td>colspan,rowspan</td>
</tr>
<tr>
<td>4</td>
<td>tr</td>
<td>table row </td>
<td>color</td>
</tr>
</table>
</body>
</html>
3. Develop and demonstrate a XHTML file that includes Javascript script for the
following problems:
a) Input: A number n obtained using prompt
Output : The first n Fibonacci numbers
b) Input: A number n obtained using prompt
Output : A table of numbers from 1 to n and their squares using alert
3a.html
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml/">
<head><title>Fibonacci series</title>
</head>
<body bgcolor="yellow">
<h3 style="text-align:center;color:red">Program to generate
first n Fibonacci numbers</h3>
<script type="text/javascript">
var limit=prompt("enter a number");
var f1=0;
var f2=1;
document.write("</h3>the limit entered is:</h3>",limit,"<br/>");
document.write("</h3>the Fibonacci series is<br/>");
if(limit==1)
{
document.write("",f1,"<br/>");
}
if(limit==2)
{
}
if(limit>2)
{
for(i=2;i<limit;i++)
{
f3=f2+f1;
f1=f2;
f2=f3;
}
}
</script>
</body>
</html>
3b.html
<head>
<title>square</title>
</head>
<body bgcolor="yellow">
<h3 style="text-align:center;color:red">
Program to genrate a table of numbers from 1 to n their squares
using alert
</h3>
var n=prompt("enter a limit 'n' to genrate a table of numbers
from 1 to n:", "");
var msg="";
var res="0";
for(var x=1;x<=n;x++)
{
res=x*x;
msg=msg+" "+x+"*"+x+"="+res+"\n";
}
alert(msg);
</script>
</body>
</html>
4. Write a JavaScript program to generate n number of random numbers and store
them in an array. Sort the generated numbers in ascending order using array sort
method. Develop separate functions to find mean and median of numbers that
are in the array. Display the results with appropriate messages.
<!DOCTYPE html>
<html>
<body>
<h2>java script array sort</h2>
<p>click the buttons to sort the array alphabetically or
numercally</p>
<button onclick="myFunction1()">sort alpha</button>
<button onclick="myFunction2()">sort num</button>
<p id="demo"></p>
<script>
var points=[40,100,1,5,25,10];
document.getElementById("demo").innerHTML=points;
function myFunction1(){
points.sort();
}
function myFunction2(){
points.sort(function(a,b){return a-b});
}
</script>
</body></html>
5. Create a XHTML document that describes the form for taking orders for
popcorn. Text boxes are used at the top of the form to collect the buyer’s name
and address. These are placed in a borderless table to force the text box align
vertically. A second table to collect actual order. Each row of this table names a
product, displays the price, and uses text box with size 2 to collect the quantity
ordered using <td> tag. The payment method is input by the user through one of
four radio buttons. Provide provision for submission of order and clear the order
form.
5.html
<html>
<head>
<title>popcorn</title>
<body>
<h2> wellcome to mellienium gymnastics </h2>
<form action="">
<table>
<tr>
<td>buyer name:</td>
<td><input type="text" name="name" size="30"/></td>
</tr>
<tr>
<td> street adress </td>
<td><input type="text" name="street" size="30"/></td>
</tr>
<tr>
<td>city,state,zip:</td>
<td><input type="text" name="city" size="30"/></td>
</tr>
</table>
<table border="border">
<tr>
<th>product name </th><th>price</th><th>quantity</th>
</tr>
<tr>
<td>unpoped popcorn</td>
<td>$3.00</td>
<td><input type="text" name="unpop" size="2"/></td>
</tr>
<tr>
<td>caramel popcorn</td>
<td>$3.50</td>
<td><input type="text" name="caramel" size="2"/></td>
</tr>
<tr>
<td>caramel nut popcorn</td>
<td>$4.50</td>
<td><input type="text" name="caramelnut" size="2"/></td>
</tr>
<tr>
<td>toffey nut popcorn</td>
<td>$3.00</td>
<td><input type="text" name="toffeynut" size="2"/></td>
</tr>
</table>
<h3> payment method:</h3>

<p>
<label>
<input type="radio" name="payment" value="visa"
checked="checked"/> visa
</label>
<label>
<input type="radio" name="payment" value="mc"/> master card
</label>
<label>
<input type="radio" name="payment" value="discover"/>discover
</label>
<label>
<input type="radio" name="payment" value="check"/> check
</label>
</p>
<p>
<input type="submit" value="submit order" />
<input type="reset" value="clear order form" />
</p>
</form>
</body>
</html>
6. Develop, test and validate an XHTML document that has checkboxes for apple
(59 cents each), orange (49 cents each), and banana (39 cents each) along with
submit button. Each checkboxes should have its own onclick event handler.
These handlers must add the cost of their fruit to a total cost. An event handler
for the submit button must produce an alert window with the message ‘your total
cost is $xxx’, where xxx is the total cost of the chose fruit, including 5 percent
sales tax. This handler must return ‘false’ (to avoid actual submission of the form
data). Modify the document to accept quantity for each item using textboxes.
6a.html
<html>
<head>
<title>fruit shop</title>
<script language="javascript">
var sum=0;
function applecost(){ sum += 59; }
function orangecost(){ sum += 49; }
function bananacost(){ sum += 39; }
function setzero(){ sum=0; }
function discost(){ alert("total cost=$" +(1.05*sum)/100); }
</script>
</head>
<body>
<h2> order form</h2>
<form action=""onsubmit="return false">
<p>
<label>apple(59 cents)
<input type="checkbox" name="apple" value="59"
onclick="applecost();"/><br />
</label>
<label>orange(49 cents)
<input type="checkbox" name="orange" value="59"
onclick="orangecost();"/><br />
</label>
<label>banana(39 cents)
<input type="checkbox" name="banana" value="59"
onclick="bananacost();"/><br />
</label>
<input type="button" value="submit" onclick="discost();"/>
<input type="button" value="RESET" onclick="setzero();" />
</p>
</form>
</body>
</html>
6b.html
<html>
<head><title>fruit shop</title>
var sum=0;
function applecost()
{
var x=document.getElementById("app");
sum += parseInt(x.value)*59;
}
function orangecost()
{
var x=document.getElementById("org");
}
function bananacost()
{
var x=document.getElementById("ban");
}
function setzero()
{
sum=0;
document.getElementById("app").value="";
document.getElementById("org").value="";
document.getElementById("ban").value="";
}
function discost()
{
alert("tpoal cost=$" +(1.05*sum)/100);
}
</script>
<body>
<h2> order form</h2>
<form action="" onsubmit="return false">
<p>
<label>apple(59 cents)
<input type="text" id="app" size="2" value=""/>
<input type="checkbox" name="apple" value="59"
onclick="applecost();"/><br />
</label>
<label>orange(49 cents)
<input type="text" id="org" size="2" value=""/>
<input type="checkbox" name="orange" value="59"
onclick="orangecost();"/><br />
</label>
<label>banana(39 cents)
<input type="text" id="ban" size="2" value=""/>
<input type="checkbox" name="banana" value="59"
onclick="bananacost();"/><br />
</label>
<input type="button" value="submit" onclick="discost();"/>
<input type="button" value="RESET" onclick="setzero();" />
</p>
</form>
</body>
</html>
7. a) Develop and demonstrate, a HTML document that collects the USN (the valid
format is : A digit from 1 to 4 followed by two upper-case characters followed by
two digits followed by three upper-case characters followed by two digits; (no
embedded spaces are allowed) from the user. Use JavaScript that validate the
content of the document. Suitable messages should be display in the alert if
errors are detected in the input data. Use CSS and event handlers to make your
document appealing.
b) Modify the above program to get the current semester also(restricted to be

a number from 1 to 6)
7a.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<head>
<title>form validation</title>
<script>
function vusn(){
var rp=/^[1-4]{1}[A-Z]{2}\d{2}[A-Z]{3}\d{2}$/;
var regno=document.getElementById("usn").value;
var res=rp.test(regno);
if(res){
alert("valid usn=>" +regno);
}
else{
alert("invalid usn=>"+regno);
document.getElementById("usn").focus();
}
}
</script>
</head>
<body>
<div><h3>student <br />information</h3>
<form>
<p>
<label>usn :<input type="text" id="usn" size="10" />
</label>
<input type="button" value="VERIFY" onclick="vusn();" />
</p>
</form>
</div>
</body>
</html>
7b.html
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml11.dtd">
<head><title>form validation</title>
<script>
function vusn(){
var rp=/^[1-4]{1}[A-Z]{2}\d{2}[A-Z]{3}\d{2}$/;
var regno=document.getElementById("usn").value;
var res=rp.test(regno);
if(res){
alert("valid usn=>" +regno);
}
else{
alert("invalid usn=>"+regno);
document.getElementById("usn").focus();
}}
function vsem(){
var rp=/^[1-6]$/;
var sem=document.getElementById("sem").value;
var res=rp.test(sem);
if(res){
alert("valid sem=>" +sem);
}
else{
alert("invalid sem=>"+sem);
document.getElementById("sem").focus();
}}
</script>
</head>
<body>
<div><h3>student <br />information</h3>
<form>
<p>
<label>usn :<input type="text" id="usn" size="10" />
</label>
<input type="button" value="VERIFY" onclick="vusn();" />
</p>
<p>
<label>sem :<input type="text" id="sem" size="1" />
</label>
<input type="button" value="VERIFY SEM" onclick="vsem();" />
</p>
</form>
</div>
</body>
</html>
8. Develop and demonstrate a HTML file which includes JavaScript that uses
functions for the following problems:
a. Parameter: A string
Output: The position in the string of the left-most vowel.
b. Parameter: A number
Output: The number with its digits in the reverse order.
8a.html
<html>
<head>
<title> program 8a</title>
</head>

</script>
<body onload="vovel()">
</body>
</html>
8b.html
<html>
<head>
<title> program 8b</title>
</head>

</script>
<body onload="rev()">
</body>
</html>
9. Develop and demonstrate a HTML5 page which contains
a) Dynamic Progressive bar.
b) Display Video file using HTML5 video tag.
<!DOCTYPE html>
<html>
<style>
#progress_status{
width:50%;
background-color:red;
}
#myprogressBar{
width:2%;
height:20px;
background-color:green;
}
</style>
<body>
<h3>example of progress bar using javascript</h3>
<p> download status of file</p>
<div id="progress_status">
<div id="myprogressBar"></div>
</div>
<br>
<button onclick="update()">start download</button>
<script>
function update(){
var element=document.getElementById("myprogressBar");
var width=1;
var identity=setInterval(scene,10);
function scene(){
if(width>=100){
clearInterval(identity);
}
else{
width++;
element.style.width=width+'%';
}
}
}
</script>
</body>
</html>
9b.html
<video width="320" height="240" autoplay>
<source src="2.mp4" type="video/mp4">
<source src="moive.ogg" type="video/ogg">
your browser dosent support the video tag.
</video>
<video width="320" height="240" controls>
<source src="1.mp4" type="video/mp4">
<source src="moive.ogg" type="video/ogg">
your browser dosent support the video tag.
</video>
10. Develop and demonstrate, using JavaScript script, a XHTML document that
contains three short paragraphs of text, stacked on top of each other, with only
enough of each showing so that the mouse cursor can be placed over some part
of them. When the cursor is placed over the exposed part of any paragraph, it
should rise to the top to become completely visible. Modify the above document
so that when a text is moved from the top stacking position, it returns to its
original position rather than to the bottom.
10a.html
<? xml version ="1.0" encoading = "utf-8" ?>
<head>
<title>z-index</title>
<style>
.common{ /* commmon to all */
width:600px;
position:absolute;
padding:1px 1px 100px;
color:white;
font-size:35px;
z-index:0;
}
#para1{/* style applicable to para one */
left:10px;
top:50px;
border:5px solid black;
background-color: red;
}
#para2{/* style applicable to para2*/
left:50px;
top:100px;
border:5px solid yellow;
}
#para3{/* stlye applicable to para3*/
left:100px;
top:150px;
border:5px solid aqua;
}
</style>
var index=3;
function toTop(para)
{
document.getElementById(para).style.zIndex=index++;
}
</script>
</head>
<body>
<h1>paragraph stacking </h1>
<p id = "para1" class="common" onmouseover="toTop(id);">
PARA 1
</p>
PARA 2
</p>
PARA 3
</p>
</body>
</html>
10b.html
<? xml version ="1.0" encoading = "utf-8" ?>
<head>
<title>z-index</title>
<style>
.common{ /* commmon to all */
width:600px;
position:absolute;
padding:1px 1px 100px;
color:white;
font-size:35px;
z-index:0;
}
#para1{/* style applicable to para one */
left:10px;
top:50px;
border:5px solid black;
background-color: red;
}
#para2{/* style applicable to para2*/
left:50px;
top:100px;
border:5px solid yellow;
}
#para3{/* stlye applicable to para3*/
left:100px;
top:150px;
border:5px solid aqua;
}
</style>
var oldindex;
function min(x){
oldindex = document.getElementById(x).style.zIndex;
document.getElementById(x).style.zIndex="10";
}
function mop(layer){
document.getElementById(layer).style.zIndex=oldindex;
}
</script>
</head>
<body>
<h1>paragraph stacking </h1>
<p id="para1" class="common" onmouseover = "min(id);"
onmouseout = "mop(id);">
PARA 1
</p>
PARA 2
</p>
PARA 3
</p>
</body>
</html>
11. Develop a simple calculator to perform arithmetic (addition, subtraction,
multiplication and division) operations on given two numbers. Use an HTML tag
that allows the user to input two numbers and to display the result of arithmetic
operation. Write suitable HTML and JavaScript and CSS to your simple calculator.
The following figure show sample document display.
<html>
<head>
<title>input tutorial</title>
function addNumbers()
{
val1=parseInt(document.getElementById("value1").value);
ansD=document.getElementById("answer");
ansD.value=val1+val2;
}
function subNumbers()
{
ansD.value=val1-val2;
}
function mulNumbers()
{
ansD.value=val1*val2;
}
function divNumbers()
{
ansD.value=val1/val2;
}
function sz()
{
document.getElementById("value1").value="";
document.getElementById("value2").value="";
document.getElementById("answer").value="";
}
</script>
</head>
<body>
<center>
<div style="marig:auto;width:300px;padding:20px;background-
color:lightblue;border:5px solid aqua;border-radius:20px;">
<h2>simple calculator</h2>
Number 1=<input type="text" id="value1" name="value1"
value=""/><br><br>
Number 2=<input type="text" id="value2" name="value2"
value=""/><br><br>
result =<input type="text" id="answer" name="answer"
value=""/><br><br>
<input type="button" name="ADD" value="ADD"
onclick="addNumbers()"/>
<input type="button" name="SUB" value="SUB"
onclick="subNumbers()"/>
<input type="button" name="MUL" value="MUL"
onclick="mulNumbers()"/>
<input type="button" name="DIV" value="DIV"
onclick="divNumbers()"/>
<input type="button" name="CLEAR" value="CLEAR"
onclick="sz()"/>
</div>
</center>
</body>
</html>
12. Design an XML document to store information about a student in an
engineering college affiliated to VTU. The information must include USN,
Name, and Name of the College, Branch, Year of Joining, and e-mail id.
Make up sample data for 3 students. Create a CSS style sheet and use it
to display the document.
Stuinf.xml
<?xml-stylesheet type="text/css" href="stunif.css"?>
<studb>
<stuinf>
<usn>4bd18mca01</usn>
<name>name 1</name>
<collage>biet davangere</collage>
<branch>mca</branch>
<year>2016</year>
<emailid>name1@gmail.com</emailid>
<stuinf>
<stuinf>
<name>name 1</name>
<year>2016</year>
<stuinf>
<stuinf>
<name>name 1</name>
<year>2016</year>
<stuinf>
</studb>
k.css
studb {
background-color:#ffffff;
width:100%;
}
stuinf {
display:block;
margin-bottom:30pt;
margin-left:0;
}
usn {
display:block;
color:#ff0000;
font-size:20pt;
}
name{
display:block;
color:#0000ff;
font-size:20pt;
}
collage, branch, year,emailid {
display:block;
color:#000000;
font-size:20pt;}
13. Develop and demonstrate using jQuery to solve the following: a) Limit
character input in the text area including count.
b) Based on check box, disable/enable the form submit button.
13a.html
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charterset="utf-8">
<title>limit charcter input in the textarea including count</title>
<style type="text/css">
textarea{
display:block;
margin:lem 0;
}
</style>
</head>
<body>
<form>
<lable>
maximum 15 chatacters</lable>
<textarea id="textarea" maxlength="15" ></textarea>
<span id="rchar">
15</span>15 character(s) remaining</form>
</body> </html>
13b.html
<!DOCTYPE html>
<html>
<head>
<title>diasble/enable the form submit button</title>
</head>
<body>
<input id="accept" name="accept" type="checkbox" value="y"/>i
accept </br>
<input id="submitbtn" disabled="disabled" name="submit"
type="submit" value="submit"/>
</body>
</html>
14. Develop and demonstrate using jQuery to solve the following: a) Fade in and
fade out all division elements.
b) Animate an element, by changing its height and width.
<!DOCTYPE html>
<html>
<head>
<title>fade in & fade out all division element/</title>
</head>
<body>
<div style="background:pink;width:100%;"/>
MYEFFECT IS FADE OUT EFFECT</div>
<button id="btn2">fade in(3)(sec)</button>
<button id="btn1">fade out(3)(sec)</button>
</body>
</html>
14b.html
<!DOCTYPE html>
<html>
<head>
<title>animate an element,by changing its height and
width</title>
</head>
<body>
<button id="btn2">animate height and weidth</button>

<button id="btn1">reset</button>
<div id="box"
style="background:pink;width:100px;height=100px;margin:6px;"/
>
</div></body>
</html>

WEB Technologies LAB: Abhishek MP

Uploaded by

Copyright:

Available Formats

WEB Technologies LAB: Abhishek MP

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

WEB Technologies LAB: Abhishek MP

Uploaded by

Copyright:

Available Formats

WEB

<? xml version="1.0" encoding="utf-8"?>

a) Input: A number n obtained using prompt

Output : The first n Fibonacci numbers

b) Input: A number n obtained using prompt

Output : A table of numbers from 1 to n and their squares using alert

<h3> payment method:</h3>

b) Modify the above program to get the current semester also(restricted to be

Output: The position in the string of the left-most vowel.

Output: The number with its digits in the reverse order.

a) Dynamic Progressive bar.

b) Display Video file using HTML5 video tag.

b) Based on check box, disable/enable the form submit button.

b) Animate an element, by changing its height and width.

<button id="btn2">animate height and weidth</button>

You might also like