The Pragmatic Programmer

Appian, Pega, Java, DevSecOps, Quality Engineering

Create a Simple Calculator with JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Simple Calculator</title>
<style>
input[type="text"] {
width: 100%;
padding: 10px;
margin-bottom: 10px;
}
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Simple Calculator</h2>
<input type="text" id="num1" placeholder="Enter first number">
<input type="text" id="num2" placeholder="Enter second number">
<br>
<button onclick="add()">Add</button>
<button onclick="subtract()">Subtract</button>
<button onclick="multiply()">Multiply</button>
<button onclick="divide()">Divide</button>
<br>
<input type="text" id="result" placeholder="Result" readonly>

<script>
function add() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
document.getElementById('result').value = num1 + num2;
}

function subtract() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
document.getElementById('result').value = num1 - num2;
}

function multiply() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
document.getElementById('result').value = num1 * num2;
}

function divide() {
var num1 = parseFloat(document.getElementById('num1').value);
var num2 = parseFloat(document.getElementById('num2').value);
if (num2 === 0) {
alert("Cannot divide by zero!");
return;
}
document.getElementById('result').value = num1 / num2;
}
</script>
</body>
</html>