donbrae/Reactive UI with Proxy object.html

## Reactive UI with Proxy object.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Reactive UI with Proxy object</title>
  </head>
  <body>
    <!-- Comment which got me thinking: https://news.ycombinator.com/item?id=35062021 -->
    <p>Count:
      <span id="count"></span>
    </p>
    <script>
      const appState = {
        count: 0
      };
      const stateHandler = {
        get: function (target, property) {
          console.log('get', target, property);
          return target[property];
        },
        set: function (target, property, value) {
          console.log('set', target, property, value);
          target[property] = value;
          updateCount();
        }
      };
      const proxiedState = new Proxy(appState, stateHandler);
      function updateCount() {
        const countElem = document.getElementById('count');
        countElem.textContent = proxiedState.count;
      }
      updateCount(); // Initialize onscreen value with initial state value
    </script>
    <button onclick="proxiedState.count++;">Increment</button>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>Reactive UI with Proxy object</title>
	</head>
	<body>
	<!-- Comment which got me thinking: https://news.ycombinator.com/item?id=35062021 -->
	<p>Count:
	<span id="count"></span>
	</p>
	<script>
	const appState = {
	count: 0
	};
	const stateHandler = {
	get: function (target, property) {
	console.log('get', target, property);
	return target[property];
	},
	set: function (target, property, value) {
	console.log('set', target, property, value);
	target[property] = value;
	updateCount();
	}
	};
	const proxiedState = new Proxy(appState, stateHandler);
	function updateCount() {
	const countElem = document.getElementById('count');
	countElem.textContent = proxiedState.count;
	}
	updateCount(); // Initialize onscreen value with initial state value
	</script>
	<button onclick="proxiedState.count++;">Increment</button>
	</body>
	</html>