Link to sectionBasic example

by died

HTML

<!-- Learn about this code on MDN: https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement -->

<!DOCTYPE html>
<html>

  <head>
    <title>||Working with elements||</title>
  </head>

  <body>
    <div id="res">
    </div>
    <div id="btns">
      <button id="btn0" class="lightgreen btn">0</button>
      <button id="btn1" class="lightgreen btn">1</button>
      <button id="btnClr" class="darkgreen">C</button>
      <button id="btnEql" class="darkgreen">=</button>
      <button id="btnSum" class="black btn">+</button>
      <button id="btnSub" class="black btn">-</button>
      <button id="btnMul" class="black btn">*</button>
      <button id="btnDiv" class="black btn">/</button>
    </div>
  </body>

</html>

CSS

body {
  width: 33%;
}

#res {
  background-color: lightgray;
  border: solid;
  height: 48px;
  font-size: 20px;
}

.lightgreen {
  background-color: lightgreen;
  color: brown;
}

.darkgreen {
  background-color: darkgreen;
  color: white;
}

.black {
  background-color: black;
  color: red;
}

button {
  width: 25%;
  height: 36px;
  font-size: 18px;
  margin: 0px;
  float: left;
}

JavaScript

function add(a, b) {
  return (parseInt(a, 2) + parseInt(b, 2)).toString(2);
}

function sub(a, b) {
  return (parseInt(a, 2) - parseInt(b, 2)).toString(2);
}

function mul(a, b) {
  return (parseInt(a, 2) * parseInt(b, 2)).toString(2);
}

function div(a, b) {
  return (parseInt(a, 2) / parseInt(b, 2)).toString(2);
}
var res = document.getElementById('res');
var clr = document.getElementById('btnClr');
var eql = document.getElementById('btnEql');

var btns = document.querySelectorAll('.btn');
btns.forEach(function(button, index) {
  button.addEventListener('click', function(e) {
    res.innerHTML = res.innerHTML + e.target.innerHTML;
  });
});

clr.addEventListener('click', function(e) {
  res.innerHTML = '';
});
eql.addEventListener('click', function(e) {

  let str = res.innerHTML;
  const check = /^\d+[\+|\-|\\*|\/]\d+$/gm;
  const getNum = /\d+/gm;
  const getSymbol = /[\+|\-|\\*|\/]/gm;
  var r = check.test(str);
  if (r) {
    var num = str.match(getNum);
    var symbol = str.match(getSymbol);
    var result = '';
    switch (symbol[0]) {
      case '+':
        result = add(...num);
        break;
      case '-':
        result = sub(...num);
        break;
      case '*':
        result = mul(...num);
        break;
      case '/':
        result = div(...num);
        break;
    }
    res.innerHTML = result;
  } else {
    res.innerHTML = '';
  }

});