wip: working episode-container

assets/components/brock.js

@@ -1,25 +0,0 @@
-export default class Brock extends HTMLElement {
-    constructor() {
-        super();
-    }
-    connectedCallback() {
-        this.render();
-    }
-
-    render() {
-        this.innerHTML = `
-            Yo, yo, yo! Waddup ${this.name}, doe, it's Brocky fresh!
-        `;
-    }
-
-    // attribute change
-    attributeChangedCallback(property, oldValue, newValue) {
-        if (oldValue === newValue) return;
-        this[ property ] = newValue;
-        this.render();
-    }
-
-    static get observedAttributes() {
-        return ['name'];
-    }
-}

assets/components/episode-container.js

@@ -0,0 +1,34 @@
+export default class EpisodeContainer extends HTMLElement {
+    #resultsToggleBtnEl;
+    #resultsTableEl;
+    #resultsCountBadgeEl;
+
+    constructor() {
+        super();
+        this.#resultsToggleBtnEl = this.querySelector('.dropdown-button');
+        this.#resultsCountBadgeEl = this.querySelector('.results-count-badge');
+        this.#resultsTableEl = this.querySelector('.results-container');
+
+        this.#resultsToggleBtnEl.addEventListener('click', () => this.toggleResults());
+        this.#resultsCountBadgeEl.addEventListener('click', () => this.toggleResults());
+    }
+    connectedCallback() {
+
+    }
+
+    // attribute change
+    attributeChangedCallback(property, oldValue, newValue) {
+        if (oldValue === newValue) return;
+        this[ property ] = newValue;
+    }
+
+    static get observedAttributes() {
+        return ['name'];
+    }
+
+    toggleResults() {
+        this.#resultsToggleBtnEl.classList.toggle('rotate-90');
+        this.#resultsToggleBtnEl.classList.toggle('-rotate-90');
+        this.#resultsTableEl.classList.toggle('hidden');
+    }
+}