update course description with live designation

Author: hmillersarah

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

@@ -48,12 +48,12 @@ img {
 .inline-g p {
     padding: 0em;
     margin: 0em;
-    font-weight: bold;
+    /* font-weight: bold; */
 }
 
-.inline-g span {
+/* .inline-g span {
     font-weight: normal;
-}
+} */
 
 /* Styling for course card */
 .course-card {

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

@@ -10,35 +10,16 @@ <h2 class="course-name"></h2>
             <p class="course-desc"></p>
             <div class="column-g">
                 <div class="inline-g">
-                    <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>
-                <!-- Uncomment if using self-paced/live distinction -->
-                <!-- <div class="inline-g">
-                    <p>Self-paced:</p>
-                    <div>
-                        <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> -->
-                <div class="inline-g live-course">
-                    <p>Instructor-led:</p>
-                    <div>
-                        <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>
+                    <p><b><span class="course-type"></span></b> Yes</p>
+                    <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>
         <div class="link-g">
             <a class="course-link" target="_blank" rel="noopener noreferrer">Learn more →</a>
-            <a class="live-link" target="_blank" rel="noopener noreferrer">Instructor-led course →</a>
         </div>
     </div>
 </div>

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

@@ -23,11 +23,12 @@ function createComponent(html) {
         // Creates element with default values
         constructor() {
             super();
+            this.selfpaced = 'true';
         }
 
         // Return array of properties to observe
         static get observedAttributes() {
-            return ['name', 'desc', 'imgsrc', 'level', 'cost', 'badge', 'time', 'link', 'livelevel', 'livecost', 'livebadge', 'livetime', 'livelink'];
+            return ['name', 'desc', 'imgsrc', 'selfpaced', 'level', 'cost', 'badge', 'time', 'link'];
         }
 
         // Called when an attribute is defined or changed
@@ -53,6 +54,9 @@ function createComponent(html) {
             setContent('.course-desc', this.desc, shadow);
             // Set course level
             setContent('.course-level', this.level, shadow);
+            // Set course type
+            const courseType = this.selfpaced == 'true' ? 'Self-paced: ' : 'Instructor-led: ';
+            setContent('.course-type', courseType, shadow);
             // Set course cost
             setContent('.course-cost', this.cost, shadow);
             // Set course badge
@@ -63,22 +67,22 @@ function createComponent(html) {
             setLink('.course-link', this.link, this.name, shadow);
 
             // 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);
-            }
+            // 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);
+            // }
         }
     }