To visit the site Click Here
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body
{
background-color: lavender;
font-weight:bolder;
font-size:10px;
}
div{
background-color:#FFB6C1;
border: black 3px solid;
padding:0px ;
text-align: center;
width:100%;
height:100%;
}
h1{
color:black;
font-size:30px;
text-decoration:underline;
}
p{
font-weight: bold;
font-size:20px;
}
input{
color:red;
width:60%;
height:30px;
background-color: white;
font-weight:bold;
border:2px solid black;
text-align:center;
font-size:20px;
}
button{
color: black;
background-color: grey1;
width:30%;
height:50px;
font-weight: bolder;
border: 2px solid black
}
select{
border: 2px solid black;
font-weight: bolder;
height: 50px;
width: 30%;
background-color:grey1;
color: black;
}
</style>
<script type="text/Javascript">
function calc()
{
var n1 = parseFloat(document.getElementById('n1').value);
var n2 = parseFloat(document.getElementById('n2').value);
var operators = document.getElementById('operators').value;
if(operators=='+')
{
var result = document.getElementById('result').value=n1+n2;
}
if(operators=='-')
{
var result = document.getElementById('result').value=n1-n2;
}
if(operators=='x')
{
var result = document.getElementById('result').value=n1*n2;
}
if(operators=='/')
{
var result = document.getElementById('result').value=n1/n2;
}
}
</script>
</head>
<body align="center">
<h1>Calculator</h1>
<div>
<p>Enter First Number :<p>
<span><input type="number" id="n1"/>
</span><br/><br/>
<p>
<select id="operators">
<option disabled selected>---Choose---</option>
<option value="+">+</option>
<option value="-">-</option>
<option value="x">x</option>
<option value="/">/</option>
</select><br/><br/><p>
<p>Enter Second Number :</p> <input type="number" id="n2"/><br/><br/>
<p>
<button onclick="calc();">Calculate</button><br /><br /><p>
<p>Result :</p> <input type="text" id="result" disabled/><br /><br /><br/>
</div>
<footer>
Copyright © 2021 | Gaurav Soni
</footer>
</body>
</html>
Output
Comments
Post a Comment