<div class="scientific-calculator"> <input type="text" id="display" readonly> <div class="buttons"> <button onclick="clearDisplay()">C</button> <button onclick="delValue()">⌫</button> <button onclick="appendValue('(')">(</button> <button onclick="appendValue(')')">)</button> <button onclick="appendValue('%')">%</button> <button onclick="appendValue('sin(')">sin</button> <button onclick="appendValue('cos(')">cos</button> <button onclick="appendValue('tan(')">tan</button> <button onclick="appendValue('log(')">log</button> <button onclick="appendValue('ln(')">ln</button> <button onclick="appendValue('sqrt(')">√</button> <button onclick="appendValue('π')">π</button> <button onclick="appendValue('^')">^</button> <button onclick="appendValue('/')">÷</button> <button onclick="appendValue('*')">×</button> <button onclick="appendValue('7')">7</button> <button onclick="appendValue('8')">8</button> <button onclick="appendValue('9')">9</button> <button onclick="appendValue('-')">−</button> <button onclick="appendValue('4')">4</button> <button onclick="appendValue('5')">5</button> <button onclick="appendValue('6')">6</button> <button onclick="appendValue('+')">+</button> <button onclick="appendValue('1')">1</button> <button onclick="appendValue('2')">2</button> <button onclick="appendValue('3')">3</button> <button class="equal" onclick="calculate()">=</button> <button onclick="appendValue('0')">0</button> <button onclick="appendValue('.')">.</button> </div> </div> <style> .scientific-calculator{ max-width:520px; margin:40px auto; padding:25px; background:#1e293b; border-radius:25px; box-shadow:0 18px 45px rgba(15,23,42,.18); direction:ltr; border:1px solid rgba(255,255,255,.08); } #display{ width:100%; height:85px; border:none; border-radius:18px; font-size:28px; padding:18px; text-align:right; background:#f8fafc; color:#0f172a; margin-bottom:18px; font-weight:600; box-shadow:inset 0 3px 8px rgba(0,0,0,.05); } .buttons{ display:grid; grid-template-columns:repeat(5,1fr); gap:12px; } button{ height:65px; border:none; border-radius:16px; font-size:20px; cursor:pointer; background:#334155; color:#f8fafc; transition:.25s ease; font-weight:600; box-shadow:0 4px 10px rgba(0,0,0,.08); } button:hover{ transform:translateY(-3px); background:#475569; } button:active{ transform:scale(.96); } .equal{ grid-row:span 2; background:#38bdf8; color:#fff; font-size:24px; } .equal:hover{ background:#0ea5e9; } </style> <script> const display = document.getElementById("display"); function appendValue(v){ display.value += v; } function clearDisplay(){ display.value = ""; } function delValue(){ display.value = display.value.slice(0,-1); } /* ========================= PRO ENGINE (Parser) ========================= */ function factorial(n){ if(n < 0) return NaN; let r = 1; for(let i=2;i<=n;i++) r *= i; return r; } function normalize(expr){ expr = expr.replace(/π/g, Math.PI); expr = expr.replace(/sqrt\(/g, "Math.sqrt("); expr = expr.replace(/sin\(/g, "Math.sin("); expr = expr.replace(/cos\(/g, "Math.cos("); expr = expr.replace(/tan\(/g, "Math.tan("); expr = expr.replace(/log\(/g, "Math.log10("); expr = expr.replace(/ln\(/g, "Math.log("); expr = expr.replace(/\^/g, "**"); // % expr = expr.replace(/(\d+(\.\d+)?)%/g, "($1/100)"); // implicit multiplication (PRO LEVEL) expr = expr .replace(/(\d)\(/g, "$1*(") .replace(/\)(\d)/g, ")*$1") .replace(/\)\(/g, ")*(") .replace(/(\d)(Math\.PI)/g, "$1*$2") .replace(/(Math\.PI)(\d)/g, "$1*$2"); return expr; } /* SAFE EVAL ENGINE */ function safeEval(expr){ return new Function("Math", "return " + expr)(Math); } function calculate(){ try{ let expr = normalize(display.value); let result = safeEval(expr); if(!isFinite(result)){ display.value = "خطأ"; return; } display.value = result; }catch(e){ display.value = "خطأ"; } } document.addEventListener("keydown", e => { if(/[\d+\-*/().%^]/.test(e.key)){ appendValue(e.key); } if(e.key === "Enter") calculate(); if(e.key === "Backspace") delValue(); if(e.key === "Escape") clearDisplay(); }); </script>
