JSFiddle - React, Tailwind, and code Playground

by zazagalaxy

HTML

<!-- Begin input div -->
<div class="divBG">

  <!-- Create user input content-->
  <table border="0" align="center" height="150px">
    <tr height="30%">
      <td>
        Node Name
        <br />
        <input type="textbox" id="userInput" />
      </td>
    </tr>
    <tr>
      <td>
        <input type="button" class="btnstyle" value="Create New List" id="btnCreateList" onClick="createList();" />
        <input type="button" class="btnstyle" value="Add Node" id="btnAddNode" onClick="addNode();" />
        <input type="button" class="btnstyle" value="Clear Display" id="btnClearDisplay" onClick="clearDisplay();" />
      </td>
    </tr>
    <tr height="10%">
      <td>
        <!-- Begin div displays -->
        <div id="message">

        </div>
      </td>
    </tr>
  </table>

</div>
<!-- End input div -->
<br />
<!-- Begin array div -->
<div class="divBG">
  <br />
  <div class="container" id="output">

  </div>
</div>
<!-- End array div -->
<!-- End div displays -->

CSS

body {
  font-family: Sans-serif;
  text-shadow: 1px 1px #008CBA;
}

input[type=number] {
  width: 75px;
}


/* Create content background */

.divBG {
  color: #FFF;
  background-color: #999;
  border: 2px solid #008CBA;
  border-radius: 10px;
  width: 350px;
  padding: 2%;
  margin: auto;
  overflow: auto;
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.48)
}

tr {
  text-align: center;
}


/* create class "nopad" to remove margins and padding within html elements */

.nopad {
  margin: 0;
  padding: 0;
}


/* create class "btmargins" to apply spacing to buttons on top and bottom */

.btnmargins {
  margin-top: 1.5em;
  margin-bottom: 1.5em;
}


/* create button style class */

.btnstyle {
  background-color: #008CBA;
  color: #FFF;
  border-radius: 10px;
  width: 110px;
  padding: 10px 2px;
  -webkit-transition-duration: 0.3s;
  /* Safari */
  transition-duration: 0.3s;
  outline: none;
  box-shadow: 0 6px 8px 0 rgba(0, 0, 0, 0.24), 0 9px 25px 0 rgba(0, 0, 0, 0.19);
}


/* Attached to btnstyle class. Creates a hover property where style changes on hover */

.btnstyle:hover {
  border: 2px solid #008CBA;
  background-color: #FFF;
  color: #008CBA;
  font-weight: bold;
}


/* Attached to btnstyle class. Creates an onclick property where style changes on click */

.btnstyle:active {
  -webkit-transition-duration: 0.0s;
  /* Safari */
  transition-duration: 0.0s;
  box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.48), 0 5px 12px 0 rgba(0, 0, 0, 0.38);
  transform: translateY(4px);
  border: 3px solid #008CBA;
}


/* Create new column on data overflow */

.container {
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  flex-wrap: wrap;
  height: 250px;
  margin: auto;
  padding: 10px;
}

.container div {
  height: 25px;
  width: 150px;
}

JavaScript

// Function to populate a new list
function createList() {
  var value = document.getElementById("LinkName").value;
  list = new List(value);
  document.getElementById("demo").innerHTML = list.print();
}

// Function to add node to end of list
function addNode() {
  var value = document.getElementById("LinkName").value;
  list.addNode(value);
  document.getElementById("demo").innerHTML = list.print();
}

// Function to display the complete list
function displayList() {
  console.log(list); // Log list in console
  document.getElementById("output").innerHTML = list.print(); // Call print function
}

// Function to clear display
function clearDisplay() {
  document.getElementById("message").innerHTML = "Display cleared!"
  list = new DoublyList();
  displayList();
}
// Node constructor that forms a node with 3 parts: previous pointer, data, next pointer
function Node(value) {
  this.data = value;
  this.previous = null;
  this.next = null;
  return this;
}

// Create list with 3 properties: head, length, and tail
function DoublyList() {
  this._length = 0;
  this.head = null;
  this.tail = null;
}

//Add values to the list
DoublyList.prototype.add = function(value) {
  var node = new Node(value);

  if (this._length) {
    this.tail.next = node; // if list contains values, find tail and assign next value to node being added
    node.previous = this.tail; // assign new node's previous pointer to tail of list before assigning new node as the tail
    this.tail = node; // assign new node as the tail
  } else { // If list is empty, assign both head and tail to node being added
    this.head = node;
    this.tail = node;
  }

  this._length++; // Add 1 to length of list

  return node;
};

Node.prototype.asString = function listToString() {
  return "<div><strong>Node Value:</strong> " + this.data + "</div>"; // Format list data as specified string
}

DoublyList.prototype.print = function printList() {
  var s = ""; // Declare string variable
  var n = this.head; //...