javascript program to make calculator with Add Subtract Multiply Divide buttons
No designing, only code
Languages used- HTML, CSS, JavaScript.
<html>
<head>
<title>Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input type="number" id="val1">
<input type="number" id="val2">
<button onClick="calAdd()">+</button>
<button onClick="calSub()">-</button>
<button onClick="calMul()">x</button>
<button onClick="calDiv()">/</button>
<div id="result"></div>
<style>
div{
width:auto;
float:left;
}
section{
width: 100%;
float: left;
margin-top: 10px;
text-align: center;}
input{
width: 30%;
float: left;
margin: 0px;
padding: 10px;
border: 0px;
border-bottom: 1px solid #e3e3e3;
text-align: center;
background-color: #f3f3f3;}
button{
width: 24%;
padding: 4%;
font-size: 26px;
border: 0px;
background-color: black;
color: white;}
#sign,#equals{
margin-top: 8px;
padding: 0px 6px;
}
#result{
display:none;
float: right;
background-color: #f00;
color: white;
text-align: center;
padding: 9px 35px;
}
</style>
<script>
function calAdd(){
var v1 = document.getElementById("val1").value;
var v2 = document.getElementById("val2").value;
document.getElementById("result").innerHTML = " " + Number(v1) + Number(v2);
}
function calSub(){
var v1 = document.getElementById("val1").value;
var v2 = document.getElementById("val2").value;
document.getElementById("result").innerHTML = " " + (Number(v1) - Number(v2));
}
function calMul(){
var v1 = document.getElementById("val1").value;
var v2 = document.getElementById("val2").value;
document.getElementById("result").innerHTML = " " + Number(v1) * Number(v2);
}
function calDiv(){
var v1 = document.getElementById("val1").value;
var v2 = document.getElementById("val2").value;
document.getElementById("result").innerHTML = " " + Math.round(Number(v1) / Number(v2));
}
</script>
</body>
</html>
