Root
>
Calculator.html
Download
Delete
Calculator.html
7,7 KB • HTML • jun. 18, 2026 06:54
Render
Source
Live Edit
Copy
Save
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="color-scheme" content="dark"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Calculator</title> <style> :root { color-scheme: dark; font-family: Inter, "Segoe UI", Arial, sans-serif; background: #080d18; color: #edf2ff; } * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #080d18; } body { min-width: 0; min-height: 0; } .widget { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: clamp(12px, 3vw, 20px); display: grid; grid-template-rows: auto auto 1fr; gap: clamp(10px, 2vw, 16px); background: #111827; border: 1px solid rgba(237, 242, 255, 0.08); } .header { min-width: 0; } .kicker { color: #8f9dff; font-size: clamp(10px, 2vw, 12px); letter-spacing: 0.16em; text-transform: uppercase; } h1 { margin: 6px 0 0; font-size: clamp(22px, 6vw, 34px); line-height: 1.05; } .screen { min-width: 0; padding: clamp(14px, 4vw, 22px); border-radius: clamp(16px, 5vw, 24px); background: #070b14; border: 1px solid rgba(237, 242, 255, 0.08); text-align: right; } .expr { min-height: 1.4em; color: #98a5c2; font-size: clamp(13px, 3vw, 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .result { min-height: 1.2em; font-size: clamp(32px, 12vw, 58px); font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .keys { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2vw, 12px); } .key { width: 100%; min-width: 0; min-height: 0; border: 0; border-radius: clamp(12px, 4vw, 18px); background: rgba(237, 242, 255, 0.08); color: #edf2ff; font: inherit; font-size: clamp(18px, 5vw, 24px); font-weight: 700; cursor: pointer; touch-action: manipulation; } .key:hover { background: rgba(237, 242, 255, 0.12); } .key:active { transform: translateY(1px); } .key.operator { background: rgba(126, 227, 255, 0.15); color: #7ee3ff; } .key.equals { background: #7ee3ff; color: #08101f; } </style> </head> <body> <main class="widget" data-widget="calculator"> <header class="header"> <div class="kicker">Quick math</div> <h1>Calcutoolator</h1> </header> <section class="screen" aria-live="polite"> <div class="expr" id="expr">Ready</div> <div class="result" id="result">0</div> </section> <section class="keys" aria-label="Calculator keys"> <button class="key" type="button" data-key="7">7</button> <button class="key" type="button" data-key="8">8</button> <button class="key" type="button" data-key="9">9</button> <button class="key operator" type="button" data-key="/">/</button> <button class="key" type="button" data-key="4">4</button> <button class="key" type="button" data-key="5">5</button> <button class="key" type="button" data-key="6">6</button> <button class="key operator" type="button" data-key="*">*</button> <button class="key" type="button" data-key="1">1</button> <button class="key" type="button" data-key="2">2</button> <button class="key" type="button" data-key="3">3</button> <button class="key operator" type="button" data-key="-">-</button> <button class="key" type="button" data-key="C">C</button> <button class="key" type="button" data-key="0">0</button> <button class="key operator" type="button" data-key="+">+</button> <button class="key equals" type="button" data-key="=">=</button> </section> </main> <script> const exprEl = document.querySelector("#expr"); const resultEl = document.querySelector("#result"); const keysEl = document.querySelector(".keys"); let expression = ""; let justEvaluated = false; function render() { exprEl.textContent = expression || "Ready"; } function clearCalculator() { expression = ""; resultEl.textContent = "0"; justEvaluated = false; render(); } function evaluateExpression() { if (!expression) { resultEl.textContent = "0"; return; } try { const safeExpression = expression.replace(/[^0-9+\-*/.()]/g, ""); const value = Function(`"use strict"; return (${safeExpression})`)(); resultEl.textContent = Number.isFinite(value) ? String(Math.round(value * 100000000) / 100000000) : "Error"; justEvaluated = true; } catch { resultEl.textContent = "Error"; justEvaluated = true; } render(); } function appendValue(value) { const isOperator = /[+\-*/]/.test(value); if (justEvaluated && !isOperator) { expression = ""; } expression += value; resultEl.textContent = ""; justEvaluated = false; render(); } function handleInput(value) { if (value === "C") { clearCalculator(); return; } if (value === "=") { evaluateExpression(); return; } appendValue(value); } keysEl.addEventListener("click", (event) => { const button = event.target.closest("button[data-key]"); if (!button) { return; } handleInput(button.dataset.key); }); window.addEventListener("keydown", (event) => { const allowedKeys = "0123456789+-*/."; if (allowedKeys.includes(event.key)) { handleInput(event.key); return; } if (event.key === "Enter" || event.key === "=") { event.preventDefault(); evaluateExpression(); return; } if (event.key === "Escape") { clearCalculator(); } }); render(); </script> </body> </html>
Copy
Save
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="color-scheme" content="dark"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Calculator</title> <style> :root { color-scheme: dark; font-family: Inter, "Segoe UI", Arial, sans-serif; background: #080d18; color: #edf2ff; } * { box-sizing: border-box; } html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #080d18; } body { min-width: 0; min-height: 0; } .widget { width: 100%; height: 100%; min-width: 0; min-height: 0; padding: clamp(12px, 3vw, 20px); display: grid; grid-template-rows: auto auto 1fr; gap: clamp(10px, 2vw, 16px); background: #111827; border: 1px solid rgba(237, 242, 255, 0.08); } .header { min-width: 0; } .kicker { color: #8f9dff; font-size: clamp(10px, 2vw, 12px); letter-spacing: 0.16em; text-transform: uppercase; } h1 { margin: 6px 0 0; font-size: clamp(22px, 6vw, 34px); line-height: 1.05; } .screen { min-width: 0; padding: clamp(14px, 4vw, 22px); border-radius: clamp(16px, 5vw, 24px); background: #070b14; border: 1px solid rgba(237, 242, 255, 0.08); text-align: right; } .expr { min-height: 1.4em; color: #98a5c2; font-size: clamp(13px, 3vw, 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .result { min-height: 1.2em; font-size: clamp(32px, 12vw, 58px); font-weight: 800; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .keys { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: clamp(8px, 2vw, 12px); } .key { width: 100%; min-width: 0; min-height: 0; border: 0; border-radius: clamp(12px, 4vw, 18px); background: rgba(237, 242, 255, 0.08); color: #edf2ff; font: inherit; font-size: clamp(18px, 5vw, 24px); font-weight: 700; cursor: pointer; touch-action: manipulation; } .key:hover { background: rgba(237, 242, 255, 0.12); } .key:active { transform: translateY(1px); } .key.operator { background: rgba(126, 227, 255, 0.15); color: #7ee3ff; } .key.equals { background: #7ee3ff; color: #08101f; } </style> </head> <body> <main class="widget" data-widget="calculator"> <header class="header"> <div class="kicker">Quick math</div> <h1>Calcutoolator</h1> </header> <section class="screen" aria-live="polite"> <div class="expr" id="expr">Ready</div> <div class="result" id="result">0</div> </section> <section class="keys" aria-label="Calculator keys"> <button class="key" type="button" data-key="7">7</button> <button class="key" type="button" data-key="8">8</button> <button class="key" type="button" data-key="9">9</button> <button class="key operator" type="button" data-key="/">/</button> <button class="key" type="button" data-key="4">4</button> <button class="key" type="button" data-key="5">5</button> <button class="key" type="button" data-key="6">6</button> <button class="key operator" type="button" data-key="*">*</button> <button class="key" type="button" data-key="1">1</button> <button class="key" type="button" data-key="2">2</button> <button class="key" type="button" data-key="3">3</button> <button class="key operator" type="button" data-key="-">-</button> <button class="key" type="button" data-key="C">C</button> <button class="key" type="button" data-key="0">0</button> <button class="key operator" type="button" data-key="+">+</button> <button class="key equals" type="button" data-key="=">=</button> </section> </main> <script> const exprEl = document.querySelector("#expr"); const resultEl = document.querySelector("#result"); const keysEl = document.querySelector(".keys"); let expression = ""; let justEvaluated = false; function render() { exprEl.textContent = expression || "Ready"; } function clearCalculator() { expression = ""; resultEl.textContent = "0"; justEvaluated = false; render(); } function evaluateExpression() { if (!expression) { resultEl.textContent = "0"; return; } try { const safeExpression = expression.replace(/[^0-9+\-*/.()]/g, ""); const value = Function(`"use strict"; return (${safeExpression})`)(); resultEl.textContent = Number.isFinite(value) ? String(Math.round(value * 100000000) / 100000000) : "Error"; justEvaluated = true; } catch { resultEl.textContent = "Error"; justEvaluated = true; } render(); } function appendValue(value) { const isOperator = /[+\-*/]/.test(value); if (justEvaluated && !isOperator) { expression = ""; } expression += value; resultEl.textContent = ""; justEvaluated = false; render(); } function handleInput(value) { if (value === "C") { clearCalculator(); return; } if (value === "=") { evaluateExpression(); return; } appendValue(value); } keysEl.addEventListener("click", (event) => { const button = event.target.closest("button[data-key]"); if (!button) { return; } handleInput(button.dataset.key); }); window.addEventListener("keydown", (event) => { const allowedKeys = "0123456789+-*/."; if (allowedKeys.includes(event.key)) { handleInput(event.key); return; } if (event.key === "Enter" || event.key === "=") { event.preventDefault(); evaluateExpression(); return; } if (event.key === "Escape") { clearCalculator(); } }); render(); </script> </body> </html>
Move to Deleted?
will be moved to Deleted.
Cancel
Delete
Rename
Name
Cancel
Rename