Train Smart. Work Smarter.
How to create a simple calculator using HTML, CSS, Javascript
Today we come up with the simple post in which we have created a simple calculator using Html, css and Javascript. It is lot easier for the beginners who are trying to understand basics of html, css and Javascript. So have a look at simple design of a calculator we are going to design.
Below is a simple code which explains the above design.
<html lang=“en”>
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<title>Calculator</title>
<script>
//function that displaying value
function display(val) {
document.getElementById(“result”).value+=val ;
}
//function that evaluates the digit and return result
function result() {
let resultVal = document.getElementById(“result”).value ;
let output = eval(resultVal) ;
document.getElementById(“result”).value = output ;
}
//function that clear the displayplayplay
function clr() {
document.getElementById(“result”).value = “” ;
}
</script>
<style>
.calculator{
background-color: azure;
height: 350px;
width: 300px;
margin: 10px;
border-color: black;
border: black 1px solid;
}
.calctextbox{
background-color: rgba(120, 140, 151, 0.623);
border: black 1px solid;
padding: 10px;
}
input[type=“text”]{
padding: 10px;
margin-left: 20px;
width: 180px;
font-size: 20px;
}
input[type=“button”]{
height: 50px;
width: 50px;
padding: 5px;
margin: 5px;
font-size: 20px;
}
.calcbuttons{
background-color:azure;
margin-left: 20px;
}
</style>
</head>
<body>
<div class=“calculator”>
<div class=“calctextbox”>
<input type=“text” id=“result”/>
<input type=“button” value=“c” onclick=“clr()“/>
</div>
<div class=“calcbuttons”>
<input type=“button” value=“1” onclick=“display(‘1’)“/>
<input type=“button” value=“2” onclick=“display(‘2’)“/>
<input type=“button” value=“3” onclick=“display(‘3’)“/>
<input type=“button” value=“/” onclick=“display(‘/’)“/>
<input type=“button” value=“4” onclick=“display(‘4’)“/>
<input type=“button” value=“5” onclick=“display(‘5’)“/>
<input type=“button” value=“6” onclick=“display(‘6’)“/>
<input type=“button” value=“-“ onclick=“display(‘-‘)“/>
<input type=“button” value=“7” onclick=“display(‘7’)“/>
<input type=“button” value=“8” onclick=“display(‘8’)“/>
<input type=“button” value=“9” onclick=“display(‘9’)“/>
<input type=“button” value=“+” onclick=“display(‘+’)“/>
<input type=“button” value=“.” onclick=“display(‘.’)“/>
<input type=“button” value=“0” onclick=“display(‘0’)“/>
<!– solve function call function solve to evaluate value –>
<input type=“button” value=“=” onclick=“result()“/>
<input type=“button” value=“*” onclick=“display(‘*’)“/>
</div>
</div>
</body>
</html>
Feel free to try this code and comment below.
