Ammu Web

Web Technology and Applications(18CS63)
1: Write a JavaScript to design a simple calculator to perform the following

operations: sum, product, difference and quotient.
PROGRAM:
<html>
<title>CALCULATOR</title>
<style> input{ width:100%; padding:40px; } input:hover{background: silver;}
</style>
<body>
<div align="center">
<h2>SIMPLE CALCULATOR</h2>
<h5>1JB21CS408</h5>
<script type="text/javascript">
a = ['1','2','3','+','4','5','6','-','7','8','9','*','C','0','=','/']
z = '<td> <input type="button" value="' document.write('<form
name="cal"><table><tr><td colspan="8"> <input type="text" name="get"></td></tr><tr>');
for (var i=0;i<16;i++)
if(i==12) { document.write('<td> <input type="reset" value="C"
></td>'); continue ;
if(i==14) { document.write('<td> <input type="button" value="="
onclick="cal.get.value
Dept of CSE, SJBIT 2022-23 1

=eval(cal.get.value)"></td>'); continue ; } if(i==3||i==7||i==11)
{ document.write(z+a[i]+'" onclick="cal.get.value
+=\''+a[i]+'\'"></td></tr><tr rowspan="2">');
continue ; } else document.write(z+a[i]+'"
onclick="cal.get.value +=\''+a[i]+'\'"></td>'); }
doument.write('</table></form></div>');
</script> </body>
</html>
OUTPUT:

2: Write a JavaScript that calculates the squares and cubes of the numbers from
0 to 10 and outputs HTML text that displays the resulting values in an HTML
table format.
PROGRAM:
<!DOCTYPE HTML>
<html>
<head><h4 align="center";>1JB21CS408</h4><style>
table,tr,td { border: solid black;
width: 33%; textalign: center;
bordercollapse: collapse;
backgroundcolor:lightblue;
} table { margin:auto;}
</style>
<script> document.write("<table><tr><th colspan='3'> NUMBERS FROM 0 TO 10
WITH THEIR QUARES AND CUBES </th></tr>");
document.write("<tr><td>Number</td><td>Square</td><td>Cube</td></tr>"); for(var
n=0;n<=10;n++)
{ document.write("<tr><td>" + n + "</td><td>" + n*n + "</td><td>"+ n*n*n +
"</td></tr>");
} document.write("</table>");
</script>
</head>
</html>

OUTPUT :

3: Develop and demonstrate a HTML5 file that includes JavaScript script that
uses functions for the following problems:
a. Parameter: A string
b. Output: The position in the string of the left-most vowel
c. Parameter: A number
d. Output: The number with its digits in the reverse order.
PROGRAM :
<!DOCTYPE HTML>
<html>
<body>
<script type="text/javascript"> var str =
prompt("Enter the Input","");
if(!(isNaN(str)))
{ var num,rev=0,remainder;
num
= parseInt(str);
while(num!=0) {
remainder = num%10; num =
parseInt(num/10); rev =

rev * 10 + remainder; }
alert("Reverse of "+str+" is
"+rev);
}else { str = str.toUpperCase(); for(var i = 0; i < str.length; i++) { var
chr = str.charAt(i); if(chr == 'A' || chr == 'E' || chr == 'I' || chr
== 'O' || chr == 'U')break;
} if( i < str.length ) alert("The position of the left
most vowel is "+(i+1)); else alert("No vowel found in
the entered string");
</script>
</body>
</html>
OUTPUT :


4: Write a JavaScript code that displays text “TEXT-GROWING” with increasing

font size in the interval of 100ms in RED COLOR, when the font size reaches
50pt it displays “TEXTSHRINKING” in BLUE color. Then the font size
decreases to 5pt.
PROGRAM :
<!DOCTYPE HTML>
<html>
<head><h4 align="center"> 1JB21CS408</h4> <style>
p { position: absolute; top:
50%; left: 50%; transform: translate(-50%,
-50%); }
</style>
</head>
<body>
<p id="demo"></p>
<script> var var1 = setInterval(inTimer,
1000); var fs = 5; var ids =
document.getElementById("demo"); function inTimer()
{ ids.innerHTML = 'TEXT GROWING';
ids.setAttribute('style', "font-size: " + fs + "px; color: red");
fs += 5; if(fs >= 50 ){ clearInterval(var1); var2 =
setInterval(deTimer, 1000);}} function deTimer() { fs -= 5;
ids.innerHTML =

'TEXT SHRINKING';
ids.setAttribute('style', "font-size: " + fs + "px;color: blue"); if(fs
=== 5 ){ clearInterval(var2); }}
</script>
</body>
</html>
OUTPUT :

5: 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 email id. Make up
sample data for 3 students. Create a CSS style sheet and use it to display the
document.
PROGRAM :
<?xml-stylesheet type="text/css" href="1.css" ?>
<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN>USN : 1JB15CS001</USN>
<name>NAME : SANVI</name>
<college>COLLEGE : SJBIT</college>
<branch>BRANCH : Computer Science and Engineering</branch>
<year>YEAR : 2015</year>
<e-mail>E-Mail : sanvi@gmail.com</e-mail>
</student>
<student>

<USN>USN : 1JB15IS002</USN>
<name>NAME : MANORANJAN</name>
<branch>BRANCH : Information Science and Engineering</branch>
<e-mail>E-Mail : manoranjan@gmail.com</e-mail>
</student>
<student>
<USN>USN : 1JB13EC003</USN>
<name>NAME : CHANDANA</name>
<branch>BRANCH : Electronics and Communication Engineering
</branch>
<e-mail>E-Mail : chandana@gmail.com</e-mail>
</student>
</students>
</html> 1.css student{ display:block; margintop:10px; color:Navy; }
USN{ display:block; margin-left:10px;font-size:14pt; color:Red; }
name{ display:block; margin-left:20px;font-size:14pt; color:Blue; }
college{ display:block; margin-left:20px;font-size:12pt;

color:Maroon; } branch{ display:block; margin-
left:20px;fontsize:12pt; color:Purple;
} year{ display:block; marginleft:20px;font-size:14pt; color:Green;
} e-mail{ display:block; margin-left:20px;font-size:12pt; color:Blue;
OUTPUT :

6: Write a PHP program to keep track of the number of visitors visiting the web
page and to display this count of visitors, with proper headings.
PROGRAM :
<?php print "<h3> REFRESH PAGE
</h3>";
$name="counter.txt"; $file =
fopen($name,"r"); $hits=
fscanf($file,"%d"); fclose($file);
$hits[0]++;
$file = fopen($name,"w");
fprintf($file,"%d",$hits[0]); fclose($file);
print "Total number of views: ".$hits[0];
?>
OUTPUT :

7. Write a PHP program to display a digital clock which displays the current time
of the server.
PROGRAM :
<html>
<head>
<meta http-equiv="refresh" content="1"> <title>
digital clock</title> <style type="text/css">
h1{text-align= center;}
</style>
</head> <?php echo"<h1> Experiment to display current time of
server</h1>"; echo"<hr>"; echo"<h1>".date('h:i:s:A')."<h1>";
echo"<hr>"; ?>
</body>
</html>
OUTPUT :

8: Write the PHP programs to do the following: a)

Implement simple calculator operations.
b) Find the transpose of a matrix.
c) Multiplication of two matrices.
d) Addition of two matrices.
PROGRAM :
<html>
<head>
<style> table, td,
th {
border: 1px solid black; width:

35%; text-align: center;
background-color:
DarkGray;
table { margin: auto; } input,p
{ text-align:right; }
</style>
</head> body>
<form method="post">
<table>
<caption><h2> SIMPLE CALCULATOR </h2></caption>>
<tr><td>First Number:</td>
<td><input type="text" name="num1" /></td>

<td rowspan="2"><input type="submit" name="submit" value="calculate"></td></tr>

<tr><td>Second Number:</td>
<td><input type="text" name="num2"/></td></tr>
</form> <?php if(isset($_POST['submit']))
$num1 = $_POST['num1']; $num2 =
$_POST['num2']; if(isnumeric($num1) and isnumeric($num2)
{ echo "<tr><td> Addition :</td><td><p>".($num1+$num2)."</p></td>"; echo
"<tr><td> Subtraction :</td><td><p> ".($num1-$num2)."</p></td>"; echo "<tr><td>
Multiplication :</td><td><p>".($num1*$num2)."</p></td>"; echo
"<tr><td>Division :</td><td><p> ".($num1/$num2)."</p></td>"; echo
"</table>"; } else { echo"<script type='text/javascript' > alert(' ENTER VALID
NUMBER');</script>";
}}
?>
</body>
</html>
OUTPUT :

Program8b.php
$a = array(array(1,2,3),array(4,5,6),array(7,8,9));
$b = array(array(7,8,9),array(4,5,6),array(1,2,3));
$m=count($a);
$n=count($a[2]);
$p=count($b);
$q=count($b[2]); echo "the first matrix
:"."<br/>"; for ($row = 0;
$row < $m; $row++) { for ($col = 0; $col
< $n; $col++) echo "
".$a[$row][$col]; echo "<br/>";
} echo "the second matrix
:"."<br/>"; for ($row = 0; $row < $p;
$row++) { for ($col = 0; $col < $q;

$col++)
echo " ".$b[$row][$col]; echo "<br/>"; } echo "the transpose for
the first matrix is:"."<br/>"; for ($row
= 0; $row < $m; $row++) { for ($col = 0; $col < $n;
$col++) echo " ".$a[$col][$row]; echo "<br/>"; }
if(($m===$p) and ($n===$q)) { echo "the addition
of matrices is:"."<br/>"; for ($row = 0; $row < 3;
$row++) { for ($col =
0; $col < 3; $col++) echo "
".$a[$row][$col]+$b[$row][$col]." "; echo "<br/>"; }}
if($n===$p){ echo " The multiplication of matrices:
<br/>";
$result=array(); for ($i=0;
$i < $m; $i++) { for($j=0;
$j < $q; $j++){
$result[$i][$j] = 0; for($k=0;
$k < $n; $k++)
$result[$i][$j] +=
$a[$i][$k] * $b[$k][$j];
}} for ($row = 0; $row < $m;
$row++) { for ($col = 0; $col < $q;

$col++) echo " ".$result[$row][$col]; echo
"<br/>";
}}
?>
OUTPUT :

9. Write a PHP program named states .py that declares a variable states with
value "Mississippi Alabama Texas Massachusetts Kansas". write a PHP program
that does the following:
a) Search for a word in variable states that ends in xas. Store this word in
element 0 of a list named statesList.
b) Search for a word in states that begins with k and ends in s. Perform a
caseinsensitive comparison. [Note: Passing re.Ias a second parameter to
method compile performs a case-insensitive comparison.] Store this word
in element1 of
statesList.
c) Search for a word in states that begins with M and ends in s. Store this
word in element 2 of the list.
d) Search for a word in states that ends in a. Store this word in element 3 of
the list.
PROGRAM :
<?php
$states = "Mississippi Alabama Texas Massachusetts Kansas";
$statesArray = [];
$states1 = explode(' ',$states); echo "Original Array :<br>"; foreach (
$states1 as $i => $value ) print("STATES[$i]=$value<br>");
foreach($states1 as $state) { if(preg_match( '/xas$/', ($state)))
$statesArray[0] = ($state); } foreach($states1 as $state) {
if(preg_match('/^k.*s$/i', ($state)))

$statesArray[1] = ($state); }
foreach($states1 as $state) {
if(preg_match('/^M.*s$/', ($state)))
$statesArray[2] = ($state); } foreach($states1
as $state){ if(preg_match('/a$/', ($state)))
$statesArray[3] = ($state); } echo
"<br><br>Resultant Array :<br>"; foreach ( $statesArray
as $array => $value )
print("STATES[$array]=$value<br>");
?>
OUTPUT :

TABLE OF CONTENTS
SL.No PROGRAM NAME PAGE NO.
Web Technology and Applications Programs
1. Java Script:Simple calculator 1-2
2. Java Script:Calculate squares and cubes of the numbers from 0 to 10 3-4
3. JavaScript:TEXT-GROWING and TEXT-SHRINKING 5-7
4. HTML5 and JavaScript 8-9
5. XML document to store information about a student 10-13
6. PHP:display the number of visitors visiting the web page 13
7. PHP:display digit clock with current time of the server 14
8. PHP:a)Implement simple calculator operators.
b)Find the Transpose of a matrix,multiplication of two matrices and 24 addition of

