JSFiddle - React, Tailwind, and code Playground

by Dong Nguyen

HTML

<script src="https://cdn.jsdelivr.net/polyfills/polyfill.js+obs"></script>
<div class="block">
    <input type="text" id="txtFirstName" value="" />
    <input type="text" id="txtLastName" value="" />
</div>

<button id="btnPeople">View people's properties</button>
<button id="btnChange">Change people's properties</button>

CSS

.block {
    margin-bottom: 20px;
}

JavaScript

var people = {
        firstName: "Dong",
        lastName: "Nguyen"
    }


    var element = function (id) {
        return document.getElementById(id);
    }


    var $firstName = element('txtFirstName');
    var $lastName = element('txtLastName');

    var render = function () {
        $firstName.value = people.firstName;
        $lastName.value = people.lastName;
    }

    render();

    var DataBinder = (function(){
        
        var domToObject = function(source, target, attribute){
              source.onchange = function(){
                  var v = source.value+'';
                  target[attribute] = v;
              }
        }
        
        var objectToDom = function(source, target, property){
            Object.observe(source, function(changes){
                changes.forEach(function(change){
                    if(change.name===property){
                        target.value = change.object[property];
                    }
                });
            });
        }

        var isElement = function(v){
            if(!!v && typeof v=='object'){
                 var ots = Object.prototype.toString;
                 if(ots.call(v).indexOf('HTML')!==-1 &&  
                    ots.call(v).indexOf('Element')!=-1){
                        return true;
                 }
            }
            return false;
        }     
        
        var start = function(source, target, attr){
            if(isElement(source)){
                domToObject(source, target, attr);
                objectToDom(target, source, attr);
            }
            else{
                objectToDom(source, target, attr);
                domToObject(target, source, attr);
            }
        }
        
        return {
            domToObject: domToObject,
            objectToDom: objectToDom,
            start: start
        }
	})();

DataBinder.start($firstName, people, 'firstName');
DataBinder.start($lastName, people, 'lastName');


var $btnPeople =...