html calculator

Code:

<!-- Simple Calculator Widget -->

<div style="max-width:320px; margin:2rem auto; padding:1rem; background:var(--surface); border:1px solid var(--border); border-radius:12px;">

  <input type="text" id="calcDisplay" readonly style="width:100%; padding:12px; font-size:1.5rem; text-align:right; margin-bottom:10px; background:#1a1d27; border:none; color:var(--text); border-radius:8px;">

  <div style="display:grid; grid-template-columns:repeat(4,1fr); gap:8px;">

    <button onclick="clearCalc()" style="padding:15px; font-size:1.1rem;">C</button>

    <button onclick="appendToDisplay('(')" style="padding:15px; font-size:1.1rem;">(</button>

    <button onclick="appendToDisplay(')')" style="padding:15px; font-size:1.1rem;">)</button>

    <button onclick="appendToDisplay('/')" style="padding:15px; font-size:1.1rem;">/</button>

    <button onclick="appendToDisplay('7')" style="padding:15px; font-size:1.1rem;">7</button>

    <button onclick="appendToDisplay('8')" style="padding:15px; font-size:1.1rem;">8</button>

    <button onclick="appendToDisplay('9')" style="padding:15px; font-size:1.1rem;">9</button>

    <button onclick="appendToDisplay('*')" style="padding:15px; font-size:1.1rem;">×</button>

    <button onclick="appendToDisplay('4')" style="padding:15px; font-size:1.1rem;">4</button>

    <button onclick="appendToDisplay('5')" style="padding:15px; font-size:1.1rem;">5</button>

    <button onclick="appendToDisplay('6')" style="padding:15px; font-size:1.1rem;">6</button>

    <button onclick="appendToDisplay('-')" style="padding:15px; font-size:1.1rem;">−</button>

    <button onclick="appendToDisplay('1')" style="padding:15px; font-size:1.1rem;">1</button>

    <button onclick="appendToDisplay('2')" style="padding:15px; font-size:1.1rem;">2</button>

    <button onclick="appendToDisplay('3')" style="padding:15px; font-size:1.1rem;">3</button>

    <button onclick="appendToDisplay('+')" style="padding:15px; font-size:1.1rem;">+</button>

    <button onclick="appendToDisplay('0')" style="padding:15px; font-size:1.1rem; grid-column:span 2;">0</button>

    <button onclick="appendToDisplay('.')" style="padding:15px; font-size:1.1rem;">.</button>

    <button onclick="calculate()" style="padding:15px; font-size:1.1rem; background:var(--accent); color:#000;">=</button>

  </div>

</div>

<script>

function appendToDisplay(value) {

  document.getElementById('calcDisplay').value += value;

}

function clearCalc() {

  document.getElementById('calcDisplay').value = '';

}

function calculate() {

  try {

    document.getElementById('calcDisplay').value = eval(document.getElementById('calcDisplay').value);

  } catch(e) {

    document.getElementById('calcDisplay').value = 'Error';

  }

}

</script>