<div id="root"></div>
body {
  height: 100vh;
  margin: 0;
  display: grid;
  place-items: center;
}
.box {
  display: flex;
  gap: 1rem;
  h1 {
    font-size: 20px;
    margin: 0 0 1rem 0;
  }
}
View Compiled
import React, {
  useState,
  useEffect
} from "https://cdn.skypack.dev/react@^16.13.1";
import ReactDOM from "https://cdn.skypack.dev/react-dom@^16.13.1";

const workerURL = `https://quick-counters.chriscoyier.workers.dev`;

const App = () => {
  const [burps, setBurps] = useState(0);
  const [coughs, setCoughs] = useState(0);
  const [sneezes, setSneezes] = useState(0);

  useEffect(() => {
    getInitial("burp");
    getInitial("cough");
    getInitial("sneeze");
  }, []);

  function doIncrement(type) {
    fetch(`${workerURL}/${type}/increment`);
    if (type === "burp") setBurps(parseInt(burps) + 1);
    if (type === "cough") setCoughs(parseInt(coughs) + 1);
    if (type === "sneeze") setSneezes(parseInt(sneezes) + 1);
  }

  function getInitial(type) {
    fetch(`${workerURL}/${type}/get`)
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        if (data.burp) {
          setBurps(data[type]);
        }
        if (data.cough) {
          setCoughs(data[type]);
        }
        if (data.sneeze) {
          setSneezes(data[type]);
        }
      });
  }

  return (
    <div className="box">
      <button
        className="button"
        onClick={() => {
          doIncrement("burp");
        }}
      >
        Burp x {burps}
      </button>
      <button
        className="button"
        onClick={() => {
          doIncrement("cough");
        }}
      >
        Cough x {coughs}
      </button>
      <button
        className="button"
        onClick={() => {
          doIncrement("sneeze");
        }}
      >
        Sneeze x {sneezes}
      </button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));
View Compiled

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css

External JavaScript

This Pen doesn't use any external JavaScript resources.