JSFiddle - React, Tailwind, and code Playground

by lchau

HTML

<form>
    <fieldset>
        <legend class="bold">Integer to String</legend>
        <div>
            <label for="value">Value</label>
            <input type="text" id="value" />
        </div>
        <div>
            <label for="base">Base</label>
            <input type="text" id="base" />
        </div>
        <div>
            <label for="output">Output</label>
            <input type="text" id="output" readonly="readonly" />
        </div>
        <div class="right top05">
            <input type="button" id="convertButton" value="Convert" />
            <input type="reset" value="Clear" />
        </div>
    </fieldset>
</form>

CSS

body {
  font: normal 0.75em sans-serif;
}
input[type="text"] {
  border: 1px solid #cccccc;
  padding: 2px;
  width: 250px;
}
input[id="value"]:focus,
input[id="base"]:focus {
  background-color: #ffffe0;
}
.bold {
  font-weight: bold;
}
fieldset {
  border: 1px solid #bbbbbb;
  max-width: 400px;
}
label {
  display: inline-block;
  text-align: right;
  width: 75px;
}
label:after {
  content: ":";
}
.right {
  float: right;
}

JavaScript

/**
 * Assumptions (for brevity):
 *   - Prevents invalid input via event.stopPropagation()
 *   - Value/base validation exists (manual input, copy and paste)
 *   - Value/base also metakeys (ctrl, shift, alt, arrow keys, backspace, delete) for usability
 */
(function () {
  function getInputValue(elementId) {
    return document.getElementById(elementId).value;
  }

  document.getElementById("convertButton").onclick = function () {
    var base = getInputValue("base");
    var value = getInputValue("value");
    var output = document.getElementById("output");

    try {
      output.value = integerToString(value, base);
    } catch (e) {
      output.value = e.name + ": " + e.message;
    }
  };
})();

/**
 * Checks if the value is an integer.
 *
 * @param {any} value - the value to check
 * @throws {NumberFormatException} - if the value is not an integer
 */
function assertIsInteger(value) {
  if (!isInteger(value)) {
    throw {
      "name": "NumberFormatException",
      "message": "Value must be an integer"
    };
  }
}

/**
 * Checks if the object or value is an integer.
 *
 * @param {any} n - the value to check
 * @returns {Boolean} - true if the value is an integer, false otherwise.
 *
 */
function isInteger(n) {
  var MAX_VALUE = Math.pow(2, 31) - 1;
  var MIN_VALUE = -MAX_VALUE;

  return (function () {
    if (isString(n) && n.length === 0) {
      return false;
    }
    return isFinite(n)
        && !isNaN(n)
        && n <= MAX_VALUE
        && n >= MIN_VALUE
        && ((n % 1) == 0);
  })();
}

/***
 * Checks of the object is a string.
 *
 * @param {any} s - the object to check
 * @returns {Boolean} - true if the value is a string, false otherwise
 */
function isString(s) {
  return typeof s === "string" || s instanceof String;
}

/**
 * Converts a number to the specified string representation.
 *
 * @param {Number} value - the integer value to convert
 * @param {Number} [numberBase] - the radix to use for conversion (default=10)
 * @throws...