JSFiddle - React, Tailwind, and code Playground

by badfreja

HTML

<h1>Numbers</h1>
<div id="numbers"> </div>

JavaScript

var ones, tens, teens, numbers;
var container, node;

buildAllTheNumbers()
printAllTheNumbers();

function capitalize(string)
{
    return string[0].toUpperCase() + string.slice(1);
}

function buildAllTheNumbers() {
  init();
  buildTeensAndTens(teens, 'teen');
  buildTeensAndTens(tens, 'ty');
  buildEdgeCases();
  buildTwoDigitNums();
}

function buildEdgeCases() {
  for (var i = 1; i <= 10; i++) {
    if (!numbers[i - 1]) numbers[i - 1] = capitalize(ones[i - 1]);
    if (!numbers[i + 10]) numbers[i + 10] = capitalize(teens[i - 1]);
    if (!numbers[i * 10] && i !== 10) numbers[i * 10] = capitalize(tens[i - 1]);
  }
}

function buildTeensAndTens(arr, postfix) {
  for (var i = 1; i < 10; i++) {
    /* if the number is 'eight', it strips the first 't' from the postfix
       to avoid outputting 'eightteen' and 'eightty' */
    if (i === 8) {
      shortfix = postfix.substring(1);
      arr[i - 1] = ones[i] + shortfix;
    };
    if (!arr[i - 1]) {
      arr[i - 1] = ones[i] + postfix;
    }
  }
}

function buildTwoDigitNums() {
  for (var i = 1; i < 9; i++) {
    for (var j = 0; j <= 9; j++) {
      var index = (i + 1) * 10 + j;
      /* skips creating multiple of 10 numbers, which are already being
       generated using the  buildTeensAndTens() method */
      if (j) {
      	var number = capitalize(tens[i] + ' ' + ones[j]);
        numbers[index] = number;
      }
    }
  }
}

function printAllTheNumbers() {
  container = document.getElementById('numbers');
  container.innerHTML = "";

  setTimeout(function() {
    for (var i = 1; i < numbers.length; i++) {
      var number = document.createTextNode(i + ': ' + numbers[i]);
      node = document.createElement("p");
      node.appendChild(number);
      container.appendChild(node);
    }
  }, 1000);
}

function init() {
  ones = ['zero', 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine'];
  teens = ['eleven', 'twelve', 'thirteen', 'fourteen', 'fifteen'];
  tens = ['ten', 'twenty', 'thirty',...