<div class=panel><div class=inner>
  <span class=field-header>Type a number:</span>
  <input type=field oninput='document.getElementById("result").textContent = num2wordz(+this.value)'/>
  <span id=result></span>
  </div></div>
.panel {
  position: relative;
  left: calc(50% - 250px/2);
  width: 250px;
  top: 20px;
  height: fit-content;
  border: 1px solid #ddd;
  background-image: linear-gradient(10deg, white, #eee);
  filter: drop-shadow(2px 2px 2px black);
  
  font-family: verdana;
  font-size: 0.8em;
}
.inner {
  position: relative;
  margin: 30px 10px;
}
.field-header {
  position: relative;
  width: 50%;
  text-align: right;
}
input {
  position: relative;
  width: 50%;
}
#result {
  width: 100%;
  text-align: center;
  display: inline-block;
  margin-top: 10px;
  font-size: 1.1em;
  line-height: 1.2em;
}

const ones = [
    "", "one", "two", "three","four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen"
  ],
  tens = [
    "", "", "twenty", "thirty", "forty", "fifty", "sixty", "seventy", "eighty", "ninety"
  ],
  illionStrings = ["", "thousand", "million", "billion", "gazillion"]

num2wordz = (n, prefix = "", showZero = true) => {
  const digitCount = String(Math.floor(n)).length,
    illionIndex = Math.floor((digitCount - 1) / 3),
    baseIllion = Math.round(Math.pow(1000, illionIndex));
  return n < 0
    ? "negative " + num2wordz(-n)
    : n == 0
    ? showZero
      ? "nada"
      : ""
    : prefix +
      (n < 20
        ? ones[n]
        : n < 100
        ? tens[Math.floor(n / 10)] + num2wordz(n % 10, " ", false)
        : n < 1000
        ? ones[Math.floor(n / 100)] +
          " hundred" +
          num2wordz(n % 100, " and ", false)
        : illionStrings[illionIndex]
        ? num2wordz(Math.floor(n / baseIllion), "", false) +
          " " +
          illionStrings[illionIndex] +
          num2wordz(n % baseIllion, ", ", false)
        : "🤯");
};

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.