kylie-sre
diff --git a/‎popup-info-box-external-stylesheet/.DS_Store‎
6 KB b/‎popup-info-box-external-stylesheet/.DS_Store‎
6 KB
diff --git a/‎popup-info-box-external-stylesheet/img/alt.png‎
4.57 KB b/‎popup-info-box-external-stylesheet/img/alt.png‎
4.57 KB
diff --git a/‎popup-info-box-external-stylesheet/img/default.png‎
3.39 KB b/‎popup-info-box-external-stylesheet/img/default.png‎
3.39 KB
diff --git a/‎popup-info-box-external-stylesheet/index.html‎
Lines changed: 19 additions & 0 deletions b/‎popup-info-box-external-stylesheet/index.html‎
Lines changed: 19 additions & 0 deletions
diff --git a/‎popup-info-box-external-stylesheet/main.js‎
Lines changed: 51 additions & 0 deletions b/‎popup-info-box-external-stylesheet/main.js‎
Lines changed: 51 additions & 0 deletions
diff --git a/‎popup-info-box-external-stylesheet/style.css‎
Lines changed: 27 additions & 0 deletions b/‎popup-info-box-external-stylesheet/style.css‎
Lines changed: 27 additions & 0 deletions
diff --git a/‎popup-info-box-web-component/.DS_Store‎
6 KB b/‎popup-info-box-web-component/.DS_Store‎
6 KB
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Pop-up info box — web components</title>
+    <script src="main.js" defer></script>
+  </head>
+  <body>
+    <h1>Pop-up info widget - web components</h1>
+
+    <form>
+      <div>
+        <label for="cvc">Enter your CVC <popup-info img="img/alt.png" data-text="Your card validation code (CVC) is an extra security feature — it is the last 3 or 4 numbers on the back of your card."></popup-info></label>
+        <input type="text" id="cvc">
+      </div>
+    </form>
+
+  </body>
+</html>
@@ -0,0 +1,51 @@
+// Create a class for the element
+class PopUpInfo extends HTMLElement {
+  constructor() {
+    // Always call super first in constructor
+    super();
+
+    // Create a shadow root
+    const shadow = this.attachShadow({mode: 'open'});
+
+    // Create spans
+    const wrapper = document.createElement('span');
+    wrapper.setAttribute('class', 'wrapper');
+
+    const icon = document.createElement('span');
+    icon.setAttribute('class', 'icon');
+    icon.setAttribute('tabindex', 0);
+
+    const info = document.createElement('span');
+    info.setAttribute('class', 'info');
+
+    // Take attribute content and put it inside the info span
+    const text = this.getAttribute('data-text');
+    info.textContent = text;
+
+    // Insert icon
+    let imgUrl;
+    if(this.hasAttribute('img')) {
+      imgUrl = this.getAttribute('img');
+    } else {
+      imgUrl = 'img/default.png';
+    }
+
+    const img = document.createElement('img');
+    img.src = imgUrl;
+    icon.appendChild(img);
+
+    // Apply external styles to the shadow dom
+    const linkElem = document.createElement('link');
+    linkElem.setAttribute('rel', 'stylesheet');
+    linkElem.setAttribute('href', 'style.css');
+
+    // Attach the created elements to the shadow dom
+    shadow.appendChild(linkElem);
+    shadow.appendChild(wrapper);
+    wrapper.appendChild(icon);
+    wrapper.appendChild(info);
+  }
+}
+
+// Define the new element
+customElements.define('popup-info', PopUpInfo);
@@ -0,0 +1,27 @@
+.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;
+}
+
+img {
+  width: 1.2rem;
+}
+
+.icon:hover + .info, .icon:focus + .info {
+  opacity: 1;
+}