HTML & CSS: 23-05-2018

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>

  <style>

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
   div, button {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    background: #eee;
    margin: 10px;
    float: left;
    text-align: center;
    color: red;
    line-height: 30px;
   }

   #display {
    width: 100%;
    height: 40px;
    background: black;
    color: white;
   }

   #back {
    background: red;
    color: white;
   }
  </style>
</head>
<body>
    <div id="display"></div>

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <div>8</div>
    <div>9</div>
    <div>0</div>
    <button id="back">C</button>

  <script>
    var items = document.querySelectorAll('div');

    var display = document.querySelector('#display');

    console.log(items);
    for(var i = 0; i< items.length; i++) {
      items[i].addEventListener('click', showAlert);
    }

    function showAlert(event) {
     // console.log(event.target.innerHTML);
     display.innerHTML += event.target.innerHTML;
    }
    document.getElementById('back').addEventListener('click', eraseLast);
    function eraseLast() {
      var myString = display.innerHTML;
      myString = myString.substr(0, myString.length-1);

      display.innerHTML = myString;
    }
  </script>
</body>
</html>