two matrices 15-19
9. PHP:program with variable states with value 26”Mississippi Alabama Texas

Massachusetts Kansas” 20-21
10. PHP:program to sort the student records using selection sort 22-23
11. Rock,Paper,Scissors 24-29

MINI PROJECT
Rock, Paper, Scissors
INTRODUCTION:
In this project, you will be implemeting a rock-paper-scissors game! Rock-paper-scissors is a
hand game played between two people, in which each player simultaneously forms one of three
shapes with an outstretched hand. These shapes are "rock" (a simple fist), "paper" (a flat hand),
and "scissors" (a fist with the index and middle fingers extended, forming a V).
A player who plays rock will beat another player who has chosen scissors, but will lose to one
who has played paper; a play of paper will lose to a play of scissors. If both players choose
the same shape, the game is tied. See the image below for a visual representation of the rules
of rock-paper-scissors:
DESIGN
• In many games, it is common for a group of possible choices to interact in a rock paper
scissors style, where each selection is strong against a particular choice, but weak
against another. Such mechanics can make a game somewhat self-balancing, prevent
gameplay from being overwhelmed by a single and single dominant type of unit.
• Many card-based video games in Japan use the rock paper scissors system as their core
fighting system, with the winner of each round being able to carry out their designated
attack. In the player has to win games of rock paper scissors against each boss to
proceed. Others use simple variants of rock paper scissors as subgames.

