Skip to content

Instantly share code, notes, and snippets.

@d6u

d6u/calculator.html

Last active February 13, 2026 03:07
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save d6u/2e982bdc965e14ce12a545e6996f0af4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save d6u/2e982bdc965e14ce12a545e6996f0af4 to your computer and use it in GitHub Desktop.
Download ZIP
Basic calculator in HTML
Raw
calculator.html
<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>
@nasirahmadebrahimi52-cmd
Copy link

nasirahmadebrahimi52-cmd commented Feb 13, 2026

<title>ماشین حساب شیک</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } 
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;
  }
}
</style>
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>
<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>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment