refactor hello-world component

This commit is contained in:
Ayo 2023-11-21 11:23:20 +01:00
parent a7f3dfaf8e
commit ad359a60ef

View file

@ -2,17 +2,18 @@
import WebComponent from "../src/WebComponent.js"; import WebComponent from "../src/WebComponent.js";
export class HelloWorld extends WebComponent { export class HelloWorld extends WebComponent {
static properties = ["my-name", "emotion"]; static properties = ["count", "emotion"];
onInit() { onInit() {
let count = 0; this.props.count = 0;
this.onclick = () => (this.props.myName = `Clicked ${++count}`); this.onclick = () => ++this.props.count;
} }
get template() { get template() {
return `<button id="btn">Hello ${this.props.myName ?? "World"}${ const label = this.props.count ? `Clicked ${this.props.count}` : "World";
this.props.emotion === "sad" ? ". 😭" : "! 🙌" const emote = this.props.emotion === "sad" ? ". 😭" : "! 🙌";
}</button>`;
return `<button id="btn">Hello ${label}${emote}</button>`;
} }
} }