JSFiddle - React, Tailwind, and code Playground

by KosteB

HTML

<div id='result'>
</div>

<div id="changed">
</div>

JavaScript

var Book = function(name, price) {

    var priceChanging = [],
        priceChanged = [];

    this.name = function(val) {
        return name;
    };

    this.price = function(val) {
        if (val !== undefined && val !== price) {
            for (var i = 0; i < priceChanging.length; i++) {
                if (!priceChanging[i](this, val)) {
                    return price;
                }
            }

            price = val;

            for (var i = 0; i < priceChanged.length; i++) {
                priceChanged[i](this);
            }
        }

        return price;
    };

    this.onPriceChanging = function(callback) {
        priceChanging.push(callback);
    };

    this.onPriceChanged = function(callback) {
        priceChanged.push(callback);
    };
};


$(document).ready(function() {

    var resultDiv = document.getElementById('result'),
        changedDiv = document.getElementById('changed');

    var book = new Book('Java Script: The Good Parts', 23.99);

    resultDiv.innerHTML = 'The name is: ' + book.name() + "<br />";
    resultDiv.innerHTML += 'The price is $ ' + book.price();

    book.onPriceChanging(function(b, price) {
        if (price > 100) {
            changedDiv.innerHTML += 'System error, price has gone unexpectedly high';
            return false;
        }

        return true;
    });

    book.onPriceChanged(function(b) {
        changedDiv.innerHTML += 'The book price has changed to: $' + b.price() + "<br/>";
    });

    book.price(19.99);
    book.price(200);
});