<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:#0f172a; border-radius:25px; box-shadow:0 20px 50px rgba(0,0,0,.35); direction:ltr } #display{ width:100%; height:85px; border:none; border-radius:18px; font-size:28px; padding:18px; text-align:right; background:#1e293b; color:#fff; margin-bottom:18px } .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:#fff; transition:.2s } button:hover{ transform:scale(1.05) } .equal{ grid-row:span 2; background:#10b981 } </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); } function fixExpression(expr){ // الثوابت والدوال expr = expr.replace(/π/g, "Math.PI"); expr = expr.replace(/\^/g, "**"); 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("); // إصلاح النسبة المئوية (يدعم 50% + 20% + ...) expr = expr.replace(/(\d+(\.\d+)?)%/g, "($1/100)"); // 🔥 الضرب الضمني (مهم جدًا) expr = expr.replace(/(\d)(Math\.PI)/g, "$1*$2"); expr = expr.replace(/(Math\.PI)(\d)/g, "$1*$2"); expr = expr.replace(/(\d)\(/g, "$1*("); expr = expr.replace(/\)(\d)/g, ")*$1"); expr = expr.replace(/\)\(/g, ")*("); return expr; } function calculate(){ try{ let expr = display.value; expr = fixExpression(expr); const result = Function('"use strict"; return (' + expr + ')')(); display.value = result; } catch(e){ display.value = "خطأ"; } } // Keyboard support (محسن) 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>
