JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div class="trans">
      <h1 id="title">Assignment 13</h1>
    </div>
    <div class="trans" id="intro">
      <h4>A "Trie-powered" Dictionary can be used to spellcheck very efficiently.<br/>Enter a word to check if it exists and add it if it doesn't.<br/>The sort order is: Numbers => CAPS => lower case</h4>
    </div>    
    <div class="trans"><h2><div  id="checkTrue"></div></h2></div>
    <div class="trans"><h2><div class="blink" id="checkFalse"></div></h2></div> 
    <div class="input_elements">
      <input type="tb1" id="input" onkeyup="checkInput()" onkeypress="handle(event)"><br/>
      <div class="col1">
      <input type="button" class="button" value="Check word" id="bt2" onClick="check();">
      <input type="button" class="button" value="Add to dictionary" id="bt1" onClick="add();">
      </div>
    </div>
    <div>
    
    </div>
    <div class="col2" id="array"></div>
    <div class="col2" id="trie"></div>

CSS

.col1 {
  float: left;
  width: 50%;
}

.button {
  padding: 5px 15px;
  font-size: 14px;
  text-align: center;
  cursor: pointer;
  outline: 2px;
  color: #fff;
  background-color: #4286f4;
  border: 1px;
  border-style: solid;
  border-color: white;
  border-radius: 10px;
  box-shadow: 0 2px #999;
}

.button:hover {
  background-color: #3e8e41
}

.button:active {
  background-color: #3e8e41;
  box-shadow: 0 5px #666;
  transform: translateY(4px);
}

#title {
  font-family: Georgia, serif;
  color: #ffffff;
  font-variant: small-caps;
  text-transform: none;
  font-weight: 100;
  margin: 0.3rem;
  padding: 5px 15px;
}

html {
  background: url('http://drive.google.com/uc?export=view&id=0B6ziB3dr-a5SM1FBNThKNlhmajg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

.overlay {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  opacity: 0.8;
  filter: blur(10px);
  -webkit-filter: blur(10px);
  -moz-filter: blur(10px);
  -o-filter: blur(10px);
  -ms-filter: blur(10px);
  filter: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' ><filter id='svgMask'><feGaussianBlur stdDeviation='10' /></filter></svg>#svgMask");
}

.trans {
  background-color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 100%;
  opacity: 0.70;
  filter: alpha(opacity=70);
  /* For IE8 and earlier */
}

.col2 {
  background-color: green;
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  font-weight: 100%;
  opacity: 0.70;
  filter: alpha(opacity=70);
  /* For IE8 and earlier */
  float: right;
  width: 50%;
  text-align: center;
}

#checkTrue {
  text-align: center;
  font-weight 500%;
  color: green;
}
#checkFalse {
  text-align: center;
  font-weight 500%;
  color: red;
}

JavaScript

//Assignment 13
//hard coded samples stored in an array and later fed into trie
var dictionary = ['I', 'in', 'into', 'inlet', 'inn', 'inner', 'innate', 'ink'];

//The enter key handler
function handle(e) {
  var key = e.keyCode || e.which;
  if (key == 13) {
    input = document.getElementById("input").value;
    check(input);
  }
}
/*Excellent example found at https://github.com/rgantt/jsterbate/blob/master/lib/trie.js
	Specific implentation to assignment and addition of check() and add() functions was done by me. I also commented the code to demonstrate my understanding of this data structure.  
*/
//function expression for the trie includes the max number of letters in the first level 
var Trie = (function () {
    var ALPHABET_SIZE = 26;
    //TrieNodes are the single elements like leafs to a tree. Each node has a key and a value
    var TrieNode = function (key, value) {
        this.key = key; 
        this.value = value;
        //children are stored in arrays
        this.children = [];
        for (var i = 0; i < ALPHABET_SIZE; i++) {
            this.children[i] = null;
        }
        //adding the current letter into the array
        this.putChild = function (node) {
            return (this.children[node.key.charCodeAt(0)] = node);
        };
        //getting the current child
        this.getChild = function(key) {
            return this.children[key.charCodeAt(0)];
        };
    };
        //here is where it gets interresting: the child is evaluated 
    var add = function (node, key, value) {
    		//target represents the current letter
        var target = node.getChild(key.charAt(0));
				// if it's null a new node is created
        if (target == null) {
            target = node.putChild(new TrieNode(key.charAt(0), null));
        }
				// if it exists its value is returned 
        if (key.length == 1) {
            return (target.value = value);
        }
        // the next letter is sliced off
        return add(target, key.slice(1),...