How to design a working calculator program made in HTML & javascript. Designing an existing program is an excellent task to clear an interview for User Interface.
Languages used- HTML, CSS, JavaScript.
<html>
<head>
<title>Calculator</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<section>
<h2>Calculator</h2>
</section>
<section>
<input type="number" id="val1">
<div id="sign"></div>
<input type="number" id="val2">
<div id="equals"></div>
<div id="result"></div>
</section>
<section>
<button onClick="calAdd()">+</button>
<button onClick="calSub()">-</button>
<button onClick="calMul()">x</button>
<button onClick="calDiv()">/</button>
</section>
<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);
document.getElementById("result").style.display = "block";
document.getElementById("sign").innerHTML = "+";
document.getElementById("equals").innerHTML = " = ";
}
function calSub(){
var v1 = document.getElementById("val1").value;
var v2 = document.getElementById("val2").value;
document.getElementById("result").innerHTML = " " + (Number(v1) - Number(v2));
document.getElementById("result").style.display = "block";
document.getElementById("sign").innerHTML = "-";
document.getElementById("equals").innerHTML = " = ";
}
function calMul(){
var v1 = document.getElementById("val1").value;
var v2 = document.getElementById("val2").value;
document.getElementById("result").innerHTML = " " + Number(v1) * Number(v2);
document.getElementById("result").style.display = "block";
document.getElementById("sign").innerHTML = "x";
document.getElementById("equals").innerHTML = " = ";
}
function calDiv(){
var v1 = document.getElementById("val1").value;
var v2 = document.getElementById("val2").value;
document.getElementById("result").innerHTML = " " + Math.round(Number(v1) / Number(v2));
document.getElementById("result").style.display = "block";
document.getElementById("sign").innerHTML = "/";
document.getElementById("equals").innerHTML = " = ";
}
</script>
</body>
</html>
