Sectionb 1
Sectionb 1
## Write a javascript that calculates the square and cubes of the numbers
from 0 to 10 and outputs html text that displays the resulting values in an
html table format.
SOURCE CODE :-
Square.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>square and cube</title>
</head>
<body><h1 style="margin-left: 550px; color: blue;">SQUARE & CUBE</h1><section
style="height: 270px; width: 170px; border: 2px solid black; text-align: center; margin-left:
600px; background-color:bisque;">
<script >
document.write( "<table> <tr> <th>Number</th> <th>Square</th> <th>Cube</th>
</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> </section>
</body>
</html>
Output
PROGRAM 2
## Write a javascript to design a simple calculator to perform the following
operations-sum , product , difference , quotient.
SOURCE CODE :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
</head>
<body><h1 style="text-align:center; color: blueviolet; ">Calculator App </h1>
<section style="height: 250px; width: 20%; border: 2px solid black; margin-top: 50px;
margin-left: 535px; background-color:aqua;">
<section style="height: 220px; width: 97%; margin-top: 5%; margin-left: 4.75px;
background-color: bisque; ">
<h1 style="text-align:center; color: blueviolet; ">Calculator </h1>
<div class="container" >
<br><center>
<table >
<tr>
<td colspan="3"><input type='text' id='result' class ='screen' style="text-align:
right;"></td>
<td>
<input type='button' value = 'C' onclick="clearScreen()" class="clear"/>
</td>
</tr>
</table>
<div class="keys" >
<input type="button" value="7" class="button" onClick="display('7')"></input>
<input type="button" value="8" class="button " onClick="display('8')"></input>
<input type="button" value="9" class="button" onClick="display('9')"></input>
<input type="button" value="/" class="operator" onClick="display('/')"></input><br>
<input type="button" value="4" class="button" onClick="display('4')"></input>
<input type="button" value="5" class="button" onClick="display('5')"></input>
<input type="button" value="6" class="button" onClick="display('6')"></input>
<input type="button" value="*" class="operator" onClick="display('*')"></input><br>
<input type="button" value="1" class="button" onClick="display('1')"></input>
<input type="button" value="2" class="button" onClick="display('2')"></input>
<input type="button" value="3" class="button" onClick="display('3')"></input>
<input type="button" value="-" class="operator" onClick="display('-')"></input><br>
<input type="button" value="0" class="button" onClick="display('0')"></input>
<input type="button" value="." class="button" onClick="display('.')"></input>
<input type="button" value= "=" class="button equal-sign" onClick="solve()"></input>
<input type="button" value="+" class="operator" onClick="display('+')"></input>
</div> </center></div></section></style>
<script>
function display(val){
document.getElementById('result').value += val
return val
}
function solve(){
let x = document.getElementById('result').value
let y = eval(x);
document.getElementById('result').value = y
return y
}
function clearScreen(){
document.getElementById('result').value = ''
}
</script></section>
</body>
</html>
Output :
PROGRAM 3
## Write a program to validate E-mail text box in javascript
SOURCE CODE :-
email.html
<!DOCTYPE html>
<html>
<head>
<title>email validation using javascript</title>
<script language = "javascript" >
function validateEmail(emailField){
var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
if (reg.test(emailField.value) == false)
{
alert('Invalid Email Address');
return false;
}
return true;
}
</script>
</head>
<body> <h1 style="margin-top: 20px; color:blue; margin-left: 530px;" >Email
Validation</h1>
<section style="height: 150px; width: 500px; border: 2px dotted black; text-align: center;
margin-left: 400px; margin-top: 70px; background-color: bisque;">
<div class="container">
<div class="box">
<h1 style="margin-top: 20px; " >Email</h1>
<input type="email" onblur="validateEmail(this);" /><br><br>
<button onclick={checkemail}>Login</button>
</div>
</div>
</section>
</body>
</html>
Output :
PROGRAM 4
## Write a program in javascript to insert and move image on screen.
SOURCE CODE :-
Swap.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Swapping</title>
</head>
<body><h1 style="text-align: center; color: blueviolet;">Swapping Images</h1>
<img src="img/my2.jpeg" id="p1" height="275" style="margin-left: 300px;" />
<img src="img/my.JPG" id="p2" height="275" />
<br /><input type="button" value="Swap images" onclick="swap1()" />
<script>
function swap1() {
var txt1 = document.getElementById("p1");
var txt2 = document.getElementById("p2");
var txt = txt1.src;
txt1.src = txt2.src;
txt2.src = txt;
}
</script>
</body>
</html>
Output:
PROGRAM 5
## Write a program to design a weblog.
<html>
<head>
<meta name="viewport" content="width=device-width",initial-scale="1">
<style>
*{
box-sizing: border-box;
}
body{
font-family: arial; padding: 20px; background: #e2dede;
}
.header{ padding: 20px;
font-size: 20px; text-align: center; background: white;
}
.x
{
float: left; width: 75%;
}
.y
{
float: left; width: 25%;
padding-left: 20px;
}
.z
{
background-color: #aaa; width: 100%;
padding: 20px;
}
.row::after{
content: ""; display: table; clear:both;
}
.footer
{
padding: 20px; text-align: center;
background: #a79999; margin-top: 20px;
}
.a{ background-color: rgb(235,231,231); padding: 10px;
margin-top: 20px;
}
@media screen and (max-width: 800px ) {
.leftcoloumn, .rightcoloumn
{
width: 100% ;
padding: 0;
}
}
</style>
</head>
<body>
<div class="header">
<h2>PHOTOGRAPHY</h2>
</div>
<div class="row">
<div class="x">
<div class="card">
<h2>VISION BY ME</h2>
<div class="z" style="height: 200px;"><img src="C:\Users\fc\Pictures\Screenshots\
Screenshot 2024-03-29 015658.png" width="300" height="150">
</img> </div>
<p>Photography is a art of capuring light with a camera,usually via a digital sensor or file, to create
an image.with the right camera equipment, you can even photograph wavelenghts of light visible to
human eye,including uv, infrared,and radio.</p>
</p> </div><br>
<div class="a">
<h2>SMILE PLEASE</h2>
<div class="z" style="height:200px;">
<img src="C:\Users\fc\Pictures\ap.png" width="300"height="150">
</div><br>
<p></p>
</div> </div>
<div class="y">
<div class="a">
<h2>ABOUT ME</h2>
<div class="z" style="height: 20%;"><img src="C:\Users\fc\Pictures\mis.png" height="100"
width="200" ></div>
<p>LIFE IS ALSO LIKE A CAMERA JUST CAPTURE GOOD MOMENTS AND SPREAD HAPPINESS ALL
AROUND</p>
</div>
<div class="a">
<h3>Popular Post</h3>
<div class="z"> <img src="C:\Users\fc\Pictures\mm.png"
width="105%"></div><br>
<div class="z"><img src="C:\Users\fc\Pictures\as.png" width="105%"> </div><br>
<div class="z"><img src="C:\Users\fc\Pictures\pp.png" width="105%" ></div>
</div>
</div>
</div>
<div class ="footer">
<h2>BE LIKE SUNSHINE</h2>
</div>
</body>
</html>
Output:
PROGRAM 6
## Design a CSS to create a homepage and all linked pages for any hotel.
<html>
<head>
<title>my web page</title>
<link rel="stylesheet" href="hotel.css">
</head>
<body background="C:\Users\fc\Downloads\mhotel.jpg">
<header><h1><center>GRACE HOTEL</center></h1></header>
<div>
<span>HOME </span>
<span> MENU</span>
<span>STAFF </span>
<span>ROOMS</span>
<span>OTHER FACILITIES</span>
</div>
<br>
<marquee>welcome to the GRACE HOTEL. How can we help you?</marquee>
</body>
</html>
header{
background-color:rgb(196, 163, 120);
height: 100;
width: 100%; font-size: larger;
font-weight: 400;
} h1
{
color:white
}
body{
background-size: cover; height: 100vh;
background-position: center;
}
Span {
color: black;
background-color: rgb(225, 199, 164); margin: 3px;
}
Marquee {
background-color:rgb(196, 163, 120); height=200;
}
Output:
PROGRAM 7
## Write a program to prepare a timetable of your class
(using Rowspan ,Colspan,Cellpadding,Cellspacing).
<html>
<head>
<title>
TIME TABLE
</title>
<style> h1{
color:hotpink;
}
table{
color:black;
}
th{
background-color:hotpink;
}
</style>
</head>
<body bgcolor="aqua" width="1000">
<h1> <center><b>Time Table of MCA</b></center></h1>
<center>
<table border="3px">
<tr></tr>
<tr><b>
<th> day</th>
<th>9-10</th>
<th>10-11</th>
<th>11-12</th>
<th>12-1</th>
<th>1-2</th>
<th>2-3</th>
<th>3-4</th>
</b></tr>
<tr>
<td bgcolor="hotpink"> <b>Monday</b></td>
<td>Linux lab </td>
<td>Web tech lab</td>
<td>Web technology</td>
<td>linux</td>
<td>break..</td>
<td> PPL </td>
<td>. </td>
</tr>
<tr>
<td bgcolor="hotpink"><b>tuesday</b></td>
<td>Linux lab</td>
<td>web tech lab</td>
<td>web technology</td>
<td>Linux</td>
<td>break..</td>
<td>PPL</td>
<td>ADBMS</td>
</tr>
<tr>
<td bgcolor="hotpink"><b>Wednesday</b></td>
<td>Linux lab </td>
<td>Web tech lab</td>
<td>ADBMS</td>
<td>linux</td>
<td>break..</td>
<td> PPL </td>
<td>SIC</td>
</tr>
<tr>
<td bgcolor="hotpink"> <b>Thursday</b></td>
<td>Linux lab </td>
<td>Web tech lab</td>
<td>ADBMS</td>
<td>Linux</td>
<td>break..</td>
<td> PPL </td>
<td>SIC</td>
</tr>
<tr>
<td bgcolor="hotpink"><b>Friday</b></td>
<td>Linux Lab</td>
<td>Web tech lab</td>
<td>SIC</td>
<td>Web technology</td>
<td>break..</td>
<td> ADBMS </td>
<td>. </td>
</tr>
<tr>
<td bgcolor="hotpink"> <b>Saturday</td></b>
<td colspan="2"> <center>open-elective </center></td>
<td>SIC</td>
<td>Web technology</td>
<td>break</td>
<td>ADBMS</td>
<td>. </td>
<tr>
</table>
</center>
</body>
</html>
Output:
PROGRAM 8
## Create HTML page ( your OWN Page) using frame:
Source code:
<html>
<head>
<frameset rows ="40%,80%">
<frame src="6th.html"></frame>
<frameset cols="50%,50%">
<frame src="6tha.html"></frame>
<frame src="6thb.html"></frame>
</frameset>
</frameset>
</head>
</html>
6th.html:
<html>
<head>
<style>
body{
background-repeat: no-repeat; background-position: bottom; background-color:rgb(21, 163, 188);;
}
</style> <body>
<h1> <p style="text-align: center;" > Eye Hospital</p></h1>
<h2><p style ="text-align: center;">Agarsen Hospital,Kaithal</p></h2>
<center><img src="C:\Users\fc\Pictures\am.png" width="150" height="100"></center>
</body>
</head>
</html>
6tha.html
<html>
<head>
<style>
body{
background-color:rgb(21, 163, 188);
}
</style>
</head>
<body>
<form>
<h1><p style="text-align: center;"> LOG IN</p></h1>
<label > <b>PATIENT NAME:<input type="text"></b></label><br><br>
<label><b>APPONITMENT NO.<input type="password"></b></label><br><br>
<input type="submit" value="submit">
<br>
<img src="C:\Users\fc\Pictures\Screenshots\Screenshot 2024-03-28 095547.png" height ="30%"
width="50%" align="bottom">
</form>
</body>
</html>
6thb.html:
<html>
<head>
<style>
body{
background-color: rgb(21, 163, 188);
}
</style>
</head>
<body>
<h1>
<p style="text-align: center;">Eye Technology for Correcting your Vision</p>
</h1>
<img src="C:\Users\fc\Pictures\Screenshots\Screenshot 2024-03-28 095516.png" height="50%"
width="50%"align="bottom">
<ul style="text-align: right;">
<b><h2>
<li>Excimer Leser Eye Technolog</li>
<li>Wave Front Laser Eye Technology</li>
<li>The Intralase Laser Beam </li>
</h2></b></ul>
</body>
</html>
Output:
Area of Rectangle with Form in PHP
Example:
1. <html>
2. <body>
5. <br><br>
8. </form>
9. </body>
10. </html>
11. <?php
12. if(isset($_POST['submit']))
13. {
18. }
19. ?>
Output:
sum of digits of 14597.
1. <?php
2. $num = 14597;
3. $sum=0; $rem=0;
5. {
6. $rem=$num%10;
8. $num=$num/10;
9. }
11. ?>
Output:
1. <form method="post">
3. <button type="submit">Check</button>
4. </form>
5. <?php
6. if($_POST)
7. {
9. $num = $_POST['num'];
12.
16. }else{
18. }
19. }
20. ?>
Output:
1. <?php
2. $num = 0;
3. $n1 = 0;
4. $n2 = 1;
6. echo "\n";
9. {
15. ?>
Output: