Calculator Widget

<div class="card border-0 shadow" style="max-width:240px"><div class="card-body">
  <input class="form-control text-end fw-bold mb-2" id="calcOut" value="0" readonly>
  <div class="row row-cols-4 g-1" id="calcKeys">
    <div class="col"><button class="btn btn-light w-100">7</button></div><div class="col"><button class="btn btn-light w-100">8</button></div><div class="col"><button class="btn btn-light w-100">9</button></div><div class="col"><button class="btn btn-outline-primary w-100">÷</button></div>
    <div class="col"><button class="btn btn-light w-100">4</button></div><div class="col"><button class="btn btn-light w-100">5</button></div><div class="col"><button class="btn btn-light w-100">6</button></div><div class="col"><button class="btn btn-outline-primary w-100">×</button></div>
    <div class="col"><button class="btn btn-light w-100">1</button></div><div class="col"><button class="btn btn-light w-100">2</button></div><div class="col"><button class="btn btn-light w-100">3</button></div><div class="col"><button class="btn btn-outline-primary w-100">−</button></div>
    <div class="col"><button class="btn btn-light w-100">0</button></div><div class="col"><button class="btn btn-warning w-100">C</button></div><div class="col"><button class="btn btn-success w-100">=</button></div><div class="col"><button class="btn btn-outline-primary w-100">+</button></div>
  </div>
</div></div>

var out=document.getElementById('calcOut'),expr='';
var map={'÷':'/','×':'*','−':'-','+':'+'};
document.querySelectorAll('#calcKeys button').forEach(function(b){b.onclick=function(){var t=b.textContent;if(t==='C'){expr='';out.value='0'}else if(t==='='){try{expr=String(Function('return '+expr)()||0);out.value=expr}catch(e){out.value='Error';expr=''}}else{expr+=(map[t]||t);out.value=expr}}});