Simple Calculator
M2-R5.1 · Chapter 6: JavaScript and Angular JS · 5 min read
Question - Make A simple calculator using js that offer add multiply sub and divide.
Source Code -
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<style>
.data{
text-align: center;
background-color: brown;
color: white;
padding: 50px;
width: 500px;
height: auto;
}
h1{
font-size: 60px;
color: rgb(253, 203, 2);
text-align: center;
text-shadow: 2px 2px 10px black;
}
.text{
font-size: x-large;
}
.d{
font-size: x-large;
}
body{
background-color: gray;
}
.btn{
background-color: black;
color: white;
border: 2px solid green;
border-radius: 15px;
padding: 10px 20px;
margin: 5px;
}
.btn:hover{
background-color: skyblue;
color: black;
}
</style>
</head>
<body>
<center>
<div class="data">
<h1>Calculator</h1>
<p class="text">Enter first number</p>
<input type="text" id="num1"><br><br>
<p class="text">Enter second number</p>
<input type="text" id="num2"><br><br>
<button onclick="add()" class="btn">Add</button>
<button onclick="sub()" class="btn">Subtract</button>
<button onclick="mul()" class="btn">Multiply</button>
<button onclick="divi()" class="btn">Divide</button>
<br><br>
<div id="result" class="d"></div>
</div>
</center>
<script>
function add(){
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
document.getElementById("result").innerHTML = "Result: " + (a + b);
}
function sub(){
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
document.getElementById("result").innerHTML = "Result: " + (a - b);
}
function mul(){
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
document.getElementById("result").innerHTML = "Result: " + (a * b);
}
function divi(){
let a = parseFloat(document.getElementById("num1").value);
let b = parseFloat(document.getElementById("num2").value);
if(b === 0){
document.getElementById("result").innerHTML = "Division by zero is not allowed!";
} else {
document.getElementById("result").innerHTML = "Result: " + (a / b);
}
}
</script>
</body>
</html>