rename all video elements to card

Author: hmillersarah

web-components/card-tile/card-tile.css

@@ -26,20 +26,20 @@ a {
 }
 
 /* Styling for video card */
-.video-card {
+.card {
     background-color: var(--bg-light-gray);
     margin: 1em;
     padding: 2em;
     display: flex;
     flex-flow: column nowrap;
 }
 
-.video-card div:nth-child(0) {
+.card div:nth-child(0) {
     flex-grow: 1;
 }
 
 /* Places 'watch now' at the bottom of the video card */
-.video-card div:nth-child(1) {
+.card div:nth-child(1) {
     flex-grow: 4;
 }
 
@@ -58,7 +58,7 @@ a {
 /* 1024px and above screen sizes */
 @media screen and (min-width: 64em) {
     /* Set consistent height for video card */
-    .video-card {
+    .card {
         height: 18.75em;
     }
 }

web-components/card-tile/card-tile.html

@@ -1,17 +1,17 @@
 <!-- HTML template -->
 <link href="web-components/card-tile/card-tile.css" rel="stylesheet">
-<div class="video-card">
+<div class="card">
     <div>
-    <h2 class="video-name"></h2>
-    <p class="video-desc"></p>
+    <h2 class="card-name"></h2>
+    <p class="card-desc"></p>
     <div class="inline-g">
-        <p><b>Level: </b><span class="video-level"></span></p>
-        <p><b>Time: </b><span class="video-time"></span></p>
+        <p><b>Level: </b><span class="card-level"></span></p>
+        <p><b>Time: </b><span class="card-time"></span></p>
     </div>
     </div>
     <div class="link-g">
-    <a class="video-link" target="_blank" rel="noopener noreferrer"></a>
-    <a class="video-link-2" target="_blank" rel="noopener noreferrer"></a>
-    <a class="video-link-3" target="_blank" rel="noopener noreferrer"></a>
+    <a class="card-link" target="_blank" rel="noopener noreferrer"></a>
+    <a class="card-link-2" target="_blank" rel="noopener noreferrer"></a>
+    <a class="card-link-3" target="_blank" rel="noopener noreferrer"></a>
     </div>
 </div>

web-components/card-tile/card-tile.js

@@ -41,10 +41,10 @@ function createComponent(html) {
         }
     }
 
-    // Web component class representing a video card.
+    // Web component class representing a card card.
     class CardTile extends HTMLElement {
 
-        // Creates an instance of VideoCard
+        // Creates an instance of cardCard
         constructor() {
             super();
             this.level = 'Varies';
@@ -78,26 +78,22 @@ function createComponent(html) {
             // Create shadow root for element
             const shadow = this.attachShadow({mode: 'closed'});
             shadow.innerHTML = html;
-            // shadow.append(
-            //     // document.getElementById('video-card').content.cloneNode(true) // Use this line to test template in ims-videos.html
-            //     template.content.cloneNode(true)
-            // );
 
-            // Set video name
-            setContent('.video-name', this.name, shadow);
-            // Set video desc
-            setContent('.video-desc', this.desc, shadow);
-            // Set video level
-            setContent('.video-level', this.level, shadow);
-            // Set video time
-            setContent('.video-time', this.time, shadow);
-            // Set video links
-            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);
+            // Set card name
+            setContent('.card-name', this.name, shadow);
+            // Set card desc
+            setContent('.card-desc', this.desc, shadow);
+            // Set card level
+            setContent('.card-level', this.level, shadow);
+            // Set card time
+            setContent('.card-time', this.time, shadow);
+            // Set card links
+            setLink(this.link, this.linktext, '.card-link', this.name, shadow);
+            setLink(this.link2, this.linktext2, '.card-link-2', this.name, shadow);
+            setLink(this.link3, this.linktext3, '.card-link-3', this.name, shadow);
         }
     }
 
-    // Define new VideoCard element
+    // Define new card tile element
     customElements.define('card-tile', CardTile);
 }