JSFiddle - React, Tailwind, and code Playground

by Vipin Goyal

HTML

<body>
    value:
    <input type="text" id="text1">
    <br>copy:
    <input type="text" id="text2">
    <br>copy2:
    <input type="text" id="text3">
    <br>
    <input type="button" id="button1" value="View value">
    <br> <span id="output"></span>
        <hr>
value:
    <input type="text" id="textt1">
        <br>
    <input type="text" id="textt2">
        <br>
    <input type="text" id="textt3">
        <br>
            <span id="output2">Not heavy</span>
</body>

CSS

.important {
    color:red;
    background:yellow;
}

JavaScript

//Got this great piece of code from https://gist.github.com/384583
Object.defineProperty(Object.prototype, "__watch", {
    enumerable: false,
    configurable: true,
    writable: false,
    value: function (prop, handler) {
        var val = this[prop],
            getter = function () {
                return val;
            },
            setter = function (newval) {
                val = newval;
                handler.call(this, prop, newval);
                return newval;
            };

        if (delete this[prop]) { // can't watch constants
            Object.defineProperty(this, prop, {
                get: getter,
                set: setter,
                enumerable: true,
                configurable: true
            });
        }
    }
});

Object.defineProperty(Object.prototype, "__watchCallback", {
    enumerable: false,
    configurable: true,
    writable: false,
    value: function (prop, handlers) {
        var val = this[prop],
            getter = function () {
                return val;
            },
            setter = function (newval) {
                val = newval;
                for(var i=0;i<handlers.length;i++){
                    handlers[i].call(this, prop, newval);
                }
                return newval;
            };

        if (delete this[prop]) { // can't watch constants
            Object.defineProperty(this, prop, {
                get: getter,
                set: setter,
                enumerable: true,
                configurable: true
            });
        }
    }
});

var DataBinder = function () {
    //The property is changed whenever the dom element changes value
    //TODO add a callback ?
    this._bind = function (DOMelement, propertyName) {
        //The next line is commented because priority is given to the model
        //this[propertyName] = $(DOMelement).val();
        var _ctrl = this;
        $(DOMelement).on("change input propertyChange", function (e) {
           ...