• Many role-playing games prominently feature a rock paper scissors gameplay element.
In there is a rock paper scissors element in the type effectiveness system. For example,
a Grass-typed Pokémon is weak to Fire, Fire is weak to Water, and Water is weak to
• system based on the game's three attack types: Melee, Ranged, and Flying. In the series
of strategy role-playing games, the Weapon Triangle and Trinity of Magic influence the
hit and damage rates of weapon types based on whether they are at an advantage or a
disadvantage in their respective rock paper scissors system. In the series, the three basic
actions used during battles are described in their respective rock paper scissors system:
attack, defense, and grab.
IMPLIMENTATION
HARDWARE REQUIREMENTS
• There is no specific hardware requirement for this project, but it will be

better if this is executed in computers which has Intel i3 5th gen and higher.
• Ram 8GB is used as it will provide fast reading and writing capabilities
and will in turn support in processing.
SOFTWARE REQUIREMENTS
• Operating system- Windows 11 is used as the operating system as it is stable
and supports more features and is more user friendly.
• Browsers which support JavaScript, CSS (Suggested: Google Chrome,

Firefox).
CODE
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
*{

margin: 0;
padding: 0;
}
body {
background: #122a33;
color: #fff;
font-family: "Roboto", sans-serif;
}
code {
font-family: 'Source Code Pro', monospace;
font-size: 12px;
}
a{
font-family: 'Source Code Pro', monospace;
color: #ffcc99;
}
a:hover {
color: #ffba76;
}
header {
background: #ffac16;
padding: 20px;
}
header h1 {
color: #444; text-
align: center;
font-weight: 100;
}
.score-board { border:
3px solid #fff; width:
300px; margin: 40px
auto; font-size: 40px;
border-radius: 4px;
text-align: center;
padding: 15px 20px;
position: relative;

.badge {
background: #e2584d; text-
transform: uppercase; font-size:
14px;
padding: 10px 6px;
}
#user-label {
position: absolute;
top: 50%;
left: -5%;
transform: translate(-10%, -50%);
}
#computer-label {
position: absolute;
top: 50%;
right: -5%;
transform: translate(10%, -50%);
}
.result {
font-weight: 300;
text-align: center;
font-size: 32px;
line-height: 40px;
}
.result {
line-height: 50px;
}
.choices {
margin: 0 auto;
text-align: center;
padding: 40px 0;
}
.choice {
display: inline-block;
border: 3px solid #fff;
border-radius: 50%;

padding: 10px;
margin: auto 10px;
transition: all 0.3s ease;
}
.choice img { filter:

invert(100%);
}
#action-message { text-align:
center; font-weight: 500;
text-transform: uppercase;
letter-spacing: 2px;
margin: 40px 0;
}
.winningStyles { border: 3px

solid #4dcc7d; background-
color: #043507;
box-shadow: 0 0 20px #043507;
}
.losingStyles {
border: 3px solid #c52e2e; background-
color: #2e0303;
box-shadow: 0 0 20px #2e0303;
}
.drawStyles { border: 3px solid

#444; background-color: #222;
box-shadow: 0 0 20px #222;
}
sup {
margin: 0;
padding: 0;
}
RESULTS/SNAPSHOTS:

