examples/counter.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8"/>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>Patella Example - Counter</title>
    <script src="https://cdn.jsdelivr.net/npm/patella@2.2.2"></script>
  </head>
  <body>
    <main>
      <h1>Click Counter</h1>
      <button onclick="model.clicks++"></button>
    </main>
    <script>
      const $button = document.getElementsByTagName("button")[0];
      const model = Patella.observe({
        clicks: 0
      });
      Patella.computed(() => {
        $button.innerText = model.clicks
          ? `I've been clicked ${model.clicks} times`
          : "Click me!";
      });
    </script>
    <footer>
      <a href="https://github.com/luawtf/Patella/blob/master/examples/counter.html">View source</a>
    </footer>
  </body>
</html>