Saturday, August 3, 2019

WT - INDEX OF EXPERIMENTS

WT 1 - SIMPLE CALCULATOR USING JAVASCRIPT

1. WRITE A JAVASCRIPT TO DESIGN A SIMPLE CALCULATOR TO PERFORM THE FOLLOWING OPERATIONS: SUM, PRODUCT, DIFFERENCE, AND QUOTIENT.

 SOLUTION  1 
prog1.html
<html>
    <title>CALCULATOR</title>
    <style>
        input{ width:100%; padding:40px; } input:hover{background: silver;}
    </style>

    <body>
        <div align="center">
        <h2>SIMPLE CALCULATOR</h2>
        <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 =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 :( click on image to zoom )




 SOLUTION  2                                                     

prog1.html - PROGRAM

<!DOCTYPE HTML>
<html>
<head>

<style>
table, td, th
{
border: 1px solid black;
width: 33%;
text-align: center;
background-color: DarkGray;
border-collapse: collapse;
}
table {margin: auto; }
input {text-align:right; }
</style>

<script type="text/javascript">
function calc(clicked_id)
{
var val1 = parseFloat(document.getElementById("value1").value);
var val2 = parseFloat(document.getElementById("value2").value);
if (isNaN(val1)||isNaN(val2))
alert("ENTER VALID NUMBER");
else if(clicked_id=="add")
document.getElementById("answer").value=val1+val2;
else if(clicked_id=="sub")
document.getElementById("answer").value=val1-val2;
else if(clicked_id=="mul")
document.getElementById("answer").value=val1*val2;
else if(clicked_id=="div")
document.getElementById("answer").value=val1/val2;
}
function cls()
{
value1.value="0";
value2.value="0";
answer.value="";
}
</script>
</head>
<body>


<table>
<tr>
<th colspan="4"> SIMPLE CALCULATOR </th>
</tr>

<tr>
<td>value1</td><td><input type="text" id="value1" value="0"/></td>
<td>value2</td><td><input type="text" id= "value2" value="0"/></td>
</tr> 

<tr>
<td><input type="button" value="Addition" id = "add" onclick="calc(this.id)"/></td>
<td><input type="button" value="Subtraction" id = "sub" onclick="calc(this.id)"/></td>
<td><input type="button" value="Multiplication" id = "mul" onclick="calc(this.id)"/></td>
<td><input type="button" value="Division" id ="div" onclick="calc(this.id)"/></td>
</tr>

<tr>
<td>Answer:</td><td> <input type= "text" id="answer" value="" disabled/></td>
<td colspan="2"><input type= "button" value="CLEAR ALL" onclick="cls()"/><td>
</tr>
</table
</body>
</html>


OUTPUT :( click on image to zoom )


WT 2 - SQUARES AND CUBES OF NUMBERS

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.

 SOLUTION  1 

prog2.html

<html>
<head><title> Squares and Cubes </title></head>
<script>
    document.write('<p><b>SQUARES AND CUBES FROM 0 TO 10</b></p>');
    document.write('<table border="2" cellspacing="2">');
    document.write('<th> Number </th> <th> Square </th> <th> Cube </th>');
    for(var i=1;i<=10;i++)
        document.write("<tr><td>"+ i +"</td><td>"+ i*i + "</td><td>"+ i*i*i +"</td></tr>");
    document.write("</table>");
</script>
</html>

OUTPUT :( click on image to zoom )


 SOLUTION  2   

prog2.html

