JSFiddle - React, Tailwind, and code Playground

by Mike

HTML

<body>
    <h1 >Mike's "DList" JavaScript / ES2015 List Class &mdash; modeled after Delphi's object-pascal VCL TList Class</h1>
    <p>Tests to accompany the code shown on https://suretalent.blogspot.com/</p><br><br>
    <p>RUN Starting...</p><br>
    <h2 >Modern ES2015 Browser required (e.g., Chrome or Firefox).<br />Right-click, Inspect Element, Console (from anywhere on this page) FOR FULL TRACE OUTPUT</h2>
    <hr>
    <div id="trace"></div>
    <h2 >Below here has been successfully modified by object-references-in-list tests<br />if "PLACEHOLDER 1, 2, 3" are no longer showing.</h2>
    <div id="trace-mod-1">PLACEHOLDER 1</div>
    <div id="trace-mod-2">PLACEHOLDER 2</div>
    <div id="trace-mod-3">PLACEHOLDER 3</div>
</body>

CSS

/* our standard "CSS RESET" */
html, body, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}


/* MAIN COLORS HERE */
body {
    background-color: #666666;
    color: #f5f5f5;
    font-family: Verdana, Arial, sans-serif;
    font-size: 62.5%;
    margin: 10px;
}

a, a:visited, a:active, a:hover {
    color: #08526D;
    text-decoration: none;
}

a:hover, a:focus {
    text-decoration: underline;
}

h1 {
    font-size: 2.0em;
    margin-bottom: 6px;
    color: orange;
}

h2 {
    font-size: 1.6em;
    margin-bottom: 6px;
}

hr {
    margin: 12px 0 12px 0;
    height: 2px;
    border: 3px solid #87ceeb;
}

.error {
    color: #e55;
}

div.error {
    border: 1px solid #d77;
}

.warning {
    color: #e09010;
}

div.warning {
    border: 1px solid #f0c020;
}

.ok {
    color: #008000;
}

div.ok {
    border: 1px solid #00aa00;
}

JavaScript

class DList {

    constructor(instancename = '[InstanceName not specified in List constructor]',
                //default closure for Sorter: default to no sort-ordering
                equals = function(a, b) {return 0},
                //default closure for Equals: default to no match
                sorter = function(a, b) {return 0}) {

        this._InstanceName = instancename;
        this.Sorter = sorter;
        this.Equals = equals;

        //create the array that will contain our list Items
        this._items = [];
    } //constructor


    //Read-only InstanceName property accessor (set during construction)
    get InstanceName() {
        return this._InstanceName;
    }

    //Provide read-only access to the internal items-array
    get Items() {
        return this._items;
    }

    //Read-only Count property
    get Count() {
        return this._items.length;
    }


    //Add single object reference to our list's Items[] array, and return its index position
    Add(objToAdd) {
        let newItemIndex = this._items.length;
        this._items[newItemIndex] = objToAdd;
        return newItemIndex;
    }

    //Use AddRange when merging an array of objects to our Items[].
    //This adds Items to the end of our list's Items[] array;
    //use Add() when adding only one item (more efficient).
    //AddRange is just an InsertRange at end-of-Items-array.
    AddRange(objArrayToAdd) {
        this.InsertRange(this._items.length, objArrayToAdd);
    }

    Clear() {
        this._items = [];
    }

    //TODO: Delete/DeleteRange with bad (i.e. -1 or non-existent) index must fail!
    //      Set to EOList?
    Delete(index) {
        this._items.splice(index, 1);
    }

    //Remove several entries at index (RemoveCount = how many to delete)
    DeleteRange(index, RemoveCount) {
        this._items.splice(index, RemoveCount);
    }

    IndexOf(obj) {
        let i = this._items.length;
        while (i--) {
            if...