Use template literal and const instead of var

Author: knagurski

popup-info-box-web-component/main.js

@@ -5,66 +5,70 @@ class PopUpInfo extends HTMLElement {
     super();
 
     // Create a shadow root
-    var shadow = this.attachShadow({mode: 'open'});
+    const shadow = this.attachShadow({mode: 'open'});
 
     // Create spans
-    var wrapper = document.createElement('span');
-    wrapper.setAttribute('class','wrapper');
-    var icon = document.createElement('span');
-    icon.setAttribute('class','icon');
+    const wrapper = document.createElement('span');
+    wrapper.setAttribute('class', 'wrapper');
+
+    const icon = document.createElement('span');
+    icon.setAttribute('class', 'icon');
     icon.setAttribute('tabindex', 0);
-    var info = document.createElement('span');
-    info.setAttribute('class','info');
+
+    const info = document.createElement('span');
+    info.setAttribute('class', 'info');
 
     // Take attribute content and put it inside the info span
-    var text = this.getAttribute('data-text');
+    const text = this.getAttribute('data-text');
     info.textContent = text;
 
     // Insert icon
-    var imgUrl;
+    let imgUrl;
     if(this.hasAttribute('img')) {
       imgUrl = this.getAttribute('img');
     } else {
       imgUrl = 'img/default.png';
     }
-    var img = document.createElement('img');
+
+    const img = document.createElement('img');
     img.src = imgUrl;
     icon.appendChild(img);
 
     // Create some CSS to apply to the shadow dom
-    var style = document.createElement('style');
+    const style = document.createElement('style');
     console.log(style.isConnected);
 
-    style.textContent = '.wrapper {' +
-                           'position: relative;' +
-                        '}' +
-
-                         '.info {' +
-                            'font-size: 0.8rem;' +
-                            'width: 200px;' +
-                            'display: inline-block;' +
-                            'border: 1px solid black;' +
-                            'padding: 10px;' +
-                            'background: white;' +
-                            'border-radius: 10px;' +
-                            'opacity: 0;' +
-                            'transition: 0.6s all;' +
-                            'position: absolute;' +
-                            'bottom: 20px;' +
-                            'left: 10px;' +
-                            'z-index: 3;' +
-                          '}' +
+    style.textContent = `
+      .wrapper {
+        position: relative;
+      }
 
-                          'img {' +
-                            'width: 1.2rem' +
-                          '}' +
+      .info {
+        font-size: 0.8rem;
+        width: 200px;
+        display: inline-block;
+        border: 1px solid black;
+        padding: 10px;
+        background: white;
+        border-radius: 10px;
+        opacity: 0;
+        transition: 0.6s all;
+        position: absolute;
+        bottom: 20px;
+        left: 10px;
+        z-index: 3;
+      }
 
-                          '.icon:hover + .info, .icon:focus + .info {' +
-                            'opacity: 1;' +
-                          '}';
+      img {
+        width: 1.2rem;
+      }
 
-    // attach the created elements to the shadow dom
+      .icon:hover + .info, .icon:focus + .info {
+        opacity: 1;
+      }
+    `;
 
+    // Attach the created elements to the shadow dom
     shadow.appendChild(style);
     console.log(style.isConnected);
     shadow.appendChild(wrapper);