From 5d6487723dd41b4ea649d724a8638a203325fb90 Mon Sep 17 00:00:00 2001
From: Owen Yamauchi <owen@rewiringamerica.org>
Date: Fri, 12 Jul 2024 11:06:28 -0400
Subject: [PATCH] Example code for listening for events (#178)

This is moved from the Zuplo repo, where I'm simplifying the docs to
avoid duplication.
---
 README.md | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index cf540e3..4b5b24e 100644
--- a/README.md
+++ b/README.md
@@ -53,9 +53,22 @@ Values are pre-populated from attributes on page load, and when the user clicks
 
 ### Events
 
-The calculator components dispatches custom events when the form is submitted and reset. Their `target` is the calculator component. You can listen for them with `addEventListener()`. These events are not cancelable.
-
-When the event is dispatched, the form submission or reset has already happened, and you don't need to do anything. These events are exposed for analytics purposes.
+The calculator component dispatches custom events when the form is submitted and reset. These are intended to be used for analytics. When the event is dispatched, the form submission or reset has already happened, and you don't need to do anything.
+
+The events' `target` is the calculator component. They are not cancelable. You can listen for them with `addEventListener()`, as follows:
+
+```html
+<script>
+  // NB:- place *after* the <rewiring-america-state-calculator> tag to ensure it exists:
+  var calc = document.getElementsByTagName(
+    'rewiring-america-state-calculator',
+  )[0];
+  calc.addEventListener('calculator-submitted', function (event) {
+    // replace the following with a call to your event tracking system:
+    console.log(event.detail.formData);
+  });
+</script>
+```
 
 | Event name             | `detail`                                                                                                                                                                                  |
 | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |