Scribd
Upload
76 views10 pages

Web

1. The document contains code for a JavaScript calculator program with a user interface of number buttons and arithmetic operator buttons that update a display field. 2. The document contains code to generate an HTML table that calculates and displays the squares and cubes of numbers from 0 to 10 using a for loop. 3. The document contains JavaScript code to continuously change the size of text displayed in a div element to simulate text growing and shrinking in size.

Uploaded by

akash Drolia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
76 views10 pages

Web

1. The document contains code for a JavaScript calculator program with a user interface of number buttons and arithmetic operator buttons that update a display field. 2. The document contains code to generate an HTML table that calculates and displays the squares and cubes of numbers from 0 to 10 using a for loop. 3. The document contains JavaScript code to continuously change the size of text displayed in a div element to simulate text growing and shrinking in size.

Uploaded by

akash Drolia
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 10

1.

<!DOCTYPE html>
<html lang = "en">
<head>
<title> JavaScript Calculator </title>

<style>
h1 {
text-align: center;
padding: 23px;
background-color: skyblue;
color: white;
}

#clear{
width: 270px;
border: 3px solid gray;
border-radius: 3px;
padding: 20px;
background-color: red;
}

.formstyle
{
width: 300px;
height: 530px;
margin: auto;
border: 3px solid skyblue;
border-radius: 5px;
padding: 20px;
}

input
{
width: 20px;
background-color: green;
color: white;
border: 3px solid gray;
border-radius: 5px;
padding: 26px;
margin: 5px;
font-size: 15px;
}

#calc{
width: 250px;
border: 5px solid black;
border-radius: 3px;
padding: 20px;
margin: auto;
}

</style>

</head>
<body>
<h1> Calculator Program in JavaScript </h1>
<div class= "formstyle">
<form name = "form1">

<!-- This input box shows the button pressed by the user in calculator. -->
<input id = "calc" type ="text" name = "answer"> <br> <br>
<!-- Display the calculator button on the screen. -->
<!-- onclick() function display the number prsses by the user. -->
<input type = "button" value = "1" onclick = "form1.answer.value += '1' ">
<input type = "button" value = "2" onclick = "form1.answer.value += '2' ">
<input type = "button" value = "3" onclick = "form1.answer.value += '3' ">
<input type = "button" value = "+" onclick = "form1.answer.value += '+' ">
<br> <br>

<input type = "button" value = "4" onclick = "form1.answer.value += '4' ">


<input type = "button" value = "5" onclick = "form1.answer.value += '5' ">
<input type = "button" value = "6" onclick = "form1.answer.value += '6' ">
<input type = "button" value = "-" onclick = "form1.answer.value += '-' ">
<br> <br>

<input type = "button" value = "7" onclick = "form1.answer.value += '7' ">


<input type = "button" value = "8" onclick = "form1.answer.value += '8' ">
<input type = "button" value = "9" onclick = "form1.answer.value += '9' ">
<input type = "button" value = "*" onclick = "form1.answer.value += '*' ">
<br> <br>

<input type = "button" value = "/" onclick = "form1.answer.value += '/' ">


<input type = "button" value = "0" onclick = "form1.answer.value += '0' ">
<input type = "button" value = "." onclick = "form1.answer.value += '.' ">
<!-- When we click on the '=' button, the onclick() shows the sum results on
the calculator screen. -->
<input type = "button" value = "=" onclick = "form1.answer.value =
eval(form1.answer.value) ">
<br>
<!-- Display the Cancel button and erase all data entered by the user. -->
<input type = "button" value = "Clear All" onclick = "form1.answer.value = ' ' "
id= "clear" >
<br>

</form>
</div>
</body>
</html>

2.
<!DOCTYPE html>
<html>
<head>
<title>Number Calculation</title>
<style>
table {
border-collapse: collapse;
}

th, td {
border: 1px solid black;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<table>
<tr>
<th>Number</th>
<th>Square</th>
<th>Cube</th>
</tr>
<script>
for (let number = 0; number <= 10; number++) {
const square = number * number;
const cube = number * number * number;

document.write(`
<tr>
<td>${number}</td>
<td>${square}</td>
<td>${cube}</td>
</tr>
`);
}
</script>
</table>
</body>
</html>

3.<!DOCTYPE html>
<html>
<head>
<title>Text Animation</title>
<style>
#text {
font-size: 5pt;
color: red;
}
</style>
</head>
<body>
<div id="text">TEXT - GROWING</div>

<script>
let fontSize = 5;
let growing = true;
let intervalId;

function animateText() {
const textElement = document.getElementById('text');

if (growing) {
fontSize++;

if (fontSize === 50) {


textElement.textContent = 'TEXT - SHRINKING';
textElement.style.color = 'blue';
growing=false;
}
} else {
fontSize--;
}

textElement.style.fontSize = `${fontSize}pt`;

if (fontSize === 5 && !growing) {


clearInterval(intervalId);
}
}

intervalId = setInterval(animateText, 100);


</script>
</body>
</html>

4.
<html>
<title>Reverse Number</title>
<body>
<script>
function rev()
{
var n=prompt("Enter Number"," ");
n=parseInt(n);
var temp=0,rev=0;
while(n>0)
{
temp=n%10;
rev=rev*10+temp;
n=n/10;
n=parseInt(n);
}
document.write("The Reverse number is:",rev);
}
</script>

<form>
<input type="button" value="Enter Number" onclick="rev()";>
</form>
</body>
</html>

