<div id="counter"></div>

<button id="increment">Increment</button>
// Creating a simple object that holds a state. Will be used as the target object.
const data = {
  counter: 0
};

// Configure the handler object and how we are going to follow changes on state and update the DOM.
const handler = {
  get(target, property) {
    // Get the value of a specific property
    return target[property];
  },
  set(target, property, value) {
    // Set the value of a specific property
    target[property] = value;

    // Update the DOM
    updateView();
  }
};

// Creating the Proxy
const reactiveData = new Proxy(data, handler);

// Listen to click event to set the new counter value
const incrementButton = document.getElementById('increment');
if (incrementButton) {
  incrementButton.addEventListener('click', () => {
    reactiveData.counter++;
  });
}

// Function for updating the DOM
function updateView() {
  const counterElement = document.getElementById('counter');
  if (counterElement) {
    counterElement.textContent = reactiveData.counter;
  }
}

// Initial DOM update
updateView();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.