live course designation

Author: hmillersarah

ims-education.html

@@ -355,12 +355,29 @@ <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."
+										imgsrc="wp-content/course-badges/badge_ims_fundamentals.png"
 										level="Beginner"
 										cost="None"
 										badge="Yes"
 										time="32 hours"
+										link="https://learn.ibm.com/course/view.php?id=8829"
+									>
+									</course-card>
+
+									<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."
 										imgsrc="wp-content/course-badges/badge_ims_fundamentals.png"
+										level="Beginner"
+										cost="None"
+										badge="Yes"
+										time="32 hours"
 										link="https://learn.ibm.com/course/view.php?id=8829"
+										livelevel="Beginner"
+										livecost="$"
+										livebadge="No"
+										livetime="30 hours"
+										livelink="https://learn.ibm.com/course/view.php?id=8829"
 									>
 									</course-card>
 

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

@@ -21,18 +21,26 @@ img {
 /* Styling for a link group */
 .link-g {
     margin-top: 1.4em;
+    display: flex;
+    flex-flow: row wrap;
+    gap: 2em;
 }
 
 /* Styling for inline group (level, time) */
 .inline-g {
-    display: flex;
-    flex-flow: row wrap;
-    gap: 1em;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    width: 75%;
 }
 
 .inline-g p {
     padding: 0em;
     margin: 0em;
+    font-weight: bold;
+}
+
+.inline-g span {
+    font-weight: normal;
 }
 
 /* Styling for course card */

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

@@ -9,14 +9,23 @@
             <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>
+                <p>Self-paced:</p>
+                <p>Level: <span class="course-level"></span></p>
+                <p>Cost: <span class="course-cost"></span></p>
+                <p>Badge: <span class="course-badge"></span></p>
+                <p>Time: <span class="course-time"></span></p>
+            </div>
+            <div class="inline-g live-course">
+                <p>Instructor-led:</p>
+                <p>Level: <span class="live-level"></span></p>
+                <p>Cost: <span class="live-cost"></span></p>
+                <p>Badge: <span class="live-badge"></span></p>
+                <p>Time: <span class="live-time"></span></p>
             </div>
         </div>
         <div class="link-g">
-            <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
+            <a class="course-link" target="_blank" rel="noopener noreferrer">Self-paced course →</a>
+            <a class="live-link" target="_blank" rel="noopener noreferrer">Instructor-led course →</a>
         </div>
     </div>
 </div>

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

@@ -5,6 +5,18 @@ fetch("web-components/course-card/course-card.html")
 
 // Create web component
 function createComponent(html) {
+
+    function setContent(cssSelector, content, shadow) {
+        const selector = shadow.querySelector(cssSelector);
+        selector.textContent = content;
+    }
+
+    function setLink(cssSelector, url, name, shadow) {
+        const link = shadow.querySelector(cssSelector);
+        link.href = url;
+        link.setAttribute('aria-label', `Learn more about ${name}`);
+    }
+
     // Web component class
     class CourseCard extends HTMLElement {
 
@@ -15,7 +27,7 @@ function createComponent(html) {
 
         // Return array of properties to observe
         static get observedAttributes() {
-            return ['name', 'desc', 'level', 'cost', 'badge', 'time', 'link', 'imgsrc'];
+            return ['name', 'desc', 'imgsrc', 'level', 'cost', 'badge', 'time', 'link', 'livelevel', 'livecost', 'livebadge', 'livetime', 'livelink'];
         }
 
         // Called when an attribute is defined or changed
@@ -29,40 +41,44 @@ function createComponent(html) {
             // Create shadow root for element
             const shadow = this.attachShadow({mode: 'closed'});
             shadow.innerHTML = html;
+            
+            // Set course img
+            const courseImg = shadow.querySelector('.course-img');
+            courseImg.src = this.imgsrc;
+            courseImg.setAttribute('alt', `${this.name} badge`);
 
             // Set course name
-            const courseName = shadow.querySelector('.course-name');
-            courseName.textContent = this.name;
-
+            setContent('.course-name', this.name, shadow);
             // Set course desc
-            const courseDesc = shadow.querySelector('.course-desc');
-            courseDesc.textContent = this.desc;
-
+            setContent('.course-desc', this.desc, shadow);
             // Set course level
-            const courseLevel = shadow.querySelector('.course-level');
-            courseLevel.textContent = this.level;
-
+            setContent('.course-level', this.level, shadow);
             // Set course cost
-            const courseCost = shadow.querySelector('.course-cost');
-            courseCost.textContent = this.cost;
-
+            setContent('.course-cost', this.cost, shadow);
             // Set course badge
-            const courseBadge = shadow.querySelector('.course-badge');
-            courseBadge.textContent = this.badge;
-
+            setContent('.course-badge', this.badge, shadow);
             // Set course time
-            const courseTime = shadow.querySelector('.course-time');
-            courseTime.textContent = this.time;
-
+            setContent('.course-time', this.time, shadow);
             // Set course link
-            const courseLink = shadow.querySelector('.course-link');
-            courseLink.href = this.link;
-            courseLink.setAttribute('aria-label', `Learn more about ${this.name}`);
+            setLink('.course-link', this.link, this.name, shadow);
 
-            // Set course img
-            const courseImg = shadow.querySelector('.course-img');
-            courseImg.src = this.imgsrc;
-            courseImg.setAttribute('alt', `${this.name} badge`);
+            // Hide live course if not available
+            if (this.livelevel == undefined) {
+                const liveCourse = shadow.querySelector('.live-course');
+                const liveCourseLink = shadow.querySelector('.live-link');
+                liveCourse.style.display = liveCourseLink.style.display = "none";
+            } else {
+                // Set course level
+                setContent('.live-level', this.livelevel, shadow);
+                // Set course cost
+                setContent('.live-cost', this.livecost, shadow);
+                // Set course badge
+                setContent('.live-badge', this.livebadge, shadow);
+                // Set course time
+                setContent('.live-time', this.livetime, shadow);
+                // Set course link
+                setLink('.live-link', this.livelink, this.name, shadow);
+            }
         }
     }