JSFiddle - React, Tailwind, and code Playground

by Ryan Brown

HTML

<h1>Module 7</h1>
  <form id="form">
    <div id="my-div">
      Enter value.<br>
      <input type="text"  id="value"><br>
      <input type="button" value="Enter" id="click">
    </div>
  </form>

  <table>
    <tr>
      <th>Original Chain</th>
      <th>Bubble Sorted Chain</th>
    </tr>

    <tr>
      <td>
        <div id="original-chain"></div>
      </td>
      <td>
        <div id="bubble-sorted"></div>
      </td>
    </tr>

    <tr>
      <th>Original Chain</th>
      <th>Quick Sorted Chain</th>
    </tr>

    <tr>
      <td>
        <div id="original-chain-two"></div>
      </td>
      <td>
        <div id="quick-sorted"></div>
      </td>
    </tr>
  </table>

CSS

table, th, td {
    border: 1px solid black;
}

th {
  padding-right: 10px;
  background-color: green;
  color: white;
  text-align: left;
}

JavaScript

// Define the link object or attributes
function Link(id, value) {
  this.id = id; // The id of the current link
  this.value = value; // The value stored 
  this.next = null; // a pointer to next link
}

Link.prototype.asString = function () {
  return "Link ID: " + this.id + " Value: " + 
    this.value + " Points to ID: " + this.next;
};

// Define the Chain object
function Chain() { 
  this.linkStorage = []; // place to store origianl links
  this.linkStorageTwo = []; // place to store bubble sort links
  this.linkStorageThree = []; // place to store quick sort links
}

// A function to add a link to the chain
Chain.prototype.addLink = function (linkValue) {
  this.linkStorage.push(new Link(this.linkStorage.length, linkValue));
  this.linkStorage[this.linkStorage.length-1].next = "End of Chain.";//dynamically assign link.next based on array length
  if (this.linkStorage.length > 1) {//dynamically adjust "End of Chain"
    this.linkStorage[this.linkStorage.length-2].next = this.linkStorage.length-1;
  }

  //added for bubble sorted list
  this.linkStorageTwo.push(new Link(this.linkStorageTwo.length, linkValue));
  this.linkStorageTwo[this.linkStorageTwo.length-1].next = "End of Chain.";//dynamically assign link.next based on array length
  if (this.linkStorageTwo.length > 1) {//dynamically adjust "End of Chain"
    this.linkStorageTwo[this.linkStorageTwo.length-2].next = this.linkStorageTwo.length-1;
  }

  //added for quick sorted list
  this.linkStorageThree.push(new Link(this.linkStorageThree.length, linkValue));
  this.linkStorageThree[this.linkStorageThree.length-1].next = "End of Chain.";//dynamically assign link.next based on array length
  if (this.linkStorageThree.length > 1) {//dynamically adjust "End of Chain"
    this.linkStorageThree[this.linkStorageThree.length-2].next = this.linkStorageThree.length-1;
  }
}

Chain.prototype.print = function () {//to see original output
  var list_array = [], bubble_sorted_array = [];
  for (var i=0;...