Untitled

<html>
  <head>
    <title></title>
    <style>
      #display {
        background-color: #c0ffc0;
        display: block;
        width: 10cm;
        text-align: right;
        font-size: 24px;
      }
      button {
        background-color: #c0c0c0;
        color: #404040
        border: 3px outset #c0c0c0;
      }
      button.selected {
        border: 2px inset #8080ff;
        background-color: #c0c0ff;
        color: black;
        font-weight: bold;
      }
      input[type=number] {
        text-align: right;
      }
    </style>
    <script>
      let precision = 10;
      let inputType = 'b9';
      let display = '';
      let displayEl;
      let stackTbl;
      let stack = [];
      window.addEventListener('load', (e) => {
        const inputTypeEl = document.querySelector('#inputType');
        const precisionEl = document.querySelector('#precision');
        stackTbl = document.querySelector('#stack-tbl>tbody');
        displayEl = document.querySelector('#display');
        inputTypeEl.addEventListener('input',
             () => {
                inputType = inputTypeEl.value
             });
        precisionEl.addEventListener('input',
             () => {
                precision = parseInt(precisionEl.value)
                refreshStack();
              });
      });

      window.addEventListener('keypress', (e) => {
        console.log(e);
        console.log([display, precision, inputType]);
        if(inputType === 'b9'){
          if(/^[1-9]$/.test(e.key)){
            display += e.key;
          }
        }else if(inputType === 'dec'){
          if(/^[0-9]$/.test(e.key)){
            display += e.key;
          }
        }
        if(e.key === '.' && (display.indexOf('.') === -1)){
          display += '.';
        }
        if(e.key === '-' && display){
          if(display[0] === '-'){
            display = display.substr(1);
          }else{
            display = '-' + display;
          }
        }
        displayEl.innerText = display;
        if(e.key.toLowerCase() === 'enter'){
          stack.push(from_base(display, inputType === 'b9' ? 9 : 10));
          console.log(stack);
          refreshStack();
        }
      });
      function from_base(s, base){
        let i1 = 0;
        let r1 = 0;
        let r2 = 0;
        if(s[0] === '-'){
          return -from_base(s.substr(1), base);
        }
        // compute the integral part
        for(i1 = 0; i1 < s.length && s[i1] !== '.'; ++i1){
          r1 = base * r1 + Number(s[i1]);
        }
        // compute the fractionary part
        for(i2 = s.length-1; i2 > i1; --i1){
          r2 = (r2 + Number(s[i2])) / base;
        }
        return r1 + r2;
      }

      function refreshStack(){
        while(stackTbl.rows.length){
          stackTbl.rows.deleteRow(0);
        }
        for(let i = 0; i < stack.length; ++i){
          let row = stackTbl.insertRow(i);
          row.insertCell().textContent = i;
          row.insertCell().textContent = to_decimal(stack[i], precision);
          row.insertCell().textContent = to_base9(stack[i], precision);
        }
      }

      function to_base9(n, nplaces){
        let s = '';
        for(let i1 = 0; i1 < nplaces; ++i1){
          n = n * 9;
        }
        n = Math.round(n);
        while(n >= 1 || s.length < nplaces + 2){
          const t = Math.floor((n-1)/9);
          const r = n - 9*t;
          n = t;
          s = r.toString() + s;
          if(s.length == nplaces){
            s = '.' + s;
          }
        }
        return s;
      }


      function to_decimal(n, nplaces){
        let s = '';
        for(let i1 = 0; i1 < nplaces; ++i1){
          n = n * 10;
        }
        n = Math.round(n);
        while(n >= 1 || s.length < nplaces + 2){
          const t = Math.floor(n/10);
          const r = n - 10*t;
          n = t;
          s = r.toString() + s;
          if(s.length == nplaces){
            s = '.' + s;
          }
        }
        return s;
      }
    </script>
  </head>
  <body>
    <form>
       <label>Input format
         <select id="inputType">
           <option value="b9">Special Base 9 (1-9)</option>
           <option value="dec">Standard decimal</option>
         </select>
       </label>
       <br>
       <label>Output precision
         <input id="precision" type="number" min="0" max="15" step="1" value="10">
       </label>
       <hr>
       <div name="display" id="display">&nbsp;</div>
       <table id="stack-tbl" width="100%">
       <thead>
         <tr><td>position</td><td>Decimal</td><td>Special base 9</td></td>
       </thead>
       <tbody>
       </tbody>
       </table>
    </form>
  </body>

</html>