Get started with operative CDN

MIT licensed

Pre-written JS functions for web app functionality extension.

Tags:
  • worker
  • web-worker

Stable version

Copied!

How to start using operative CDN


<!DOCTYPE html>
<html>
<head>
  <title>Get started with operative CDN - cdnhub.io</title>
  <script src="https://cdn.cdnhub.io/operative/0.4.6/operative.min.js"></script>
</head>
<body>
  <button id="myButton">Click me</button>
  <script>
    const button = document.getElementById('myButton');

    Operative.create({
      target: button,
      initialState: { isLoading: false },
      actions: {
        click: {
          on: 'click',
          handler: () => {
            this.setState({ isLoading: true });
            // Perform an asynchronous action here, e.g., fetching data
            fetch('https://api.example.com/data')
              .then((response) => response.json())
              .then((data) => {
                this.setState({ data, isLoading: false });
              })
              .catch((error) => {
                this.setState({ error, isLoading: false });
              });
          }
        }
      },
      render: ({ isLoading, data, error }) => {
        if (isLoading) {
          return '<button disabled>Loading...</button>';
        }

        if (error) {
          return `<button disabled>Error: ${error.message}</button>`;
        }

        return `<button>Data: ${data}</button>`;
      }
    });
  </script>
</body>
</html>
Copied!
Copied!

All versions