<h3 id="decimalbinaryoctalhexconverter">Decimal, Binary, Octal, Hex Converter</h3>
<p>Type a decimal, binary, octal, or hexadecimal number in the corresponding input box and the conversion for the other three bases will be given.</p>
<div class="form-group">
    <label for="decimal-field" class="control-label">Decimal</label>
    <div class="input-group input-group-md">
        <span class="input-group-addon">0d</span> 
        <input type="text" class="form-control" id="decimal-field" name="decimal-field">
    </div>
</div>
<div class="form-group">
    <label for="binary-field" class="control-label">Binary</label>
    <div class="input-group input-group-md">
        <span class="input-group-addon">0b</span> 
        <input type="text" class="form-control" id="binary-field" name="binary-field">
    </div>
</div>
<div class="form-group">
    <label for="octal-field" class="control-label">Octal</label>
    <div class="input-group input-group-md">
        <span class="input-group-addon">0o</span> 
        <input type="text" class="form-control" id="octal-field" name="octal-field">
    </div>
</div>
<div class="form-group">
    <label for="hexadecimal-field" class="control-label">Hexadecimal</label>
    <div class="input-group input-group-md">
        <span class="input-group-addon">0x</span> 
        <input type="text" class="form-control" id="hexadecimal-field" name="hexadecimal-field">
    </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$( document ).ready(function() {
  console.log('ready');
  $('#decimal-field').on('input', function() {
      convert('decimal-field', 10);
  });
  $('#binary-field').on('input', function() {
      convert('binary-field', 2);
  });
  $('#octal-field').on('input', function() {
      convert('octal-field', 8);
  });
  $('#hexadecimal-field').on('input', function() {
      convert('hexadecimal-field', 16);
  });

  function convert(changed, base) {
    if ($('#' + changed).val().length < 1 || isNaN(parseInt($('#' + changed).val(), base))) {
      $('#decimal-field').val('');
      $('#binary-field').val('');
      $('#octal-field').val('');
      $('#hexadecimal-field').val('');
      return;
    }
  
    var input = parseInt($('#' + changed).val(), base)
    var dec = '';
    var bin = '';
    var oct = '';
    var hex = '';
    
    // NOTE: Forced to use localCompare() since testing for equality 
    // the normal way would get screwed up by Markdown. If the strings
    // are equal, localCompare() returns 0
    if (!changed.localeCompare('decimal-field')) {
      dec = input.toString(10)
      bin = input.toString(2);
      hex = input.toString(16);
      oct = input.toString(8);
    } else if (!changed.localeCompare('binary-field')) {
      bin = input.toString(2)
      dec = input.toString(10);
      hex = input.toString(16);
      oct = input.toString(8);
    } else if (!changed.localeCompare('octal-field')) {
      oct = input.toString(8)
      bin = input.toString(2);
      hex = input.toString(16);
      dec = input.toString(10);
    } else if (!changed.localeCompare('hexadecimal-field')) {
      hex = input.toString(16)
      bin = input.toString(2);
      dec = input.toString(10);
      oct = input.toString(8);
    }
    
    $('#decimal-field').val(dec);
    $('#binary-field').val(bin);
    $('#octal-field').val(oct);
    $('#hexadecimal-field').val(hex);
  }
});
</script>