JSFiddle - React, Tailwind, and code Playground

by Robert Mochel

HTML

<h2>Assignment 8</h2>
<table>
  <tr>
    <tb>
      <input type="textbox" placeholder="Enter something to add" id="newNode" />
    </tb>
    <tb>
      <input type="button" class="button" id="addNode" value="Add string to the end" onClick="addStr();" />
    </tb>
  </tr>
  <br>
  <tr>
    <tb>
      <input type="text" placeholder="Enter less than 1500" id="maxN" onchange="limitInput(this);" />
    </tb>
    <tb>
      <input type="button" class="button" id="repop" value="Repopulate" onClick="rePop();" />
    </tb>
  </tr>
  <br>
  <tr>
    <tb>
      <input type="button" class="button" id="sort1" value="Merge and Bubble Sort" onClick="msorted();bsorted()" />
    </tb>
    <tb>
      <input type="button" class="button" id="sort1" value="Merge Sort" onClick="msorted()" />
    </tb>
    <tb>
      <input type="button" class="button" id="sort2" value="Bubble Sort" onClick="bsorted();" />
    </tb>
  </tr>
  <br/>
  <br>
  <div class="colh">Not Sorted</div>
  <div class="colh" id="mh"></div>
  <div class="colh" id="bh"></div>
  <br/>

  <div class="col" id="left"></div>
  <div class="col" id="middle"></div>
  <div class="col" id="right"></div>
  <div id="output">
  </div>

CSS

.colh {
  float: left;
  width: 33%;
  font-size: 75%;
}

.col {
  float: left;
  width: 33%;
  font-size: 88%;
}

#sort1,
#sort2,
#repop,
#addNode,
#newNode,
#maxN {
  background: #fafcd4;
  border: 25px;
  border: 2px solid #92e881;
  padding: 2px;
}

JavaScript

var max = 20;
var noi = 0;
var a = [];
var b = [];
var res = [];
var x = 0;
var t1b, t2b, t3b, t4b, t1m, t2m, t3m, t4m, tCall, tSort, tFull; //needed for performance measuring

function handle(e) {
  var key = e.keyCode || e.which;
  if (key == 13) {
    addStr();
    document.getElementById("newNode").value = "";
  }
}


var Node = function(_content) {
  this.next = null;
  this.previous = null;
  this.content = _content;
}

var Stack = function() {
  this.top = null; //if nothing is on top ...
  this.bottom = null; //... then there is no bottom

  this.push = function(_content) {
    if (this.bottom == null) {
      this.bottom = new Node(_content);
      this.top = this.bottom;
      return this;
    }

    var addedNode = new Node(_content);
    addedNode.last = this.top; // pointer to previous node
    this.top.next = addedNode; // current top points to new
    this.top = addedNode; // which becomes new top
    return this;
  }

  this.pop = function() {
    if (this.top == null) {
      alert("Empty Stack");
      return null;
    }

    if (this.bottom == this.top) {
      this.bottom = null;
      x = this.top.content;
      return this.top.content;

    }

    var a = this.top.content;
    this.top = this.top.last;
    this.top.next = null;
    x = a;
    return a;
  }


  this.toString = function() {
    var str = "";
    var node = this.bottom;
    while (node != null) {
      str += node.content + "<br/>";
      node = node.next;
    }
    return str;
  }
}

//Limit user input
function limitInput(input) {
  if (isNaN(input.value)) {
    alert("This should be a number between 2 & 1500 !");
  } else {
    if (input.value < 0) input.value = 0;
    if (input.value > 1500) input.value = 1500;
    max = 1500;

  }
}

function clScr() {
  document.getElementById('left').innerHTML = "";
  document.getElementById('right').innerHTML = "";
  document.getElementById('middle').innerHTML = "";
  document.getElementById('mh').innerHTML = "";
 ...