course card component setup

Author: hmillersarah

ims-education.html

@@ -77,6 +77,9 @@
 <!-- Hamburger menu -->
 <script src="wp-includes/js/navbar.js"></script>
 
+<!-- Web components -->
+<script src="web-components/course-card/course-card.js" type="module"></script>
+
 </head>
 
 <!-- MASTHEAD_SITENAV_BEGIN -->
@@ -349,6 +352,18 @@ <h1>IMS courses</h1>
 									<!-- ALL ROLES header -->
 									<h2 id="all">All roles</h2>
 
+								  	<course-card
+								  		name="IMS Fundamentals"
+										desc="Learn about the main components of IBM IMS: IMS Database Manager (IMS DB), IMS Transaction Manager (IMS TM), and common system services for IMS DB and IMS TM. Learn how these components work and interact with applications, how IMS databases differ from each other and differ from relational databases message types, security, maintenance, troubleshooting, and more."
+										level="Beginner"
+										cost="None"
+										badge="Yes"
+										time="32 hours"
+										imgsrc="wp-content/course-badges/badge_ims_fundamentals.png"
+										link="https://learn.ibm.com/course/view.php?id=8829"
+									>
+									</course-card>
+
 									<!-- card -->
 									<div class="ims-course-card">
 										<div class="course-c-id" id="ims-fundamentals"></div>

web-components/course-card/course-card.css

@@ -0,0 +1,20 @@
+<!-- HTML template -->
+<link href="" rel="stylesheet">
+<div class="course-card">
+    <div>
+        <img class="course-img" src="">
+    </div>
+    <div>
+        <h2 class="course-name"></h2>
+        <p class="course-desc"></p>
+        <div class="inline-g">
+            <p><b>Level: </b><span class="course-level"></span></p>
+            <p><b>Cost: </b><span class="course-cost"></span></p>
+            <p><b>Badge: </b><span class="course-badge"></span></p>
+            <p><b>Time: </b><span class="course-time"></span></p>
+        </div>
+    </div>
+    <div class="link-g">
+        <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
+    </div>
+</div>

web-components/course-card/course-card.html

@@ -0,0 +1,70 @@
+// Fetch HTML template
+fetch("web-components/course-card/course-card.html")
+    .then(stream => stream.text())
+    .then(text => createComponent(text))
+
+// Create web component
+function createComponent(html) {
+    // Web component class
+    class CourseCard extends HTMLElement {
+
+        // Creates element with default values
+        constructor() {
+            super();
+        }
+
+        // Return array of properties to observe
+        static get observedAttributes() {
+            return ['name', 'desc', 'level', 'cost', 'badge', 'time', 'link', 'imgsrc'];
+        }
+
+        // Called when an attribute is defined or changed
+        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;
+
+            // Set course name
+            const courseName = shadow.querySelector('.course-name');
+            courseName.textContent = this.name;
+
+            // Set course desc
+            const courseDesc = shadow.querySelector('.course-desc');
+            courseDesc.textContent = this.desc;
+
+            // Set course level
+            const courseLevel = shadow.querySelector('.course-level');
+            courseLevel.textContent = this.level;
+
+            // Set course cost
+            const courseCost = shadow.querySelector('.course-cost');
+            courseCost.textContent = this.cost;
+
+            // Set course badge
+            const courseBadge = shadow.querySelector('.course-badge');
+            courseBadge.textContent = this.badge;
+
+            // Set course time
+            const courseTime = shadow.querySelector('.course-time');
+            courseTime.textContent = this.time;
+
+            // Set course link
+            const courseLink = shadow.querySelector('.course-link');
+            courseLink.href = this.link;
+            courseLink.setAttribute('aria-label', `Learn more about ${this.name}`);
+
+            // Set course img
+            const courseImg = shadow.querySelector('.course-img');
+            courseImg.src = this.imgsrc;
+            courseImg.setAttribute('alt', `${this.name} badge`);
+        }
+    }
+
+    customElements.define('course-card', CourseCard);
+}

web-components/course-card/course-card.js

@@ -39,19 +39,19 @@ function createComponent(html) {
 
             // Set video name
             const videoName = shadow.querySelector('.video-name');
-            videoName.textContent = `${this.name}`;
+            videoName.textContent = this.name;
 
             // Set video desc
             const videoDesc = shadow.querySelector('.video-desc');
-            videoDesc.textContent = `${this.desc}`;
+            videoDesc.textContent = this.desc;
 
             // Set video level
             const videoLevel = shadow.querySelector('.video-level');
-            videoLevel.textContent = `${this.level}`;
+            videoLevel.textContent = this.level;
 
             // Set video time
             const videoTime = shadow.querySelector('.video-time');
-            videoTime.textContent = `${this.time}`;
+            videoTime.textContent = this.time;
 
             // Set video links
             const videoLink = shadow.querySelector('.video-link');
@@ -71,8 +71,8 @@ function createComponent(html) {
                 // Check if urls have been defined
                 if (url != undefined) {
                     linkObj.href = url;
-                    const altText = (linkText != 'now') ? `Watch ${this.name}, ${linkText}` : `Watch ${this.name}`; // Change link text if defined
-                    linkObj.setAttribute('alt', altText);
+                    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} →`;
                 }
             })