add helper functions to video card component

Author: hmillersarah

web-components/video-card/video-card.js

@@ -3,8 +3,44 @@ fetch("web-components/video-card/video-card.html")
     .then(stream => stream.text())
     .then(text => createComponent(text))
 
-// Create web component
+/**
+ * Creates a web component using a given HTML template.
+ * @param {string} html - The HTML template.
+ * @returns {void}
+ */
 function createComponent(html) {
+
+    /**
+     * Sets the content of an element based on a CSS selector.
+     * @param {string} cssSelector - The CSS selector of the element to set the content for.
+     * @param {string} content - The content to set for the element.
+     * @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
+     * @returns {void}
+     */
+    function setContent(cssSelector, content, shadow) {
+        const selector = shadow.querySelector(cssSelector);
+        selector.textContent = content;
+    }
+
+    /**
+     * Sets the link of an element based on a CSS selector.
+     * @param {string} url - The link url.
+     * @param {string} linkText - The link text.
+     * @param {string} cssSelector - The CSS selector of the element to set the content for.
+     * @param {string} name - The name of the element containing the link.
+     * @param {boolean} shadow - A boolean indicating whether to use the shadow DOM for the element.
+     * @returns {void}
+     */
+    function setLink(url, linkText, cssSelector, name, shadow) {
+        if (url != undefined) {
+            const linkObj = shadow.querySelector(cssSelector);
+            linkObj.href = url;
+            const ariaText = (linkText != 'now') ? `Watch ${name}, ${linkText}` : `Watch ${name}`; // Change link text if defined
+            linkObj.setAttribute('aria-label', ariaText);
+            linkObj.textContent = `Watch ${linkText} →`;
+        }
+    }
+
     // Web component class
     class VideoCard extends HTMLElement {
 
@@ -38,44 +74,17 @@ function createComponent(html) {
             // );
 
             // Set video name
-            const videoName = shadow.querySelector('.video-name');
-            videoName.textContent = this.name;
-
+            setContent('.video-name', this.name, shadow);
             // Set video desc
-            const videoDesc = shadow.querySelector('.video-desc');
-            videoDesc.textContent = this.desc;
-
+            setContent('.video-desc', this.desc, shadow);
             // Set video level
-            const videoLevel = shadow.querySelector('.video-level');
-            videoLevel.textContent = this.level;
-
+            setContent('.video-level', this.level, shadow);
             // Set video time
-            const videoTime = shadow.querySelector('.video-time');
-            videoTime.textContent = this.time;
-
+            setContent('.video-time', this.time, shadow);
             // Set video links
-            const videoLink = shadow.querySelector('.video-link');
-            const videoLink2 = shadow.querySelector('.video-link-2');
-            const videoLink3 = shadow.querySelector('.video-link-3');
-            const links = [
-                [this.link, this.linktext, videoLink],
-                [this.link2, this.linktext2, videoLink2],
-                [this.link3, this.linktext3, videoLink3]
-            ]
-
-            links.forEach(link => {
-                const url = link[0];
-                const linkText = link[1];
-                const linkObj = link[2];
-
-                // Check if urls have been defined
-                if (url != undefined) {
-                    linkObj.href = url;
-                    const ariaText = (linkText != 'now') ? `Watch ${this.name}, ${linkText}` : `Watch ${this.name}`; // Change link text if defined
-                    linkObj.setAttribute('aria-label', ariaText);
-                    linkObj.textContent = `Watch ${linkText} →`;
-                }
-            })
+            setLink(this.link, this.linktext, '.video-link', this.name, shadow);
+            setLink(this.link2, this.linktext2, '.video-link-2', this.name, shadow);
+            setLink(this.link3, this.linktext3, '.video-link-3', this.name, shadow);
         }
     }