CO₂ Calculator Docs

Minimal Example

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>twigbit CO2 Calculator Demo</title>
</head>

<body>

  <!-- #region iframe -->
  <iframe id="co2-calculator" title="CO2 Calculator" loading="lazy" width="800" height="500" style="border:0"
    referrerpolicy="strict-origin" src="https://demo.co2-calculator.twigbit.dev/?clientID=test"></iframe>
  <!-- #endregion -->

  <!-- #region script -->
  <script defer src="https://unpkg.com/@twigbit/co2-calculator@0.5.0"></script>
  <!-- #endregion -->

  <!-- #region js -->
  <script>
    document.addEventListener("DOMContentLoaded", function () {
      // Creates a new CO2Calculator instance that can be used to control an embedded iframe.
      // Make sure, to swap the `client_id` and `origin` constants with your values.
      var co2calc = new CO2Calculator({
        client_id: "test",
        origin: "https://demo.co2-calculator.twigbit.dev"
      });

      // Add event listeners to those events you need
      co2calc.addEventListener("connect", function (ev) {
        console.log("CO2Calculator ready to rock!");
      });

      co2calc.addEventListener("save", function (ev) {
        console.log("CO2Calculator saved!", ev.data);
      });

      // Connect the iframe to this CO2Calculator instance
      co2calc.connect(document.getElementById("co2-calculator"));

    });
  </script>
  <!-- #endregion -->

</body>

</html>

Last Updated: