JSFiddle - React, Tailwind, and code Playground

by Dong Nguyen

HTML

<script src="https://cdn.jsdelivr.net/polyfills/polyfill.js+obs"></script>
<script src="https://unpkg.com/[email protected]/dist/object-observe.min.js"></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

const init = () => {
    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);
}

window.onload = init