Калькулятор IOS 8 для сайта на JS + CSS

<div id="adding_machine">
  <div class="calculating">
  <span class="akopasned">C</span>
  <div class="udesanag"></div>
  </div>
   
  <div class="poviden">
  <span>7</span>
  <span>8</span>
  <span>9</span>
  <span class="lodebas">+</span>
  <span>4</span>
  <span>5</span>
  <span>6</span>
  <span class="lodebas">-</span>
  <span>1</span>
  <span>2</span>
  <span>3</span>
  <span class="lodebas">÷</span>
  <span>0</span>
  <span>.</span>
  <span class="amipod">=</span>
  <span class="lodebas">x</span>
  </div>
</div>

#adding_machine {
  width: 330px;
  height: auto;
  overflow: hidden;
  margin: 100px auto;
  padding: 22px 22px 10px;
  position: relative;
  background: rgb(47 47 47 / 40%);
  border-radius: 3px;
  box-shadow: 0px 9px 10px 0px rgb(27 27 27 / 47%);
}

.calculating span.akopasned {
  position:absolute;
  z-index:6;
   
}

.calculating .udesanag {
  height: 82px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  padding: 22px 12px;
  background: rgb(19 19 19 / 23%);
  font-size: 30px;
  font-weight: normal;
  line-height: 39px;
  color: #f7f6f6;
  text-shadow: 1px 1px 2px rgb(23 22 22 / 29%);
  text-align: right;
  letter-spacing: 1px;
}

.poviden, .calculating {overflow: hidden;}

.poviden span, .calculating span.akopasned {
  float: left;
  position: relative;
  top: 0;
  cursor: pointer;
  width: 66px;
  height: 56px;
  background: rgb(18 18 18 / 50%);
  border-radius: 3px;
  box-shadow: 0px 4px rgb(12 12 12 / 20%);
  margin: 0 7px 11px 0;
  color: #bbb5b5;
  line-height: 56px;
  text-align: center;
  user-select: none;
  transition: all 0.2s ease;
}

.poviden span.lodebas {
  background: rgb(10 125 125 / 64%);
  margin-right: 0;
}

.poviden span.amipod {
  color: #7a8056;
}

.calculating span.akopasned {
  background: rgb(31 31 31 / 0%);
  box-shadow: none;
  color: #bdb7b7;
  width: 60px;
  left: 5px;
  /* padding: 0px 8px 10px 8px; */
  line-height: 59px;
}

.poviden span:hover {
  background: rgb(230 230 230 / 80%);
  color: #1f1d1d;
}

.poviden span.amipod:hover {
  background: #a6b157;
  color: #f7f3f3;
}

.calculating span.akopasned:hover {
  border-radius: 190px;
  background: rgb(27 26 26 / 10%);
  color: #f9f5f5;
}

.poviden span:active {
  box-shadow: 0px 0px rgba(0, 0, 0, 0.2);
  top: 4px;
}

.poviden span.amipod:active {
  box-shadow: 0px 0px #717a33;
  top: 4px;
}

.calculating span.akopasned:active {
  top: 4px;
  box-shadow: 0px 0px #d3545d;
}

var keys = document.querySelectorAll('#adding_machine span');
var operators = ['+', '-', 'x', '÷'];
var decimalAdded = false;

for(var i = 0; i < keys.length; i++) {
  keys[i].onclick = function(e) {
   
  var input = document.querySelector('.udesanag');
  var inputVal = input.innerHTML;
  var btnVal = this.innerHTML;
  var total;
  if(btnVal == 'C') {
  input.innerHTML = '';
  decimalAdded = false;
  }
   
  else if(btnVal == '=') {
  var equation = inputVal;
  var lastChar = equation[equation.length - 1];
   
  equation = equation.replace(/x/g, '*').replace(/÷/g, '/');
   
  if(operators.indexOf(lastChar) > -1 || lastChar == '.')
  equation = equation.replace(/.$/, '');
   
  if(equation)
  {
  total = eval(equation);
  if(total.toString().indexOf('.') != -1)
  total= total.toFixed(2);
   
  input.innerHTML = total;
  }
   
  decimalAdded = false;
  }
   
   
  else if(operators.indexOf(btnVal) > -1) {
   
  var lastChar = inputVal[inputVal.length - 1];
   
  if(inputVal != '' && operators.indexOf(lastChar) == -1)  
  input.innerHTML += btnVal;
   
  else if(inputVal == '' && btnVal == '-')  
  input.innerHTML += btnVal;
   
  if(operators.indexOf(lastChar) > -1 && inputVal.length > 1) {
  input.innerHTML = inputVal.replace(/.$/, btnVal);
  }
   
  decimalAdded =false;
  }
   
  else if(btnVal == '.') {
  if(!decimalAdded) {
  input.innerHTML += btnVal;
  decimalAdded = true;
  }
  }
   
  else {
  input.innerHTML += btnVal;
  }
   
  e.preventDefault();
  }  
}