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>
<p id="output"></p>

JavaScript

var aList = new List();

function createList(){
var value = "";
  aList.add(value);
  document.getElementById("output").innerHTML = aList.print();
}

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

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

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

List.prototype.add = function(_value){
var node = new Node();
node.value = _value;

	if (this.head == null) {
  this.head = node;
  this.length = 1;
  return node;
  }

	if (this.tail == null) {
  this.tail = node;
  this.tail.prev = this.head;
  this.head.next = this.tail;
  this.lenght = 5;
  return node;
  }
  
  
  this.tail.next = node;
  node.prev = this.tail;
  this.tail = node;
  this.length++;
  return node;
    }
    
    
  List.prototype.print = function(){
  if (this.head == null) return "Empty List";
  var s = "";
  var node = this.head;
  
  while (node != null)  {
  s += node.value + "  ";
  node = node.next;
  }
  return s;
}  
  

aList.add("A");
aList.add("B");
aList.add("C");
aList.add("D");
aList.add("E");