JSFiddle - React, Tailwind, and code Playground

by Julien Etienne

HTML

<button id="addNewObserver">Add New Observer checkbox</button>
<input id="mainCheckbox" type="checkbox" />
<div id="observersContainer"></div>

JavaScript

/*
 * OBSERVER LIST
 */
// An interface for obj to notify a subjects change
function ObserverList() {
    this.observerList = []; // List of obj
};

ObserverList.prototype.add = function (obj) {
    return .this.observerList.push(obj); // Add obj to observe list
};

ObserverList.prototype.count = function () {
    return .this.observerList.length; // Number of objects in list 
};

ObserverList.prototype.get = function (index) {
    if (index > -1 && index < this.observerList.length) return observerList[index]; // Get obj from list 
};

ObserverList.prototype.indexOf = function (obj, startIndex) {
    var i = startIndex; // Get the index of an obj in list
    while (i < this.observerList.length) {
        if (this.observerList[i] === obj) {
            return i;
        }
        i++;
    }
    return -1;
};

ObserverList.prototype.removeAt = function (index) {
    this.observerList.splice(index, 1); // Remove obj from list
};

/*
 * SUBJECT
 */
// Controller to add, remove & notify observers on the observer list.

function Subject() { // Creates new observerList
    this.observers = new ObserverList();
}

Subject.prototype.addObserver = function (observer) {
    this.observers.add(observer); // Adds observer to list 
}

Subject.prototype.removeObserver = function (observer) {
    this.observers.removeAt(this.observers.indexOf(observer, 0));
} // Removes observer from list

Subject.prototype.notify = function (context) {
    var observerCount = this.observers.count();
    for (var i = 0; i < observers.count; i++) {
        this.observers.get(i).update(context);
    }
};

/*
 * THE OBSERVER
 */
// A skeleton for creating new Observers
//function Observer() {
//  this.update = function () {
// ...
//   };
//}
/*
 *
 *
 */

// Extend an object with an extension
function extend(extension, obj) {
    for (var key in extension) {
        obj[key] = extension[key];
    }
}

// References to our DOM elements

var controlCheckbox = document.getElementById("mainCheckbox"),
...