chore: update examples

README.md

@@ -21,7 +21,7 @@ export class HelloWorld extends WebComponent {
             this.emotion === 'sad'
                 ? '. 😭'
                 : '! 🙌'
-        }</h1>
+        }</h1>`
   }
 }
 ```
@@ -38,4 +38,4 @@ Then changes in the attributes observed will cause the UI to render.
 </script>
 ```
 
-![UI showing feeling toward Web Components changing from SAD to EXCITED](./assets/wc-feeling.gif)
+<img alt="UI showing feeling toward Web Components changing from SAD to EXCITED" src="./assets/wc-base-demo.gif" width="250" />

components/HelloWorld.mjs

@@ -1,34 +1,20 @@
 // @ts-check
 import { WebComponent } from "./WebComponent.mjs";
-const  emotionPostfix = {
-    excited: "!",
-    sad: " :(",
-  };
-const emotionColor = {
-    excited: "green",
-    sad: "red",
-  };
 
-/**
- * Component to greet a person
- *  and display sentiment toward web components
- */
 export class HelloWorld extends WebComponent {
   name = "World";
   emotion = "excited";
 
-
   static get observedAttributes() {
     return ["name", "emotion"];
   }
 
   get template() {
     return `
-        <h1>Hello ${this.name}${emotionPostfix[this.emotion]}</h1>
+        <h1>Hello ${this.name}${
-        <h2>How do you feel about web components:
+            this.emotion === 'sad'
-            <span style="color:${emotionColor[this.emotion]}">
+                ? '. 😭'
-                ${this.emotion.toUpperCase()}
+                : '! 🙌'
-            </span>
+        }</h1>`
-        </h2>`;
   }
 }