<!DOCTYPE HTML>
<html>
<head> <style>
table,tr,
td
{
border: solid black;
width: 33%;
text-align: center;
border-collapse: collapse;
background-color:lightblue;
}
table { margin: auto;
} </style>
<script>
document.write( "<table><tr><thcolspan='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 :( click on image to zoom )



WT 3 - TEXT-GROWING & TEXT-SHRINKING

3. 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 “TEXT-SHRINKING” IN BLUE COLOR. THEN THE FONT SIZE DECREASES TO 5PT.

 SOLUTION  1 

prog3.html

<!DOCTYPE html>
<html>
<body>
<div id="h"></div>
<script>
var v = 0, f = 1,t="TEXT-GROWING",color;
function a()
{
if(f==1)
v+=5,color="red";
else
v-=5,color="blue";
document.getElementById("h").innerHTML = "<h1 style=\"font-size: "+v+"px ; margin: 0px; color : "+color+"\"><b> "+t+"</b></h1>";
if(v==50)
f = 0, t="TEXT-SHRINKING";
if(v==5)
f = 1, t="TEXT-GROWING";
c();
}
function c()
{
setTimeout(a,300);
}
c();
</script>
</body>
</html>

OUTPUT :( click on image to zoom )



 SOLUTION  2 

prog3.html

<!DOCTYPE HTML>
<html>
<head>
<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 :( click on image to zoom )



WT 4 - LEFT MOST VOWEL & REVERSE NUMBER

4. 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

 SOLUTION  1 

prog4.html

<script>
var a = prompt("Enter The Query"),b = parseInt(a),z=0;
if(b) {
while(b>0)
var r= b%10, z= z*10+r, b = Math.floor(b/10);
document.write("Entered Query : "+ a +"<br> Given Number In Reverse Order : "+ z);
}
else {
a = a.search(/[aeiouAEIOU]/);
document.write("The First Occurence Of Vowel is at : "+ (a+1));
}
</script>

OUTPUT - 4A :( click on image to zoom )


OUTPUT - 4B :( click on image to zoom )


 SOLUTION  2 

prog4.html

<!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 - 4A:( click on image to zoom )



OUTPUT - 4B :( click on image to zoom )



WT 5 - XML - STORE INFORMATION ABOUT A STUDENT

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.

 SOLUTION  1 

prog5.xml

<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/css" href="PROG5.css"?>

<STUDENTDATA>

<STUDENT>
<USN>USN   : 3GN16CS002</USN>
<NAME>NAME : ABHISHEK MALI</NAME>
<COLLEGE>COLLEGE : GNDECB</COLLEGE>
<BRANCH>BRANCH :CSE</BRANCH>
<YEAR>YEAR : 2019</YEAR>
<EMAIL>E-MAIL : abhishek@gmail.com</EMAIL>
</STUDENT>

<STUDENT>
<USN>USN : 3GN16CS029</USN>
<NAME>NAME : KESHAV POLA</NAME>
<COLLEGE>COLLEGE : GNDECB</COLLEGE>
<BRANCH>BRANCH :CSE</BRANCH>
<YEAR>YEAR : 2019</YEAR>
<EMAIL>E-MAIL : keshav@gmail.com</EMAIL>
</STUDENT>

<STUDENT>
<USN>USN   : 3GN16CS027</USN>
<NAME>NAME : KARAN DANGE</NAME>
<COLLEGE>COLLEGE : GNDECB</COLLEGE>
<BRANCH>BRANCH :CSE</BRANCH>
<YEAR>YEAR : 2019</YEAR>
<EMAIL>E-MAIL : karan@gmail.com</EMAIL>
</STUDENT>

</STUDENTDATA>

prog5.css

*{
    display: block; font-size: 20px;
}
USN {
    color: blue;
    font-size: 30px;
    margin-top: 20px;
}

OUTPUT :( click on image to zoom )


 SOLUTION  2 

prog5.xml

<?xml-stylesheet type="text/css" href="5.css" ?>
<!DOCTYPE HTML>
<html>
<head>
<h1> STUDENTS DESCRIPTION </h1>
</head>
<students>
<student>
<USN>USN : 3GN07CS001</USN>
<name>NAME : SANTHOSH</name>
<college>COLLEGE : GNDEC</college>
<branch>BRANCH : Computer Science and Engineering</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : santosh@gmail.com</e-mail>
</student>
<student>
<USN>USN : 3GN07IS001</USN>
<name>NAME : MANORANJAN</name>
<college>COLLEGE : GNDEC</college>
<branch>BRANCH : Information Science and Engineering</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : manoranjan@gmail.com</e-mail>
</student>
<student>
<USN>USN : 3GN07EC001</USN>
<name>NAME : CHETHAN</name>

<college>COLLEGE : GNDEC</college>
<branch>BRANCH : Electronics and Communication Engineering
</branch>
<year>YEAR : 2007</year>
<e-mail>E-Mail : chethan@gmail.com</e-mail>
</student>
</students>

</html>

prog5.css

student{
display:block; margin-top: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;font-size:12pt; color:Purple;
}
year{
display:block; margin-left:20px;font-size:14pt; color:Green;
}
e-mail{
display:block; margin-left:20px;font-size:12pt; color:Blue;

}

OUTPUT :( click on image to zoom )





WT 6 - PHP - NUMBER OF VISITORS

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.

 SOLUTION  1 

1. If xampp is in the system, save the program in C:\xampp\htdocs (start apache in xampp control panel)

2. If no xampp in the system, save the program in C:\Program Files\Apache Group\Apache2\htdocs   & Open Google Chrome & type http://localhost/prog6.php

prog6.php

<?php
echo "<h1> REFRESH PAGE </h1>" ;
$file = 'count.txt' ;
$c = file_get_contents($file) ;
file_put_contents($file, $c+1);
echo "The number of users visited : ".$c ;
?>

STEPS:( click on image to zoom )






OUTPUT :( click on image to zoom )



 SOLUTION  2 

prog6.php

<?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 :

REFRESH PAGE


Total number of views: 10


WT 7 - PHP - DIGITAL CLOCK

7. WRITE A PHP PROGRAM TO DISPLAY A DIGITAL CLOCK WHICH DISPLAYS THE CURRENT TIME OF THE SERVER.

 SOLUTION  1  &  SOLUTION  2 

1. If xampp is in the system, save the program in C:\xampp\htdocs (start apache in xampp control panel)

2. If no xampp in the system, save the program in C:\Program Files\Apache Group\Apache2\htdocs   & Open Google Chrome & type http://localhost/prog7.php

prog7.php

<head>
<meta http-equiv="refresh" content="1"/>
<style>
p {
color:yellow;
font-size:90px;
position:absolute;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
background-color:maroon;
}
</style>
<p> <?php echo date(" h: i : s A");?> </p>
</head>

STEPS :( click on image to zoom )




OUTPUT :( click on image to zoom )




WT 8A - PHP - SIMPLE CALCULATOR

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.


 SOLUTION  1  &  SOLUTION  2 

If xampp is in the system, save the program in C:\xampp\htdocs (start apache in xampp control panel)

If no xampp in the system, save the program in C:\Program Files\Apache Group\Apache2\htdocs   & Open Google Chrome & type http://localhost/prog8a.php

prog8a.php

<html>
<head>
<style>
table, td, th {
border: 1px solid black; 
width: 35%;
text-align: center; 
background-color: lightgray;
}
table { margin: auto; } 
input,p { text-align:right; }
</style>
</head>

<body>
<form method="post" action="prog8a.php">
<table>
<caption><h2> SIMPLE CALCULATOR </h2></caption>
<tr>
<td>First Number:</td><td><input type="text" name="num1" /></td>
<td rowspan="2"><button type="submit" name="submit" value="calculate">Calculate</td></tr>
<tr>
<td>Second Number:</td><td><input type="text" name="num2"/></td>
</tr>
</form>

<?php
if(isset($_POST['submit'])) // it checks if the input submit is filled
{
$num1 = $_POST['num1'];
$num2 = $_POST['num2']; 
if(is_numeric($num1) and is_numeric($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> alert(' ENTER VALID NUMBER');</script>";
}
}
?>
</body>
</html>

STEPS :( click on image to zoom )




OUTPUT :( click on image to zoom )