create footer component

Author: hmillersarah

web-components/footer/footer.html

@@ -0,0 +1,13 @@
+<link href="web-components/footer/footer.css" rel="stylesheet">
+<footer>
+    <ul>
+        <li><a href="https://www.ibm.com/contact/us" target="_blank">Contact</a></li>
+        <li><div></div></li>
+        <li><a href="http://www.ibm.com/privacy/us/en/" target="_blank">Privacy</a></li>
+        <li><div></div></li>
+        <li><a href="https://www.ibm.com/legal?lnk=flg-tous-usen" target="_blank">Terms of use</a></li>
+        <li><div></div></li>
+        <li><a href="http://www.ibm.com/accessibility/us/en/" target="_blank">Accessibility</a></li>
+    </ul>
+    <p>Copyright IBM Corporation 2023, 2025</p>
+</footer>

web-components/footer/footer.js

@@ -0,0 +1,36 @@
+// Fetch HTML template
+fetch("web-components/footer/footer.html")
+    .then(stream => stream.text())
+    .then(text => createComponent(text))
+
+/**
+ * Creates a web component using a given HTML template.
+ * @param {string} html - The HTML template.
+ * @returns {void}
+ */
+function createComponent(html) {
+    // Web component class
+    class Footer extends HTMLElement {
+
+        /**
+         * Called when an attribute is defined or changed.
+         * @param {string} property - The name of the attribute.
+         * @param {string} oldValue - The old value of the attribute.
+         * @param {string} newValue - The new value of the attribute.
+        */
+        attributeChangedCallback(property, oldValue, newValue) {
+            if (oldValue === newValue) return;
+            this[property] = newValue;
+        }
+    
+        // Invoked when element is added to document
+        connectedCallback() {
+            // Create shadow root for element
+            const shadow = this.attachShadow({mode: 'closed'});
+            shadow.innerHTML = html;
+        }
+    }
+
+    // Define new CourseCard element
+    customElements.define('imscentral-footer', Footer);
+}