JSFiddle - React, Tailwind, and code Playground

by lchau

JavaScript

// imports
// const _ = require('lodash');
const { 
  applyMiddleware, 
  compose, 
  combineReducers,
  createStore 
} = Redux;

const sample = _.sample;
_.mixin({
  sample(collection, replacement) {

  }
});

const KeyCode = Object.freeze({
  ENTER: 13
});
// Utility classes
class NATO {
  static get ALPHABET() {
    return Object.freeze({
      A: 'alpha',
      B: 'bravo',
      C: 'charlie',
      D: 'delta',
      E: 'echo',
      F: 'foxtrot',
      G: 'golf',
      H: 'hotel',
      I: 'india',
      J: 'juliet',
      K: 'kilo',
      L: 'lima',
      M: 'mike',
      N: 'november',
      O: 'oscar',
      P: 'papa',
      Q: 'quebec',
      R: 'romeo',
      S: 'sierra',
      T: 'tango',
      U: 'uniform',
      V: 'victor',
      W: 'whiskey',
      X: 'xray',
      Y: 'yankee',
      Z: 'zulu'
    });
  }

  static match(str, letter) {
    const word = NATO.ALPHABET[letter];
    if (word) {
      return String(str).toLowerCase() === word;  
    }
    return false;
  }

  // move to state store?
  static createDistribution() {
    return _.reduce(NATO.ALPHABET, (accumulator, value, key) => {
      accumulator[key] = 0;
      return accumulator;
    }, {});
  }

  static nextLetter(distribution) {
    const ch = _.sample(NATO.ALPHABET, 1).charAt(0).toUpperCase();
    if (_.isPlainObject(distribution)) {
      distribution[ch] = distribution[ch] || 0;
      distribution[ch]++; 
    }
    return ch;
  }
}

// Actions


// Initialization
const store = createStore(combineReducers({

}));


const DISTRIBUTION = NATO.createDistribution();

const $input = document.getElementById('input');
const $correct = document.getElementById('correct');
const $total = document.getElementById('total');
const $letter = document.getElementById('letter');
const $distribution = document.getElementById('distribution');
const $output = document.getElementById('output');
const $next = document.getElementById('next');
const $percentage =...