JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<div id="wrapper">
  <h2>Assinment 10</h2>
  <br>
  <div id="title" class="left">Raw Data:</div>
  <div id="title" class="right">Hashes:</div>
  <div id="raw" class="left"></div>
  <div id="hashes" class="right"></div>
  <div id="title" class="left">Indices:</div>
  <div id="title" class="right">Sorted:</div>
  <div id="index" class="left"></div>
  <div id="sorted" class="right"></div>
  <input type="button" value="click me" id="click" onClick="fillQueue()">
</div>

CSS

.col1 {
  font-family: monospace;
  float: left;
  width: 50%;
}

.col2 {
  font-family: monospace;
  float: left;
  width: 50%;
}

.left {
  font-family: monospace;
  float: left;
  width: 50%;
}

.right {
  font-family: monospace;
  float: left;
  width: 50%;
}

#title {
  font-family: monospace;
  color: #4E443C;
  font-variant: small-caps;
  text-transform: none;
  font-weight: 100;
  margin-bottom: 0;
}

#t {
  font-family: monospace;
}

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

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

JavaScript

//Assignment 10

var text = "";
var tmp = "";
var index = [];

//a list to fill the queue
var Node = function(_content) {
  this.next = null;
  this.previous = null;
  this.content = _content;
}

//the queue 
var Queue = function() {
  this.last = null;
  this.first = null;
  this.length = 0;

  //the enqueue function
  this.enqueue = function(_content) {
      var node = new Node(_content);
      if (this.last == null && this.head == null) {
        this.first = node;
        this.last = node;
        this.length++;
        return this;
      }

      this.last.previous = node;
      node.next = this.last;
      this.last = node;
      this.length++;
      return this;
    }
    //the dequeue function
  this.dequeue = function() {
      if (this.last == null) {
        alert("Empty Queue");
        return null;
      }

      if (this.last == this.first) {
        this.first = null;
        this.last = null;
        this.length = 0;
        return null;
      }

      var a = this.first;
      this.first = this.first.previous;
      this.first.next = null;
      this.length--;
      tmp = a;
      return a;

    }
    //needed to display the contents of the queue
  this.toString = function() {
    var str = "";
    var node = this.first;
    while (node != null) {
      str += " | " + node.content + " ";
      node = node.previous;
    }
    return str;
  }
}
var q1 = new Queue();

function fillQueue() {
  function rString() {
    var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    text = "";
    for (var i = 0; i < 4; i++)
      text += possible.charAt(Math.floor(Math.random() * possible.length));
    return text;
  }
  document.getElementById("raw").innerHTML = "<br/>";
  //loop to fill and display the unsorted items
  for (var i = 0; i < 10; i++) {
    q1.enqueue(rString());
    //noi++;
    document.getElementById("raw").innerHTML += text + "<br/>";
  }
  document.getElementById("raw").innerHTML += "<br/>";
  calcAdler();
 ...