HTML Calculator

A calculator is a basic tool for mathematical computations and users can perform some basic arithmetic operations directly in a web browser by building a basic calculator using HTML. The creation of a basic HTML calculator will be covered in this post.

Preview:

Approach:

To create the HTML calculator, we'll use HTML for the structure, CSS for styling and JavaScript for the functionality. We'll use event listeners to capture button clicks and perform corresponding operations based on user input.

Example :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>HTML Calculator</title>

<style>

body {

font-family: Arial, sans-serif;

}

.calculator {

width: 300px;

margin: 0 auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

text-align: center;

}

input[type="text"] {

width: 100%;

margin-bottom: 10px;

padding: 10px;

font-size: 18px;

border: 1px solid #ccc;

border-radius: 5px;

box-sizing: border-box;

}

.btn {

width: 50px;

height: 50px;

margin: 5px;

font-size: 18px;

border: none;

border-radius: 5px;

cursor: pointer;

}

.btn.operator {

background-color: #f0ad4e;

}

.btn.clear {

background-color: #d9534f;

}

.btn.equal {

background-color: #5cb85c;

}

</style>

</head>

<body>

<div class="calculator">

<input type="text" id="result" readonly>

<div>

<button class="btn" onclick="addToScreen('7')">7</button>

<button class="btn" onclick="addToScreen('8')">8</button>

<button class="btn" onclick="addToScreen('9')">9</button>

<button class="btn operator" onclick="addToScreen('+')">+</button>

</div>

<div>

<button class="btn" onclick="addToScreen('4')">4</button>

<button class="btn" onclick="addToScreen('5')">5</button>

<button class="btn" onclick="addToScreen('6')">6</button>

<button class="btn operator" onclick="addToScreen('-')">-</button>

</div>

<div>

<button class="btn" onclick="addToScreen('1')">1</button>

<button class="btn" onclick="addToScreen('2')">2</button>

<button class="btn" onclick="addToScreen('3')">3</button>

<button class="btn operator" onclick="addToScreen('*')">*</button>

</div>

<div>

<button class="btn clear" onclick="clearScreen()">C</button>

<button class="btn" onclick="addToScreen('0')">0</button>

<button class="btn operator" onclick="calculate()">=</button>

<button class="btn operator" onclick="addToScreen('/')">/</button>

</div>

<script>

function addToScreen(value) {

document.getElementById('result').value += value;

}

function clearScreen() {

document.getElementById('result').value = '';

}

function calculate() {

let result = document.getElementById('result').value;

try {

document.getElementById('result').value = eval(result);

} catch (error) {

document.getElementById('result').value = 'Error';

}

</script>

</body>

</html>

Output :

This HTML calculator provides a simple interface for performing the basic arithmetic calculations. Users can input numbers and operators using the buttons provided and the result will be displayed in the input field.