In this tutorial of HTML CSS and JAVASCRIPT. We will be creating a basic
calcluator having operations of Addition, Subtraction, Multiplication,
Division and Modulus. So, after creating a structure of our calculator we
will give it some styling.
Let us start with HTML CODE
In HTML we have created onclick functions on the button which will help us in JAVAScipt .
Table of Contents
<html>
<head>
<title>Calculator</title>
</head>
<body>
<div class="calculator">
<h3 style="text-align: center;text-decoration: underline; padding-top: 0">Calculator</h3>
<br />
<label>Enter First Number:</label>
<input type="text" id="firstnumber" name="firstnumber" autocomplete="off" />
<br />
<br />
<label>Enter Second Number:</label>
<input type="text" id="secondnumber" name="secondnumber" autocomplete="off" />
<br />
<br />
<div class="buttons">
<button onclick="add()">+</button>
<button onclick="subtract()">-</button>
<button onclick="multiply()">*</button>
<button onclick="divide()">/</button>
<button onclick="modulus()">%</button>
<br />
<br />
</div>
<p style="font-size: 19px; display: inline">Answer: </p>
<span id="output" style="font-weight: bold"></span>
<br />
<br />
<hr style="
color: lightslategrey;
border: none;
height: 0.5px;
background-color: rgb(110, 108, 108);
" />
<br />
<input type="reset" id="reset" onclick="reset()" />
</div>
</body>
</html>
In HTML we have created onclick functions on the button which will help us in JAVAScipt .
CSS Code
<style>
* {
padding: 0;
margin: 0;
font-family: sans-serif;
}
.calculator {
margin: auto;
width: 550px;
margin-top: 30px;
margin-bottom: 30px;
box-sizing: border-box;
border: 1px solid rgba(0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0.2);
padding: 30px 80px 80px 80px;
}
label {
padding: 10px;
font-family: sans-serif;
letter-spacing: 2px;
}
input[type="text"] {
width: 400px;
height: 30px;
font-size: 19px;
padding-left: 10px;
border: 1px solid;
border-radius: 20px;
}
button {
border-radius: 50px;
text-align: center;
box-shadow: 0 5px 10px gray;
width: 70px;
font-size: medium;
padding: 10px;
color: black;
font-size: 19px;
border: 1px solid grey;
background-color: rgb(132, 202, 187);
box-sizing: border-box;
}
button:hover {
cursor: pointer;
border-top-left-radius: 10px;
}
input[type=reset] {
width: 100px;
height: 30px;
margin: 0;
position: absolute;
top: 58%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
letter-spacing: 10px;
text-transform: uppercase;
font-weight: bold;
border: 1px solid;
cursor:pointer;
background-color: rgb(240, 240, 106);
}
</style>
ADVERTISEMENT
JavaScript Code
In JS code, we have created different functions for all arithmetic opeartions. When a button is clicked its onclick defined function(in HTML) will be executed.<script lang="javascript" type="text/javascript">
var x;
var y;
function add() {
x = Number(document.getElementById("firstnumber").value);
y = Number(document.getElementById("secondnumber").value);
sum = x + y;
document.getElementById("output").innerHTML = "Addition: " + sum;
}
function subtract() {
x = Number(document.getElementById("firstnumber").value);
y = Number(document.getElementById("secondnumber").value);
sub = x - y;
document.getElementById("output").innerHTML = "Subtraction: " + sub;
}
function multiply() {
x = Number(document.getElementById("firstnumber").value);
y = Number(document.getElementById("secondnumber").value);
var multiply = x * y;
document.getElementById("output").innerHTML =
"Multiplication: " + multiply;
}
function divide() {
x = Number(document.getElementById("firstnumber").value);
y = Number(document.getElementById("secondnumber").value);
var division = x / y;
document.getElementById("output").innerHTML = "Division: " + division;
}
function modulus() {
x = Number(document.getElementById("firstnumber").value);
y = Number(document.getElementById("secondnumber").value);
var mod = x % y;
document.getElementById("output").innerHTML = "Modulus: " + mod;
}
function reset() {
document.getElementById("firstnumber").value = "";
document.getElementById("secondnumber").value = "";
}
</script>
RESET button RESETS the values in First and Second Number
When you make this calculator, you can click on the other button to see their actions.
Output:
