JavaScript and HTML code to find largest of three numbers - Practical [ SWPD 4311603 ]

PRG July 23, 2022

Practical Aim:
Use JavaScript to find the highest from the given three values.

First, try at own

Video Tutorial: JavaScript to Find the Largest Number Among Three Numbers

Code

findgreatestnumber.html file

<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>Find Greates Number from Three Number</title>
<style>
.wrapper{
margin: 20px;
padding: 20px;
background-color: antiquewhite;
}

h1{
background-color: black;
color: white;
padding: 3px;

}
input{
border-radius: 5px;
height: 50px;
font-size: 20px;
}
label{
font-size: 20px;
}

button{
font-size: 20px;
padding: 10px;
width: 400px;
font-weight: bold;
}
</style>

<script>
function largest(){
var num1, num2, num3;
num1 = Number(document.getElementById("n1").value);
num2 = Number(document.getElementById("n2").value);
num3 = Number(document.getElementById("n3").value);


//window.alert(num3);

if(num1 > num2 && num1 > num3)
{
window.alert(num1 + " Number1 is Greatest number");
}
else if(num2 > num1 && num2 > num3){
window.alert(num2 + " Number2 is Greatest number");
}
else if(num3 > num1 && num3 > num2){
window.alert(num3+ " Number3 is Greatest number");
}
}

</script>

</head>
<body>
<div class="wrapper">
<h1> Find the greatest value from entered Three value</h1>
<label>Enter Number 1 </label><input type="number" id="n1"></input><br><br>
<label>Enter Number 2 </label><input type="number" id="n2"></input><br><br>
<label>Enter Number 3 </label><input type="number" id="n3"></input><br><br>

<button onClick="largest()" >Find The Greatest Number</button>

</div>

</body>
</html>

Try here

<!DOCTYPE html >
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>

<body>
<h1> Try your code here</h1>
</body>
</html>



Output

Tags:
PRG

Posted by: PRG

Post a Comment

0 Comments