JavaScript Calculator
A simple calculator built with HTML, CSS, and JavaScript
Overview
This is a basic calculator web app. It supports addition, subtraction, multiplication, division, percentage,
decimal numbers, clear (C), and delete last digit (DEL). Save the code below as an .html file and open it in any
web browser to run it.
Full Code (HTML + CSS + JavaScript)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple Calculator</title>
<style>
body {
font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background: #222;
}
.calculator {
background: #333;
border-radius: 10px;
padding: 20px;
width: 260px;
}
#display {
width: 100%;
height: 50px;
font-size: 24px;
text-align: right;
margin-bottom: 10px;
border: none;
border-radius: 5px;
padding: 5px 10px;
box-sizing: border-box;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
}
button {
padding: 15px;
font-size: 18px;
border: none;
border-radius: 5px;
cursor: pointer;
background: #555;
color: #fff;
}
button:hover { background: #666; }
.operator { background: #f90; }
.equals { background: #0a84ff; grid-column: span 2; }
.clear { background: #e74c3c; }
</style>
</head>
<body>
<div class="calculator">
<input type="text" id="display" disabled>
<div class="buttons">
<button class="clear" onclick="clearDisplay()">C</button>
<button onclick="deleteLast()">DEL</button>
<button class="operator" onclick="appendValue('%')">%</button>
<button class="operator" onclick="appendValue('/')">/</button>
<button onclick="appendValue('7')">7</button>
<button onclick="appendValue('8')">8</button>
<button onclick="appendValue('9')">9</button>
<button class="operator" onclick="appendValue('*')">*</button>
<button onclick="appendValue('4')">4</button>
<button onclick="appendValue('5')">5</button>
<button onclick="appendValue('6')">6</button>
<button class="operator" onclick="appendValue('-')">-</button>
<button onclick="appendValue('1')">1</button>
<button onclick="appendValue('2')">2</button>
<button onclick="appendValue('3')">3</button>
<button class="operator" onclick="appendValue('+')">+</button>
<button onclick="appendValue('0')">0</button>
<button onclick="appendValue('.')">.</button>
<button class="equals" onclick="calculate()">=</button>
</div>
</div>
<script>
const display = [Link]('display');
function appendValue(value) {
[Link] += value;
}
function clearDisplay() {
[Link] = '';
}
function deleteLast() {
[Link] = [Link](0, -1);
}
function calculate() {
try {
if (/^[0-9+\-*/.%\s]+$/.test([Link])) {
[Link] = eval([Link]).toString();
} else {
[Link] = 'Error';
}
} catch (error) {
[Link] = 'Error';
}
}
</script>
</body>
</html>
How It Works
• appendValue() adds digits/operators to the display as buttons are clicked.
• clearDisplay() resets the display.
• deleteLast() removes the last character.
• calculate() validates the input with a regular expression (allowing only digits, +, -, *, /, %, and dots) before
evaluating it, then shows the result or "Error" if invalid.
How To Use
1. Copy the code above into a new file named [Link].
2. Open that file in any web browser (Chrome, Firefox, Edge, etc).
3. Click the buttons to enter numbers and operators, then press "=" to see the result.