<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:#f8fafc; border-radius:25px; box-shadow:0 15px 35px rgba(0,0,0,.08); direction:ltr; border:1px solid #e2e8f0 } #display{ width:100%; height:85px; border:none; border-radius:18px; font-size:28px; padding:18px; text-align:right; background:#ffffff; color:#1e293b; margin-bottom:18px; box-shadow:inset 0 2px 8px rgba(0,0,0,.06) } .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:#e2e8f0; color:#1e293b; font-weight:600; transition:.25s ease; box-shadow:0 4px 10px rgba(0,0,0,.06) } button:hover{ transform:translateY(-3px); background:#dbeafe } button:active{ transform:scale(.96) } .equal{ grid-row:span 2; background:#38bdf8; color:#fff } .equal:hover{ background:#0ea5e9 } /* أزرار العمليات */ button.operator{ background:#c7d2fe; color:#3730a3 } button.operator:hover{ background:#a5b4fc } /* زر المسح */ button.clear{ background:#fecaca; color:#991b1b } button.clear:hover{ background:#fca5a5 } /* متجاوب */ @media(max-width:600px){ .scientific-calculator{ padding:18px } button{ height:55px; font-size:18px } #display{ height:70px; font-size:24px } } </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>