b.
<html>
<head><title>3A PROGRAM</title>
</head>
<body>
<SCRIPT>
function vow(st)
{
var pos;
pos=st.search(/[aeiouAEIOU]/);
if(pos<0)
alert("pattern not found\n");
else
alert("Position of the left most vowel is "+(pos+1));
}
</SCRIPT>
<FORM><p>Enter the text</p>
<input type="text" id="voweltext"/>
<input type="button" value="Click here" onclick="vow(voweltext.value);"/>
</FORM>
</body>
</html>

5.
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE student_information[
<!ELEMENT student_information (ad+)>
<!ELEMENT ad (usn,name,college,branch,year,email)>
<!ELEMENT usn (#PCDATA)>
<!ELEMENT name (#PCDATA)>
<!ELEMENT college (#PCDATA)>
<!ELEMENT branch (#PCDATA)>
<!ELEMENT year (#PCDATA)>
<!ELEMENT email (#PCDATA)>]>
<?xml-stylesheet type="text/css" href="4a.css"?>
<student_information>
<h1>First Student Information</h1>
<ad><label>USN:</label><usn>1BI11CS006</usn></ad>
<ad><label>NAME:</label><name>ABC</name></ad>
<ad><label>COLLEGE:</label><college>BIT</college></ad>
<ad><label>BRANCH:</label><branch>CSE</branch></ad>
<ad><label>YEAR:</label><year>2001</year></ad>
<ad><label>EMAIL:</label><email>[email protected]</email></ad>
<h1>Second Student Information</h1>
<ad><label>USN:</label><usn>1BI11CS008</usn></ad>
<ad><label>NAME:</label><name>DEF</name></ad>
<ad><label>COLLEGE:</label><college>BIT</college></ad>
<ad><label>BRANCH:</label><branch>CSE</branch></ad>
<ad><label>YEAR:</label><year>2001</year></ad>
<ad><label>EMAIL:</label><email>[email protected]</email></ad>
<h1>Third Student Information</h1>
<ad><label>USN:</label><usn>1BI11CS007</usn></ad>
<ad><label>NAME:</label><name>GHI</name></ad>
<ad><label>COLLEGE:</label><college>BIT</college></ad>
<ad><label>BRANCH:</label><branch>CSE</branch></ad>
<ad><label>YEAR:</label><year>2001</year></ad>
<ad><label>EMAIL:</label><email>[email protected]</email></ad>
</student_information>
CSS Document for the above XML Document
ad{display:block;}
label{font-weight:bold;color:blue;}
usn{font-size:14pt;color:red;}
name{font-size:14pt;color:red;}
college{font-size:14pt;color:red;}
branch{font-size:14pt;color:red;}
year{font-size:14pt;color:red;}
email{font-size:14pt;color:red;}
Steps to Run:
1. open blank page in Notepad or Notepad++
2. Save the XHTML file with file extension as .html and select file type as all
types or all
files.
3. Save the CSS file with file extension as .css and select file type as all types
or all files.
4. Open the file in the browser using the URL http://localhost/filename.html
6.
<!DOCTYPE html>
<html>
<body>

<?php

print "<h3> REFRESH PAGE </h3>";


$fname="count.txt";
$fp = fopen($fname,"r");
$hits= fscanf($fp,"%d");
fclose($fp);

$hits[0]++;
$fp = fopen($fname,"w");
fprintf($fp,"%d",$hits[0]);
fclose($fp);

print "Total number of views: ".$hits[0];


?>

</body>
</html>

7.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="refresh" content="1"/>

<style>
p {
color:white;
font-size:90px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body{background-color:black;}
</style>
<p>
<?php
echo date(" h: i : s A");
?>
</p>
</head>
</html>

8.a

<!DOCTYPE HTML>
<html>
<head>
<style>
table, td, th
{
border: 1px solid black;
width: 33%;
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>Value 1:</td>
<td><input type="text" name="num1"/></td>
<td rowspan="2"><input type="submit" name="submit" value="calculate">
</td>
</tr>
<tr>
<td>Value 2:</td>
<td> <input type="text" name="num2"/> </td>
</tr>
<!-- <tr>
<td>Result:</td>
<td> </td>
</tr> -->

<?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 colspan='2'> Addition :</td>
<td>$um1+$num2</td>
</tr>
";
echo
"
<tr>
<td colspan='2'> Subtraction :</td>
<td>$num1-$num2</td>
</tr>
";
echo
"
<tr>
<td colspan='2'> Multiplication :</td>
<td>$num1*$num2</td>
</tr>
";
echo
"
<tr>
<td colspan='2'> Division :</td>
<td>($num1/$num2)</td>
</tr>
";
echo"</table>";
}
else{
echo "<script type='text/javascript'>alert(' ENTER VALID
NUMBERS');</script>";
}
}

?>
</table>
</form>

</html>

8.b
<?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/>";
}
}
?>

9.
<?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 $i) {
if(preg_match( '/xas$/', ($i)))
$statesArray[0] = ($i);
}

foreach($states1 as $i) {
if(preg_match('/^k.*s$/i', ($i)))
$statesArray[1] = ($i);
}

foreach($states1 as $i) {
if(preg_match('/^M.*s$/', ($i)))
$statesArray[2] = ($i);
}

foreach($states1 as $i) {
if(preg_match('/a$/', ($i)))
$statesArray[3] = ($i);
}

echo "<br><br>Resultant Array :<br>";


foreach ( $statesArray as $i => $value ){
print("STATES[$i]=$value<br>");
}
?>

You might also like