<div class="pro-calculator"> <input type="text" id="display" disabled> <div class="buttons"> <button onclick="clearDisplay()">C</button> <button onclick="appendValue('/')">÷</button> <button onclick="appendValue('*')">×</button> <button onclick="delValue()">⌫</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> <button onclick="appendValue('%')">%</button> </div> </div> <style> .pro-calculator{ max-width:420px; margin:40px auto; padding:25px; background:#111827; border-radius:25px; box-shadow:0 20px 45px rgba(0,0,0,.3); direction:ltr } #display{ width:100%; height:90px; border:none; border-radius:18px; font-size:32px; padding:20px; text-align:right; background:#1f2937; color:#fff; margin-bottom:20px } .buttons{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px } button{ height:70px; border:none; border-radius:18px; font-size:24px; cursor:pointer; background:#374151; color:#fff; transition:.2s } button:hover{ transform:scale(1.05) } .equal{ grid-row:span 2; background:#10b981 } </style> <script> let display=document.getElementById("display"); function appendValue(val){ display.value+=val; } function clearDisplay(){ display.value=""; } function delValue(){ display.value=display.value.slice(0,-1); } function calculate(){ try{ display.value=eval(display.value); }catch{ display.value="خطأ"; } } document.addEventListener("keydown",e=>{ if("0123456789+-*/.%".includes(e.key)) appendValue(e.key); if(e.key==="Enter") calculate(); if(e.key==="Backspace") delValue(); if(e.key==="Escape") clearDisplay(); }); </script>
