JSFiddle - React, Tailwind, and code Playground

by Peyton Hessler

HTML

<button type="button" onclick="button1Click()">New/Clear</button>
<button type="button" onclick="button2Click()">Add Link</button>
<BR>
<BR>
<p id="textOut"></p>

JavaScript

// Define the link object
function Link(_id, _value, _next) {
    this.id = _id; // The id of the current link
    this.value = _value; // The value stored 
    this.next = _next; // a pointer to the next link, 0 = last link in the chain
}
//prints conents of a link defined by chain.linkStorage[i].asString
Link.prototype.asString = function () {
    return "Node: " + this.id +
        "|   Value: " + this.value +
        "|   Points To: " + this.next + "<br/>";
};

// Define the Chain object
function Chain(_firstValue) { // We will define the chain with the first link defined
    this.length = 1; //Start the bean counting
    // I like to keep track of the first link, not really necessary
    this.head = new Link(1, _firstValue, 0);
    // a place to store the links - demo
    this.linkStorage = [];
    //add it to the list
    this.linkStorage.push(this.head);
}

Chain.prototype.getLast = function () {
    // A function to find the last link in the chain
    return this.linkStorage[this.linkStorage.length - 1].asString();
}

Chain.prototype.addLink = function (_linkValue) {
    //Push new sequenced value into the list
    this.linkStorage[this.length - 1].next = this.length + 1;
    this.length++; //increment bean-counter
    //instantiate new link object with meaningful arbitrary values
    var a = new Link(this.length, _linkValue + " " + this.length, 0);
    //stack the new link onto the chain
    this.linkStorage.push(a);
}

Chain.prototype.removeLink = function () {
    //grab the info on the link we are about to kill
    if (this.length > 1) {
        var TEXT = this.linkStorage[this.length - 1].id;
        this.linkStorage.pop();
        this.length--; //decrement bean counter
        this.linkStorage[this.length - 1].next = 0; //update the pointer for new tail
        return TEXT;
    } else {
        alert("Cannot delete the list head.  Try New/Clear");
    }
}

Chain.prototype.print = function () {
    //Print all outputs in nice list
    TEXT = "";
   ...