211240107020 WP (3160713)
PRACTICAL 10
Aim: To create an HTML page to explain the use of various predefined
functions in and Array & Date object in JavaScript.
Code:
<html>
<head>
<title>Practical 11 </title>
</head>
<body>
<h2> Arrray and Date object </h2>
<h4>
<p>Date object</p>
<p id="demo0"></p><hr><br>
<p> with Using Loop</p>
<p id="demo1"></p><hr><br>
<p>Without Using Loop</p>
<p id="demo2"></p>
<script>
var flowers = ["Tulip","Sunflower","Rose","Lotus","Lily","Jasmine"];
var text = "";
var i;
for(i=0;i< flowers.length; i++){
text += flowers[i] + "<br>";
}
var d = new Date();
document.getElementById("demo0").innerHTML = d;
document.getElementById("demo1").innerHTML = text;
document.getElementById("demo2").innerHTML = flowers;
</script>
</h4>
19
211240107020 WP (3160713)
</body>
</html>
Output:
20
211240107020 WP (3160713)
PRACTICAL 11
Aim: Write a program to show use of Alert, Confirm and Prompt box.
Code: -
<html>
<head>
<title>Practical 12 </title>
</head>
<body>
<h2>Alert Message </h2>
<button onclick="myfunction()">Press this</button>
<script>
function myfunction(){
alert("Alert Button Activated");
}</script>
<h2>Confirm Box </h2>
<button onclick="myfact()">Press this</button>
<p id="demo"></p>
<script>
function myfact(){
var txt;
if (confirm("Press a button!")){
txt = "You pressed OK!";
}else{
txt = "You pressed Cancel!";
}document.getElementById("demo").innerHTML = txt;
}
</script>
</body>
</html>
Output: -
21
211240107020 WP (3160713)
PRACTICAL 12
Aim: To Create a webpage for find maximum three number.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>MAXIMUM NUMBER FINDER</title>
<style>
body {
display: flex;
height: 400px;
justify-content: center;
text-align: center;
}
div{
background-color: aquamarine;
width: 400px;
}
button{
margin-top: 50px;
}
p{
font-weight: 900;
font-size: 24px;
}
</style>
</head>
<body>
<div>
<h1>MAXIMUM NUMBER FINDER</h1>
<p>Enter three numbers:</p>
<input type="number" id="num1" placeholder="Number 1">
<br>
<input type="number" id="num2" placeholder="Number 2">
<br>
<input type="number" id="num3" placeholder="Number 3">
<br>
<br>
<br>
<p id="result"></p>
<button onclick="findMax()">Find Maximum</button>
</div>
<script>
22
211240107020 WP (3160713)
function findMax() {
var num1 = document.getElementById("num1").value;
var num2 = document.getElementById("num2").value;
var num3 = document.getElementById("num3").value;
if (num1 > num2 && num1 > num3)
{
document.getElementById("result").textContent = "The maximum number is: " + num1;
}
else if (num2 > num3)
{
document.getElementById("result").textContent = "The maximum number is: " + num2;
}
else {
document.getElementById("result").textContent = "The maximum number is: " + num3;
}
}
</script>
</body>
</html>
Output: -
23
211240107020 WP (3160713)
PRACTICAL 13
Aim: To Create a webpage for find factorial value of given number.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FACTORIAL FINDER</title>
<style>
body {
display: flex;
height: 400px;
justify-content: center;
text-align: center;
}
div{
background-color: aquamarine;
width: 400px;
}
button{
margin-top: 50px;
}
p{
font-size: 24px;
}
</style>
</head>
<body>
<div>
<h1>FACTORIAL FINDER</h1>
<p><b>Enter a number:</p>
<input id="num" type="number" placeholder="Enter a number">
<button onclick="fact()">Find Factorial</button>
<p id="result"><b></p>
</div>
<script>
function fact(){
var num=document.getElementById("num").value;
var result=1;
for(var i=1;i<=num;i++){
result*=i;
}
document.getElementById("result").textContent="FACTORIAL IS = "+result;
}
24
211240107020 WP (3160713)
</script>
</body>
</html>
Output: -
25
