JSFiddle - React, Tailwind, and code Playground

by Jeff Santos

HTML

<input type="button" id = "CreateList" value="Create List" onclick="createList();" />
<br/>
<br/>
Enter Node to be Added:
<input type="textbox" id="aNode" value = ""/>
<input type="button" id = "AdNode" value="Add to List" onclick="addNode();" />
<br/>
<p id="outcome"></p>

JavaScript

var list = null;

function createList() {
  var value = document.getElementById("CreateList").value;
  list = new List(value);
  document.getElementById("outcome").innerHTML = list.print();
}


function addNode() {
  var value = document.getElementById("aNode").value;
  list.addNode(value);
  document.getElementById("outcome").innerHTML = list.print();
}


function Node(value) {
    this.data = value;
    this.previous = null;
    this.next = null;
}

function List() {
    this._length = 0;
    this.head = null;
    this.tail = null;
}

List.prototype.add = function(value) {
    var node = new Node(value);
 
    if (this._length) {
        this.tail.next = node;
        node.previous = this.tail;
        this.tail = node;
    } else {
        this.head = node;
        this.tail = node;
    }
 
    this._length++;
     
    return node;
};


var ll = new List();

ll.add('A');
ll.add('B');
ll.add('C');
ll.add('D');
ll.add('E');

List.prototype.print = function() {
  var s = "";
  var n = this.head;
 
  while (n != null){
     s += n.asString();
     n = n.next;
  }

  return s;
}