Last active
February 13, 2026 03:07
-
-
Save d6u/2e982bdc965e14ce12a545e6996f0af4 to your computer and use it in GitHub Desktop.
Basic calculator in HTML
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Calculator</title> | |
| <style> | |
| * { | |
| box-sizing: border-box; | |
| } | |
| .calculator { | |
| width: 400px; | |
| } | |
| .screen { | |
| height: 50px; | |
| border: 1px solid black; | |
| text-align: right; | |
| font-size: 30px; | |
| line-height: 50px; | |
| padding-right: 10px; | |
| } | |
| .key-pad { | |
| display: flex; | |
| } | |
| .num-keys { | |
| display: flex; | |
| flex-wrap: wrap; | |
| width: 300px; | |
| } | |
| .num-keys button { | |
| width: 90px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="calculator"> | |
| <p id="screen" class="screen">0</p> | |
| <div id="key-pad" class="key-pad"> | |
| <div class="num-keys"> | |
| <button>1</button> | |
| <button>2</button> | |
| <button>3</button> | |
| <button>4</button> | |
| <button>5</button> | |
| <button>6</button> | |
| <button>7</button> | |
| <button>8</button> | |
| <button>9</button> | |
| <button>0</button> | |
| </div> | |
| <div> | |
| <button>+</button> | |
| <button>-</button> | |
| <button>*</button> | |
| <button>/</button> | |
| <button>=</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| class Stack { | |
| constructor() { | |
| this.stack = []; | |
| this[Symbol.iterator] = function *() { | |
| for (const el of this.stack) { | |
| yield el; | |
| } | |
| } | |
| } | |
| isEmpty() { | |
| return this.stack.length === 0; | |
| } | |
| push(val) { | |
| this.stack.push(val); | |
| } | |
| pop() { | |
| if (this.isEmpty()) { | |
| throw new Error('empty stack'); | |
| } else { | |
| return this.stack.pop(); | |
| } | |
| } | |
| peek(n = -1) { | |
| if (this.isEmpty()) { | |
| throw new Error('empty stack'); | |
| } else { | |
| return this.stack[this.stack.length + n]; | |
| } | |
| } | |
| } | |
| document.getElementById('key-pad').addEventListener('click', (event) => { | |
| if (event.target.tagName === 'BUTTON') { | |
| input(event.target.innerHTML); | |
| render(); | |
| } | |
| }); | |
| const $screen = document.getElementById('screen'); | |
| const stack = new Stack(); | |
| let shouldResetIfNumber = false; | |
| let display = 0; | |
| stack.push(0); | |
| function input(char) { | |
| if (isNum(char)) { | |
| if (shouldResetIfNumber) { | |
| stack.pop(); | |
| stack.push(parseInt(char)); | |
| shouldResetIfNumber = false; | |
| } else if (isNum(stack.peek())) { | |
| const n = stack.pop(); | |
| stack.push(n * 10 + parseInt(char)); | |
| } else { | |
| stack.push(parseInt(char)); | |
| } | |
| display = stack.peek(); | |
| } else if (char !== '=') { | |
| shouldResetIfNumber = false; | |
| if (isNum(stack.peek())) { | |
| stack.push(char); | |
| } else { | |
| stack.pop(); | |
| stack.push(char); | |
| } | |
| display = evaluate(stack); | |
| } else { | |
| const res = evaluate(stack, true); | |
| while (!stack.isEmpty()) { | |
| stack.pop(); | |
| } | |
| stack.push(res); | |
| shouldResetIfNumber = true; | |
| display = res; | |
| } | |
| } | |
| function evaluate(stack, isComplete = false) { | |
| const values = new Stack(); | |
| const operators = new Stack(); | |
| for (const val of stack) { | |
| if (isNum(val)) { | |
| values.push(val); | |
| } else { | |
| if (val === '+' || val === '-') { | |
| while (!operators.isEmpty()) { | |
| values.push(operators.pop()); | |
| } | |
| operators.push(val); | |
| } else { | |
| while (!operators.isEmpty() && (operators.peek() === '*' || operators.peek() === '/')) { | |
| values.push(operators.pop()); | |
| } | |
| operators.push(val); | |
| } | |
| } | |
| } | |
| if (isComplete) { | |
| while (!operators.isEmpty()) { | |
| values.push(operators.pop()); | |
| } | |
| } | |
| const rpn = new Stack(); | |
| for (const val of values) { | |
| if (isNum(val)) { | |
| rpn.push(val); | |
| } else { | |
| const b = rpn.pop(); | |
| const a = rpn.pop(); | |
| switch (val) { | |
| case '+': | |
| rpn.push(a + b); | |
| break; | |
| case '-': | |
| rpn.push(a - b); | |
| break; | |
| case '/': | |
| rpn.push(a / b); | |
| break; | |
| case '*': | |
| rpn.push(a * b); | |
| break; | |
| } | |
| } | |
| } | |
| return rpn.pop(); | |
| } | |
| function render() { | |
| $screen.innerHTML = display; | |
| } | |
| function isNum(val) { | |
| if (typeof val === 'number') { | |
| return true; | |
| } else if (typeof val === 'string') { | |
| return !Number.isNaN(parseInt(val)); | |
| } else { | |
| return false; | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
C del +
<title>ماشین حساب شیک</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<script>
const currentDisplay = document.getElementById('current');
const previousDisplay = document.getElementById('previous');
function appendToDisplay(value) {
if (currentDisplay.innerText === '0' && value !== '.') {
currentDisplay.innerText = value;
} else {
currentDisplay.innerText += value;
}
}
function clearAll() {
currentDisplay.innerText = '0';
previousDisplay.innerText = '0';
}
function calculate() {
try {
let expression = currentDisplay.innerText
.replace(/×/g, '*')
.replace(/÷/g, '/');
// امنیت بیشتر: فقط اجازه محاسبات ریاضی ساده
const result = Function('"use strict";return (' + expression + ')')();
previousDisplay.innerText = currentDisplay.innerText + ' =';
currentDisplay.innerText = Number(result.toFixed(8)) % 1 === 0
? Number(result).toString()
: result.toFixed(8).replace(/\.?0+$/, '');
} catch (err) {
currentDisplay.innerText = 'خطا';
setTimeout(() => {
if (currentDisplay.innerText === 'خطا') clearAll();
}, 1400);
}
}
// پشتیبانی از کیبورد
document.addEventListener('keydown', (e) => {
e.preventDefault();
if (/[0-9]/.test(e.key)) appendToDisplay(e.key);
if (e.key === '.') appendToDisplay('.');
if (e.key === '+') appendToDisplay('+');
if (e.key === '-') appendToDisplay('-');
if (e.key === '*') appendToDisplay('×');
if (e.key === '/') appendToDisplay('÷');
if (e.key === 'Enter' || e.key === '=') calculate();
if (e.key === 'Backspace') {
if (currentDisplay.innerText.length > 1) {
currentDisplay.innerText = currentDisplay.innerText.slice(0, -1);
} else {
currentDisplay.innerText = '0';
}
}
if (e.key === 'Escape' || e.key === 'c' || e.key === 'C') clearAll();
});
</script>
body {
min-height: 100vh;
background: linear-gradient(135deg, #1e1e2f, #2a2a4a);
font-family: system-ui, -apple-system, sans-serif;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.calculator {
background: rgba(30, 30, 50, 0.95);
border-radius: 24px;
overflow: hidden;
width: 100%;
max-width: 360px;
box-shadow:
0 20px 40px rgba(0,0,0,0.6),
0 0 0 1px rgba(255,255,255,0.08) inset;
backdrop-filter: blur(10px);
}
.display {
background: #0f0f1a;
padding: 32px 24px 20px;
text-align: right;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 8px;
position: relative;
}
.previous {
font-size: 1.1rem;
color: #a0a0ff;
min-height: 24px;
word-break: break-all;
}
.current {
font-size: 3.2rem;
font-weight: 300;
color: white;
word-break: break-all;
line-height: 1.1;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding: 24px;
}
button {
aspect-ratio: 1;
border: none;
border-radius: 16px;
font-size: 1.5rem;
font-weight: 500;
cursor: pointer;
transition: all 0.12s ease;
user-select: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
button:active {
transform: scale(0.92);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.number {
background: #2a2a40;
color: white;
}
.number:hover {
background: #343454;
}
.operator {
background: #ff9500;
color: white;
font-weight: 600;
}
.operator:hover {
background: #ffb143;
}
.equal {
background: #28a745;
color: white;
grid-row: span 2;
font-size: 2rem;
}
.equal:hover {
background: #34ce57;
}
.clear {
background: #dc3545;
color: white;
grid-column: span 2;
}
.clear:hover {
background: #e4606d;
}
.zero {
grid-column: span 2;
}
@media (max-width: 400px) {
.buttons {
gap: 10px;
padding: 18px;
}
.current {
font-size: 2.6rem;
}
}
0
0
C
(
)
<button class="number" onclick="appendToDisplay('7')">7</button>
<button class="number" onclick="appendToDisplay('8')">8</button>
<button class="number" onclick="appendToDisplay('9')">9</button>
<button class="operator" onclick="appendToDisplay('/')">÷</button>
<button class="number" onclick="appendToDisplay('4')">4</button>
<button class="number" onclick="appendToDisplay('5')">5</button>
<button class="number" onclick="appendToDisplay('6')">6</button>
<button class="operator" onclick="appendToDisplay('*')">×</button>
<button class="number" onclick="appendToDisplay('1')">1</button>
<button class="number" onclick="appendToDisplay('2')">2</button>
<button class="number" onclick="appendToDisplay('3')">3</button>
<button class="operator" onclick="appendToDisplay('-')">-</button>
<button class="number zero" onclick="appendToDisplay('0')">0</button>
<button class="number" onclick="appendToDisplay('.')">.</button>
<button class="operator" onclick="appendToDisplay('+')">+</button>
<button class="equal" onclick="calculate()">=</button>
<title>ماشین حساب شیک</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
<script>
const currentDisplay = document.getElementById('current');
const previousDisplay = document.getElementById('previous');
function appendToDisplay(value) {
if (currentDisplay.innerText === '0' && value !== '.') {
currentDisplay.innerText = value;
} else {
currentDisplay.innerText += value;
}
}
function clearAll() {
currentDisplay.innerText = '0';
previousDisplay.innerText = '0';
}
function calculate() {
try {
let expression = currentDisplay.innerText
.replace(/×/g, '*')
.replace(/÷/g, '/');
// امنیت بیشتر: فقط اجازه محاسبات ریاضی ساده
const result = Function('"use strict";return (' + expression + ')')();
previousDisplay.innerText = currentDisplay.innerText + ' =';
currentDisplay.innerText = Number(result.toFixed(8)) % 1 === 0
? Number(result).toString()
: result.toFixed(8).replace(/\.?0+$/, '');
} catch (err) {
currentDisplay.innerText = 'خطا';
setTimeout(() => {
if (currentDisplay.innerText === 'خطا') clearAll();
}, 1400);
}
}
// پشتیبانی از کیبورد
document.addEventListener('keydown', (e) => {
e.preventDefault();
if (/[0-9]/.test(e.key)) appendToDisplay(e.key);
if (e.key === '.') appendToDisplay('.');
if (e.key === '+') appendToDisplay('+');
if (e.key === '-') appendToDisplay('-');
if (e.key === '*') appendToDisplay('×');
if (e.key === '/') appendToDisplay('÷');
if (e.key === 'Enter' || e.key === '=') calculate();
if (e.key === 'Backspace') {
if (currentDisplay.innerText.length > 1) {
currentDisplay.innerText = currentDisplay.innerText.slice(0, -1);
} else {
currentDisplay.innerText = '0';
}
}
if (e.key === 'Escape' || e.key === 'c' || e.key === 'C') clearAll();
});
</script>
body {
min-height: 100vh;
background: linear-gradient(135deg, #1e1e2f, #2a2a4a);
font-family: system-ui, -apple-system, sans-serif;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.calculator {
background: rgba(30, 30, 50, 0.95);
border-radius: 24px;
overflow: hidden;
width: 100%;
max-width: 360px;
box-shadow:
0 20px 40px rgba(0,0,0,0.6),
0 0 0 1px rgba(255,255,255,0.08) inset;
backdrop-filter: blur(10px);
}
.display {
background: #0f0f1a;
padding: 32px 24px 20px;
text-align: right;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 8px;
position: relative;
}
.previous {
font-size: 1.1rem;
color: #a0a0ff;
min-height: 24px;
word-break: break-all;
}
.current {
font-size: 3.2rem;
font-weight: 300;
color: white;
word-break: break-all;
line-height: 1.1;
}
.buttons {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 14px;
padding: 24px;
}
button {
aspect-ratio: 1;
border: none;
border-radius: 16px;
font-size: 1.5rem;
font-weight: 500;
cursor: pointer;
transition: all 0.12s ease;
user-select: none;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
button:active {
transform: scale(0.92);
box-shadow: 0 2px 6px rgba(0,0,0,0.4);
}
.number {
background: #2a2a40;
color: white;
}
.number:hover {
background: #343454;
}
.operator {
background: #ff9500;
color: white;
font-weight: 600;
}
.operator:hover {
background: #ffb143;
}
.equal {
background: #28a745;
color: white;
grid-row: span 2;
font-size: 2rem;
}
.equal:hover {
background: #34ce57;
}
.clear {
background: #dc3545;
color: white;
grid-column: span 2;
}
.clear:hover {
background: #e4606d;
}
.zero {
grid-column: span 2;
}
@media (max-width: 400px) {
.buttons {
gap: 10px;
padding: 18px;
}
.current {
font-size: 2.6rem;
}
}
0
0
C
(
)
<button class="number" onclick="appendToDisplay('7')">7</button>
<button class="number" onclick="appendToDisplay('8')">8</button>
<button class="number" onclick="appendToDisplay('9')">9</button>
<button class="operator" onclick="appendToDisplay('/')">÷</button>
<button class="number" onclick="appendToDisplay('4')">4</button>
<button class="number" onclick="appendToDisplay('5')">5</button>
<button class="number" onclick="appendToDisplay('6')">6</button>
<button class="operator" onclick="appendToDisplay('*')">×</button>
<button class="number" onclick="appendToDisplay('1')">1</button>
<button class="number" onclick="appendToDisplay('2')">2</button>
<button class="number" onclick="appendToDisplay('3')">3</button>
<button class="operator" onclick="appendToDisplay('-')">-</button>
<button class="number zero" onclick="appendToDisplay('0')">0</button>
<button class="number" onclick="appendToDisplay('.')">.</button>
<button class="operator" onclick="appendToDisplay('+')">+</button>
<button class="equal" onclick="calculate()">=</button>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
create an calculator that i publish on google and earn money. make calculator on different seo****