Simple Calculator App
About this app
A simple calculator app featuring a user-friendly interface with essential arithmetic operations.
Simple Calculator App 1 2 3 + 4 5 6 - 7 8 9 * C 0 / = .
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Simple Calculator App</title>
<meta name="description" content="A simple calculator app featuring a user-friendly interface with essential arithmetic operations.">
<meta name="keywords" content="calculator, math, simple app, arithmetic, easy interface">
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
body {
background-color: #FFFFFF;
font-family: 'Roboto', sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
color: #000000;
}
#calculator {
width: 90%;
max-width: 400px;
padding: 20px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
border-radius: 10px;
background-color: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
}
#display {
width: 100%;
font-size: 2rem;
padding: 10px;
border: none;
border-radius: 5px;
margin-bottom: 15px;
background-color: #FFFFFF;
color: #000000;
text-align: right;
}
.button {
width: 60px;
height: 60px;
margin: 5px;
font-size: 1.5rem;
color: #000000;
background-color: #DCDCDC;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
.button:hover {
background-color: #B0B0B0;
}
.operator {
color: #000000;
background-color: #D3D3D3;
}
.operator:hover {
background-color: #A9A9A9;
}
.grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.result {
color: #008000;
}
.error {
color: #FF0000;
}
</style>
<script>
document.addEventListener("DOMContentLoaded", function () {
const display = document.getElementById('display');
let currentInput = '';
let operator = '';
let previousInput = '';
const updateDisplay = (message = '') => {
display.value = message ? message : (currentInput || previousInput || '0');
};
const clear = () => {
currentInput = '';
previousInput = '';
operator = '';
updateDisplay();
};
const appendNumber = (number) => {
if (currentInput.length < 10) {
currentInput += number;
updateDisplay();
}
};
const chooseOperator = (op) => {
if (currentInput === '') return;
if (previousInput !== '') {
calculate();
}
operator = op;
previousInput = currentInput;
currentInput = '';
updateDisplay();
};
const calculate = () => {
let computation;
const prev = parseFloat(previousInput);
const current = parseFloat(currentInput);
if (isNaN(prev) || isNaN(current)) {
updateDisplay('Error');
return;
}
switch (operator) {
case '+':
computation = prev + current;
break;
case '-':
computation = prev - current;
break;
case '*':
computation = prev * current;
break;
case '/':
computation = prev / current;
break;
default:
return;
}
currentInput = computation.toString();
operator = '';
previousInput = '';
updateDisplay(currentInput);
};
document.querySelectorAll('.number').forEach(button => {
button.addEventListener('click', () => {
appendNumber(button.innerText);
});
});
document.querySelectorAll('.operator').forEach(button => {
button.addEventListener('click', () => {
chooseOperator(button.innerText);
});
});
document.getElementById('equals').addEventListener('click', calculate);
document.getElementById('clear').addEventListener('click', clear);
updateDisplay();
});
</script>
</head>
<body>
<div id="calculator">
<input type="text" id="display" disabled />
<div class="grid">
<button class="button number">1</button>
<button class="button number">2</button>
<button class="button number">3</button>
<button class="button operator">+</button>
<button class="button number">4</button>
<button class="button number">5</button>
<button class="button number">6</button>
<button class="button operator">-</button>
<button class="button number">7</button>
<button class="button number">8</button>
<button class="button number">9</button>
<button class="button operator">*</button>
<button class="button" id="clear">C</button>
<button class="button number">0</button>
<button class="button operator">/</button>
<button class="button" id="equals">=</button>
<button class="button number">.</button>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!