Number pad

number_pad.js

((name)=>{
  const container = 
    document.getElementById(name) ||
    document.createElement("div");
  container.id = name;
  var htm = `
<div class="-container">${content()}</div>
<style>
  #${name} .-container {
    padding: 2vw 32vw;
  }
  #{name} .-num {
    display: inline-block;
    width: 10vw;
    line-height: 10vw;
    font-size: 4vw;
    background: #ededed;
    text-align: center;
    margin: 1vw;
    cursor: pointer;
  }
  .-num.-clear {
    padding: 0 6vw;
  }
</style>
`;

  function content(){
    var count = 10, op = "";
    op += `<div class="-input"></div>`;
    while (count--){
      op += `<div class="-num">${count}</div>`
    }
    op += `<div class="-num -clear">clear</div>`;
    return op;
  }

  function toArray(collection){
    return Array.prototype.slice.call(collection, 0);
  }
  
  (()=>{//init
    if (!container.innerHTML) 
      document.body.insertBefore(container, document.body.childNodes[0]);
    if (container.innerHTML !== htm)
      container.innerHTML = htm;

    const input = container.querySelector(".-input"),
          nums = toArray(container.querySelectorAll(".-num"));

    nums.forEach(num=>{
      num.onclick = e=>{
       if (parseInt(e.target.innerText)){
         input.innerText += e.target.innerText;
       } else {
         input.innerText = "";
       }        
      };
    });
    
  })();  
})("app");