In this tutorial we have made Simple JavaScript Calculator Using Vanilla JavaScript. The HTML, CSS and JavaScript code is given below.
Table of Contents
HTML Code
HTML Code is given below.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple JAVASCRIPT CALCULATOR</title>
</head>
<body>
<form>
<h1>SIMPLE JAVASCRIPT CALCULATOR</h1>
<input id="input1" type="text" placeholder="Enter First Number">
<input id="input2" type="text" placeholder="Enter Second Number">
<input type="submit" onclick="add()" value="ADD">
<input type="submit" onclick="sub()" value="SUBTRACT">
<input type="submit" onclick="mul()" value="MULTIPLY">
<input type="submit" onclick="div()" value="DIVIDE">
<p>HowToCodeSchool.com</p>
</form>
</body>
</html>
CSS Code
CSS Code is given below.
body {
font-family: monospace;
display: flex;
align-items:center;
justify-content: center;
height: 100vh;
margin: 0px;
background-color: #22438C;
color: #fff;
}
form {
width: 700px;
text-align: center;
}
form input[type="text"],form input[type="submit"] {
width: 100%;
padding: 20px 5px;
font-weight: 900;
box-sizing: border-box;
background-color: #fff;
color: #22438C;
border: 1px solid #aaa;
}
JavaScript Code
JavaScript Code is given below. Four different functions are used for four different mathematical operations, addition, subtraction, multiplication and division.
<script>
function add()
{
var a = document.getElementById("input1").value;
var b = document.getElementById("input2").value;
var c= parseInt(a)+parseInt(b);
alert(c);
}
function sub()
{
var a = document.getElementById("input1").value;
var b = document.getElementById("input2").value;
var c=a-b;
alert(c);
}
function mul()
{
var a = document.getElementById("input1").value;
var b = document.getElementById("input2").value;
var c=a*b;
alert(c);
}
function div()
{
var a = document.getElementById("input1").value;
var b = document.getElementById("input2").value;
var c=a/b;
alert(c);
}
</script>
Demo
Video Tutorial
Watch video tutorial on how to create Simple JavaScript Calculator Using HTML, CSS and JavaScript.