diff --git a/README.md b/README.md index 91f8776..449cad1 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ export class HelloWorld extends WebComponent { this.emotion === 'sad' ? '. 😭' : '! 🙌' - } + }` } } ``` @@ -38,4 +38,4 @@ Then changes in the attributes observed will cause the UI to render. ``` -![UI showing feeling toward Web Components changing from SAD to EXCITED](./assets/wc-feeling.gif) +UI showing feeling toward Web Components changing from SAD to EXCITED diff --git a/assets/wc-base-demo.gif b/assets/wc-base-demo.gif new file mode 100644 index 0000000..bfe54ce Binary files /dev/null and b/assets/wc-base-demo.gif differ diff --git a/components/HelloWorld.mjs b/components/HelloWorld.mjs index bbfe786..1c58310 100644 --- a/components/HelloWorld.mjs +++ b/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 ` -

Hello ${this.name}${emotionPostfix[this.emotion]}

-

How do you feel about web components: - - ${this.emotion.toUpperCase()} - -

`; +

Hello ${this.name}${ + this.emotion === 'sad' + ? '. 😭' + : '! 🙌' + }

` } }