Add demo html

thegreenwebfoundation · Aug 1, 2022 · 0cd8a4a · 0cd8a4a
1 parent f8da869
commit 0cd8a4a
Showing 1 changed file with 57 additions and 0 deletions.
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,57 @@
+<html>
+
+<head>
+  <meta charset=utf-8>
+</head>
+
+
+<body class="">
+
+  <h1>This is a minimal demo</h1>
+
+  <p>Add a number in bytes, and we convert it to carbon, using the SWD model</p>
+
+  <form>
+    <p>
+      <label for="bytes">Number of bytes</label>
+      <input name="bytes" value=0 />
+    </p>
+    <button>Update</button>
+  </form>
+
+  <h2 class="result">
+    (result goes here)
+  </h2>
+
+
+  <script src="./index.js"></script>
+  <script>
+
+    let emissions = new co2.co2();
+
+    async function main() {
+
+      // this is included to demonstrate checking a given domain
+      const hosting = co2.hosting
+      // is the result green?
+      const result = await hosting.check("google.com")
+      // should return true or false
+      console.log({result})
+
+      document.querySelector('form').addEventListener('submit', function (event) {
+        event.preventDefault();
+        event.stopPropagation();
+
+        const thisForm = event.target
+        const bytes = thisForm.querySelector('input').value
+        const result = emissions.perByte(bytes)
+
+        document.querySelector('.result').textContent = result
+        document.querySelector('body').classList = []
+      })
+    }
+    main()
+  </script>
+</body>
+
+</html>