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");