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="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();


	function objectToDom(source, target, property){
		Object.observe(source, function(changes){
			changes.forEach(function(change){
				if(change.name===property){
					target.value = change.object[property];
				}
			});
		});
	}

   objectToDom(people, $firstName, 'firstName');
   objectToDom(people, $lastName, 'lastName');


var $btnChange = element('btnChange');

// randomly pick one people from a list 
$btnChange.onclick = function(){
    var arr = [
        ['George', 'Washington'], 
        ['John', 'Adams'],
        ['Thomas', 'Jefferson'],
        ['James', 'Madison'],
        ['James', 'Monroe'],
        ['John', 'Tyler'],
        ['Zachary', 'Taylor'],
        ['Millard', 'Fillmore'],
        ['Abraham', 'Lincoln'],
        ['Theodore', 'Roosevelt'],
        ['Woodrow', 'Wilson'],
        ['Herbert', 'Hoover'],
        ['Dwight', 'Eisenhower'],
        ['Barrack', 'Obama']
    ];
    var ran = arr[Math.floor(Math.random()*arr.length)];
    people.firstName = ran[0];
    people.lastName = ran[1];
}


// change firstname to Altonio in 3 seconds
setTimeout(function(){
    people.firstName = 'Altonio';
    
    // then change lastname to Vivaldi in 3 seconds
    setTimeout(function(){
        people.lastName = 'Vivaldi';
    }, 3000);
    
}, 3000);