Practical : 11
Subject : Web Technology
Aim : Write JavaScript program to perform the following function:
A. To calculate Average of integer number (1 to n)
B. To check whether given number is prime or not
C. To calculate factorial of n
D. To print current date & time
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>prac11</title>
<link rel="stylesheet" type="text/css" href="prac11.css">
<script type="text/javascript" src="prac11.js"></script>
</head>
<body align="center">
<div class="box blue one">
<h4>1. Enter a number to do average from 1:</h4>
<input class="b" type="text" id="data1" placeholder="Enter a number here"></input>
<button class="b" type="button" name="go" onclick="average()">Go</button>
<h4>Result :</h4>
<input class="b" type="text" id="op1" placeholder="Output will be displayed here"></input>
</div>
<div class="box red one">
<h4>2. Enter a number to check for prime number:</h4>
<input class="r" type="text" id="data2" placeholder="Enter a number here"></input>
<button class="r" type="button" name="go" onclick="prime()">Go</button>
<h4>Result :</h4>
<input class="r" type="text" id="op2" placeholder="Output will be displayed here"></input>
</div>
<br>
<div class="box green two">
<h4>3. Enter a number to do factorial:</h4>
<input class="g" type="text" id="data3" placeholder="Enter a number here"></input>
<button class="g" type="burron" name="go" onclick="factorial()">Go</button>
<h4>Result :</h4>
<input class="g" type="text" id="op3" placeholder="Output will be displayed here"></input>
</div>
<div class="box orange two">
<h4>4. Click on button to print current date and time:</h4>
<input class="o" type="text" value="Click on Go button" readonly=""></input>
<button class="o"type="burron" name="go" onclick="showdate()">Go</button>
<h4>Result :</h4>
<input class="o" type="text" id="op4" size="47" value="Click on Go button" readonly=""></input></input>
</div>
</body>
</html>
CSS Code:
.one{
display: inline-block;
}
.two{
display: inline-block;
}
button
{
width: 70px;
height: 35px;
background-color: white;
}
button:hover
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}
input
{
padding: 8px;
border-width: 2px;
border-radius: 2px;
border-style: solid;
}
input:hover
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}
.box
{
width: 400px;
height: 220px;
margin: 20px;
text-align: center;
border-radius: 8px;
transition: background-color 0.5s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}
.blue,.b
{
border:2px solid #008cba;
color: #008cba;
}
.blue:hover {
background-color: #008cba;
color:white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.red,.r
{
border:2px solid #f44336;
color: #f44336;
}
.red:hover {
background-color: #f44336;
color:white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.green,.g
{
border:2px solid #4caf50;
color: #4caf50;
}
.green:hover {
background-color: #4caf50;
color:white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.orange,.o
{
border:2px solid #f4511e;
color: #f4511e;
}
.orange:hover {
background-color: #f4511e;
color:white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
JavaScript Code:
function average()
{
var n=Number(document.getElementById("data1").value);
var i,sum=0;
for(i=1;i<=n;i++)
{
sum=sum+i;
}
var avg=sum/n;
document.getElementById("op1").value=avg;
}
function prime()
{
var no=Number(document.getElementById("data2").value);
var n=no/2,i,flag=0;
for(i=2;i<=n;i++)
{
if((no%i)==0)
{
flag=1;
break;
}
}
if(flag==0)
{
document.getElementById("op2").value="It is a Prime Number";
}
else
{
document.getElementById("op2").value="It is not a Prime Number";
}
}
function factorial()
{
var n=Number(document.getElementById("data3").value);
var i,fact=1;
for(i=1;i<=n;i++)
{
fact=fact*i;
}
document.getElementById("op3").value=fact;
}
function showdate()
{
var date=new Date();
var str=date;
document.getElementById("op4").value=str;
}
Output:
B. To check whether given number is prime or not
C. To calculate factorial of n
D. To print current date & time
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>prac11</title>
<link rel="stylesheet" type="text/css" href="prac11.css">
<script type="text/javascript" src="prac11.js"></script>
</head>
<body align="center">
<div class="box blue one">
<h4>1. Enter a number to do average from 1:</h4>
<input class="b" type="text" id="data1" placeholder="Enter a number here"></input>
<button class="b" type="button" name="go" onclick="average()">Go</button>
<h4>Result :</h4>
<input class="b" type="text" id="op1" placeholder="Output will be displayed here"></input>
</div>
<div class="box red one">
<h4>2. Enter a number to check for prime number:</h4>
<input class="r" type="text" id="data2" placeholder="Enter a number here"></input>
<button class="r" type="button" name="go" onclick="prime()">Go</button>
<h4>Result :</h4>
<input class="r" type="text" id="op2" placeholder="Output will be displayed here"></input>
</div>
<br>
<div class="box green two">
<h4>3. Enter a number to do factorial:</h4>
<input class="g" type="text" id="data3" placeholder="Enter a number here"></input>
<button class="g" type="burron" name="go" onclick="factorial()">Go</button>
<h4>Result :</h4>
<input class="g" type="text" id="op3" placeholder="Output will be displayed here"></input>
</div>
<div class="box orange two">
<h4>4. Click on button to print current date and time:</h4>
<input class="o" type="text" value="Click on Go button" readonly=""></input>
<button class="o"type="burron" name="go" onclick="showdate()">Go</button>
<h4>Result :</h4>
<input class="o" type="text" id="op4" size="47" value="Click on Go button" readonly=""></input></input>
</div>
</body>
</html>
CSS Code:
.one{
display: inline-block;
}
.two{
display: inline-block;
}
button
{
width: 70px;
height: 35px;
background-color: white;
}
button:hover
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}
input
{
padding: 8px;
border-width: 2px;
border-radius: 2px;
border-style: solid;
}
input:hover
{
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}
.box
{
width: 400px;
height: 220px;
margin: 20px;
text-align: center;
border-radius: 8px;
transition: background-color 0.5s;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5), 0 6px 20px 0 rgba(0, 0, 0, 0.25);
}
.blue,.b
{
border:2px solid #008cba;
color: #008cba;
}
.blue:hover {
background-color: #008cba;
color:white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.red,.r
{
border:2px solid #f44336;
color: #f44336;
}
.red:hover {
background-color: #f44336;
color:white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.green,.g
{
border:2px solid #4caf50;
color: #4caf50;
}
.green:hover {
background-color: #4caf50;
color:white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.orange,.o
{
border:2px solid #f4511e;
color: #f4511e;
}
.orange:hover {
background-color: #f4511e;
color:white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
JavaScript Code:
function average()
{
var n=Number(document.getElementById("data1").value);
var i,sum=0;
for(i=1;i<=n;i++)
{
sum=sum+i;
}
var avg=sum/n;
document.getElementById("op1").value=avg;
}
function prime()
{
var no=Number(document.getElementById("data2").value);
var n=no/2,i,flag=0;
for(i=2;i<=n;i++)
{
if((no%i)==0)
{
flag=1;
break;
}
}
if(flag==0)
{
document.getElementById("op2").value="It is a Prime Number";
}
else
{
document.getElementById("op2").value="It is not a Prime Number";
}
}
function factorial()
{
var n=Number(document.getElementById("data3").value);
var i,fact=1;
for(i=1;i<=n;i++)
{
fact=fact*i;
}
document.getElementById("op3").value=fact;
}
function showdate()
{
var date=new Date();
var str=date;
document.getElementById("op4").value=str;
}
Output:
Sign up here with your email
ConversionConversion EmoticonEmoticon