Fig 1.1 The sensor glove was designed to be worn on the right hand of a player and track the
acceleration of the hand as well as the movement of the index and ring fingers.
Fig 1.2 The sensor glove was designed to be worn on the right hand of a player and track
the acceleration of the hand as well as the movement of the index and ring fingers.

Fig 1.3 a certain type of mapping between the possible moves and numbers, in
order to determine the winner and the loser.
Fig 1.4 Rock,Paper and scissors is a game played by using hands which can also be
used as a toss when a decision on somethimg between two people
REFERENCES
1. "Game Basics". Archived from the original on 2019-03-22. Retrieved 200912-
05.

2. St. John, Kelly (2003-03-19). "Ready, set ... Roshambo! Contestants vie for
$1,000 purse in Rock, Scissors, Paper contest". San Francisco Chronicle.
Retrieved 2007-11-20.
3. Wells, Steven (2006-11-24). "It's not your dad's ick-ack-ock". The Guardian.
Retrieved 2013-08-13.
4. Fisher, Len (2008). Rock, Paper, Scissors: Game Theory in Everyday Life.
Basic Books. p.
5. Fisher, Len (2008). Rock, paper, scissors: game theory in everyday life. Basic
Books. p.

Ammu Web

Uploaded by

Copyright:

Available Formats

Ammu Web

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

Ammu Web

Uploaded by

Copyright:

Available Formats

Web Technology and Applications(18CS63)

1: Write a JavaScript to design a simple calculator to perform the following

<style> input{ width:100%; padding:40px; } input:hover{background: silver;}

z = '<td> <input type="button" value="' document.write('<form

name="cal"><table><tr><td colspan="8"> <input type="text" name="get"></td></tr><tr>');

for (var i=0;i<16;i++)

if(i==12) { document.write('<td> <input type="reset" value="C"

if(i==14) { document.write('<td> <input type="button" value="="

Dept of CSE, SJBIT 2022-23 1

=eval(cal.get.value)"></td>'); continue ; } if(i==3||i==7||i==11)

continue ; } else document.write(z+a[i]+'"

Dept of CSE, SJBIT 2022-23 2

table,tr,td { border: solid black;

width: 33%; textalign: center;

<script> document.write("<table><tr><th colspan='3'> NUMBERS FROM 0 TO 10

WITH THEIR QUARES AND CUBES </th></tr>");

{ document.write("<tr><td>" + n + "</td><td>" + n*n + "</td><td>"+ n*n*n +

Dept of CSE, SJBIT 2022-23 3

Dept of CSE, SJBIT 2022-23 4

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

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

<script type="text/javascript"> var str =

prompt("Enter the Input","");

remainder = num%10; num =

Dept of CSE, SJBIT 2022-23 5

}else { str = str.toUpperCase(); for(var i = 0; i < str.length; i++) { var

chr = str.charAt(i); if(chr == 'A' || chr == 'E' || chr == 'I' || chr

== 'O' || chr == 'U')break;

} if( i < str.length ) alert("The position of the left

most vowel is "+(i+1)); else alert("No vowel found in

the entered string");

Dept of CSE, SJBIT 2022-23 6

Dept of CSE, SJBIT 2022-23 7

4: Write a JavaScript code that displays text “TEXT-GROWING” with increasing

<head><h4 align="center"> 1JB21CS408</h4> <style>

p { position: absolute; top:

50%; left: 50%; transform: translate(-50%,

<script> var var1 = setInterval(inTimer,

1000); var fs = 5; var ids =

document.getElementById("demo"); function inTimer()

{ ids.innerHTML = 'TEXT GROWING';

ids.setAttribute('style', "font-size: " + fs + "px; color: red");

fs += 5; if(fs >= 50 ){ clearInterval(var1); var2 =

setInterval(deTimer, 1000);}} function deTimer() { fs -= 5;

Dept of CSE, SJBIT 2022-23 8

ids.setAttribute('style', "font-size: " + fs + "px;color: blue"); if(fs

Dept of CSE, SJBIT 2022-23 9

5: Design an XML document to store information about a student in an

<?xml-stylesheet type="text/css" href="1.css" ?>

<h1> STUDENTS DESCRIPTION </h1>

<branch>BRANCH : Computer Science and Engineering</branch>

Dept of CSE, SJBIT 2022-23 10

<branch>BRANCH : Information Science and Engineering</branch>

<branch>BRANCH : Electronics and Communication Engineering

</html> 1.css student{ display:block; margintop:10px; color:Navy; }

USN{ display:block; margin-left:10px;font-size:14pt; color:Red; }

name{ display:block; margin-left:20px;font-size:14pt; color:Blue; }

college{ display:block; margin-left:20px;font-size:12pt;

Dept of CSE, SJBIT 2022-23 11

{ document.write("<tr><td>" + n + "</td><td>" + nn + "</td><td>"+ nn*n +