Use arrow functions in DjlJson

`this` is spooky...

Also improve wording and order in example.html slightly

DjlJson.js

@@ -9,18 +9,23 @@
 // TODO: Allow accessing local objects
 // TODO: Implement attributeChangedCallback and re-fetch
 class DjlJson extends HTMLElement {
-  src; // string
-  prop; // string
-  placeholder; // string
+  src // string
+  prop // string
+  placeholder // string
 
   constructor() {
-    super();
+    super()
 
     this.src = this.getAttribute('src')
     this.prop = this.getAttribute('prop').split('.')
     this.placeholder = this.textContent
 
-    fetch(this.src)
+    this.fetchSrc()
+  }
+
+
+  fetchSrc = () => {
+    return fetch(this.src)
       .then(resp => {
         if (!resp.ok)
           throw new Error(`Unabled to retrieve resouce ${this.src} (${resp.statusText})`)
@@ -31,7 +36,7 @@ class DjlJson extends HTMLElement {
       .catch(err => { console.error(err); this.textContent = err })
   }
 
-  getProp(obj, prop) {
+  getProp = (obj, prop) => {
     if (!prop.length) return obj
     return this.getProp(obj[prop[0]], prop.slice(1))
   }

example.html

@@ -36,7 +36,7 @@
 
     <article id="djl-script">
       <p>Below are some examples of the djl-code element. It executes the JavaScript given as it's text, and allows editing and re-execution by clicking on it</p>
-      <p><djl-script>['This','is','a','djl-script','element', '(click', 'on', 'me', 'to', 'edit).'].join(' ');</djl-script></p>
+      <p>5,000 * 57 = <djl-script>5000 * 57</djl-script></p>
       <p><djl-script>`Happy ${['Sun', 'Mon', 'Tues', 'Wednes', 'Thurs', 'Fri', 'Satur'][new Date().getDay()]}day`</djl-script></p>
     </article>
 
@@ -49,11 +49,11 @@
 
     <article id="djl-json">
       <p>Below are some examples of the djl-json element. It retrieves a JSON document from <code>src</code>, and displays the property <code>prop</code></p>
-      <p>My pets are called:
+      <p>According to example.json, my pets are called:
           <djl-json src="example.json" prop="about.pets"></djl-json>
       </p>
-      <p>My name in example.json is: <djl-json src="example.json" prop="about.name"><code>loading...</code></djl-json></p>
-      <p>Stick a spinner inside to let people know you're getting something!<djl-json src="example.json" prop="about.dob"><djl-spinner/></djl-json> (you may need to throttle your network if running this locally)</p>
+      <p>...and my name is: <djl-json src="example.json" prop="about.name"><code>loading...</code></djl-json></p>
+      <p>Stick a spinner inside to let people know you're getting your date of birth: <djl-json src="example.json" prop="about.dob"><djl-spinner/></djl-json><br />(you may need to throttle your network to see this if you're running this locally)</p> 
     </article>
   </body>
 </html>