JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div id="wrapper">
  <H2 id='t'>Assignment 9</H2>
  <form id="form">
    <p id='t'>Enter phrase or quote:</p>
    <textarea id='phrase' rows='11' cols='55'>Just because I was thinking it, doesn't make it true.</textarea>
    <br>
    <input type="button" value="Parse Phrase" id="parse" onClick="parsePhrase()">
  </form>
  <div id="output"></div>

CSS

#wrapper {
  background: #fafcd4;
  border-radius: 25px;
  border: 5px solid #1f42b7;
  padding: 20px;
  width: 450px;
  height: 100%;
}

#t {
  font-family: monospace;
}

#phrase {
  font-family: monospace;
  background: #d4fcfb;
  border: 25px;
  border: 2px solid #92e881;
  padding: 5px;
  width: 355px;
  height: 100%;
}

#parse {
  font-family: monospace;
  border-radius: 25px;
  background: #d4fcfb;
  border: 2px solid #92e881;
  padding: 2px;
  width: 100px;
  height: 100;
}

#output {
  font-family: monospace;
  font-size: 100%;
}

JavaScript

//Assignent 9

var bins = []; //stores each of the words once
var phraseAsStringArray = []; // stores the words as the occur in the phrase
//function to create list items
function makeNode(value) {
  this.id = 0;
  this.content = value;
  this.next = null;
  this.last = null;
}
//The lists are holding the positions of the words for each bucket
function List(value) {
  this.head = new makeNode(value);
  this.last = this.head;
}
List.prototype.addNode = function(value) {
    if (this.head == null) {
      this.head = new makeNode(value);
      return this.head;
    }
    if (this.last == null) {
      this.last = new makeNode(value);
      this.head.next = this.last;
      return this.last;
    }
    var newNode = new makeNode(value);
    this.last.next = newNode;
    newNode.last = this.last;
    this.last = newNode;
    this.id++;
  }
  //preparing for the print function
makeNode.prototype.asString = function() {
    return this.content + " ";
  }
  //the print function for the list
List.prototype.print = function() {
    var Content = '<br/>';
    var node = this.head;
    while (node != null) {
      Content += node.asString();
      node = node.next;
    }
    return Content;
  }
  //creating the hashtable
var hashTable = new HashTable(); // Global
//cutting the phrase and storing the words into an array
function parsePhrase() {
  var phrase = document.getElementById('phrase').value;
  phrase = phrase.toLowerCase();
 	phrase = phrase.replace(/[^a-zA-Z0-9]/g, ' ');
	//phrase = phrase.replace(' ', '');
  phraseAsStringArray = phrase.split(' ');
  var len = phraseAsStringArray.length;
  for (var i = 0; i < len; i++) {
    hashTable.addWord(phraseAsStringArray[i] + ":", i + 1);
  }
  output();
}
//the hashtable holds the arry of lists
function HashTable() {
  this.bins = []; //this array will be filled with linked lists
  //the add word function
  this.addWord = function(word, index) {
    if (this.hasWord(word)) //if the word exists ...
    {
     ...