JSFiddle - React, Tailwind, and code Playground

by dhizzybusy

HTML

<h1>
<Center>Lists</Center>
</h1>
<br><br/>

<input type="button" id="CreateList" value="Create List" onClick="createList();" />
<br/><br/> Name of Node being added:
<input type="textbox" id="LinkName" Value="New Node" />
<input type="button" id="AddLink" value="Add Node to List" onClick="addNode();" />
<p id="demo"></p>

<div id="output">


</div>

JavaScript

var list = null;

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

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

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

LinkedList.prototype.add = function(_content) {
var node = new Node(); node.content = _content;

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.length = 2;
    return node;
}

this.tail.next = node;
node.prev = this.tail;
this.tail = node;
this.length++;
return node;
}

LinkedList.prototype.print = function() {
if (this.head == null) return "Empty List";
var s = "";
var node = this.head;
while (node != null) {
    s += node.content + "   ";
    node = node.next;
}
return s;
}

var aList = new LinkedList();


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