<div class="flex">
  <label for="start">
    Starting Base:
    <input id="start" type="number" min="2" max="36" value="2">
  </label>
  <label for="convert">
    Convert from:
    <input id="convert" type="text">
  </label>
  <label for="end">
    Ending Base:
    <input id="end" type="number" min="2" max="36" value="10">
  </label>
  <div class="result">
    Result: <span>-
    </span>
  </div>
</div>
.flex {
  display: flex;
  flex-direction: column;
}

.flex label {
  margin-bottom: 10px;
}
$('input').on('change', function() {
  var convertVal = $('#convert').val();
  var startVal = $('#start').val();
  var endVal = $('#end').val();
  var res = convertBase(convertVal, startVal, endVal);
  $('.result span').text(res);
});


//https://stackoverflow.com/questions/1337419/how-do-you-convert-numbers-between-different-bases-in-javascript
function convertBase(val, base1, base2) {
  if (typeof val == 'number') {
    return parseInt(String(val)).toString(base2);
  } else {
    return parseInt(val.toString(), base1).toString(base2);
  }
}

External CSS

  1. https://codepen.io/tutsplus/pen/wrmOWP.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js