WEBLEB
Home
Editor
Accedi
Pro
Italiano
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Calcolatrice Semplice
1592
Andev.web
Apri nell'Editor
Pubblica il Tuo Codice
Consigliato
17 July 2025
Calcolatrice scientifica
22 January 2025
password di accesso semplice
19 May 2025
CONTEGGIO SEMPLICE
HTML
Copy
Andev Web
AC
DEL
%
/
7
8
9
*
4
5
6
-
1
2
3
+
0
00
.
=
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap"); * { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; } body { height: 100vh; display: flex; align-items: center; justify-content: center; background: #e0e3eb; } .container { position: relative; max-width: 300px; width: 100%; border-radius: 12px; padding: 10px 20px 20px; background: #fff; box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05); } .display { height: 80px; width: 100%; outline: none; border: none; text-align: right; margin-bottom: 10px; font-size: 25px; color: #000e1a; background-color: #f1f1f1; pointer-events: none; caret-color: transparent; border-radius: 10px; padding: 15px 20px; } .buttons { display: grid; grid-gap: 10px; grid-template-columns: repeat(4, 1fr); } .buttons button { padding: 10px; border-radius: 6px; border: none; font-size: 20px; cursor: pointer; background-color: #eee; transition: background-color 0.3s ease; } .buttons button:hover { background-color: #d3d3d3; } .buttons button:active { transform: scale(0.99); } .operator { color: #2f9fff; }
JS
Copy
const display = document.querySelector(".display"); const buttons = document.querySelectorAll("button"); const specialChars = ["%", "*", "/", "-", "+", "="]; let output = ""; const calculate = (btnValue) => { display.focus(); if (btnValue === "=" && output !== "") { try { output = eval(output.replace("%", "/100")); } catch { output = "Error"; } } else if (btnValue === "AC") { output = ""; } else if (btnValue === "DEL") { output = output.toString().slice(0, -1); } else { if (specialChars.includes(btnValue) && specialChars.includes(output[output.length - 1])) { return; } if (output === "" && specialChars.includes(btnValue)) return; output += btnValue; } display.value = output; }; buttons.forEach((button) => { button.addEventListener("click", (e) => calculate(e.target.dataset.value)); }); document.addEventListener("keydown", (event) => { const key = event.key; const allowedKeys = [...Array(10).keys(), ".", "Enter", "Backspace", "%", "*", "/", "-", "+"]; if (allowedKeys.includes(key) || key === "Backspace") { let value = key === "Enter" ? "=" : key; value = key === "Backspace" ? "DEL" : value; calculate(value); } });