add web components

solygambas · solygambas · commit e749771a8acd · 2022-01-31T08:27:45.000+01:00
diff --git a/playground/web-components/README.md b/playground/web-components/README.md
@@ -0,0 +1,17 @@
+# Web Components
+
+A quick intro to web components.
+
+<p align="center">
+    <img src="screenshot.png">
+</p>
+
+## Features
+
+- creating a custom web component.
+- setting up a shadow DOM.
+- generating an HTML template.
+- displaying slots.
+- handling events.
+
+Based on [Web Components Crash Course](https://www.youtube.com/watch?v=PCWaFLy3VUo) by Brad Traversy (2020).
diff --git a/playground/web-components/index.html b/playground/web-components/index.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Web Components Example</title>
+    <style>
+      body {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        min-height: 100vh;
+      }
+      /* h3 {
+        color: purple;
+      } */
+    </style>
+  </head>
+  <body>
+    <!-- <h3>Hello World</h3> -->
+    <user-card
+      name="John Doe"
+      avatar="https://randomuser.me/api/portraits/men/1.jpg"
+    >
+      <div slot="email">johndoe@gmail.com</div>
+      <div slot="phone">555-555-5555</div>
+    </user-card>
+    <user-card
+      name="Jane Doe"
+      avatar="https://randomuser.me/api/portraits/women/1.jpg"
+    >
+      <div slot="email">janedoe@gmail.com</div>
+      <div slot="phone">333-333-3333</div>
+    </user-card>
+    <script src="userCard.js"></script>
+  </body>
+</html>
diff --git a/playground/web-components/screenshot.png b/playground/web-components/screenshot.png
diff --git a/playground/web-components/userCard.js b/playground/web-components/userCard.js
@@ -0,0 +1,78 @@
+const template = document.createElement("template");
+template.innerHTML = `
+<style>
+.user-card {
+    font-family: "Arial", sans-serif;
+    background-color: #f4f4f4;
+    width: 500px;
+    display: grid;
+    grid-template-columns: 1fr 2fr;
+    gap: 10px;
+    margin-bottom: 15px;
+    border-bottom: 5px solid darkorchid;
+  }
+  .user-card img {
+    width: 100%;
+  }
+  .user-card button {
+    cursor: pointer;
+    background-color: darkorchid;
+    color: #fff;
+    border: 0;
+    border-radius: 5px;
+    padding: 5px 10px;
+  }
+</style>
+<div class="user-card">
+    <img />
+    <div>
+        <h3></h3>
+        <div class="info">
+            <p><slot name="email" /></p>
+            <p><slot name="phone" /></p>
+        </div>
+        <button id="toggle-info">Hide Info</button>
+    </div>
+</div>
+`;
+
+class UserCard extends HTMLElement {
+  constructor() {
+    super();
+
+    this.showInfo = true;
+
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(template.content.cloneNode(true));
+    this.shadowRoot.querySelector("h3").innerText = this.getAttribute("name");
+    this.shadowRoot.querySelector("img").src = this.getAttribute("avatar");
+    // this.innerHTML = `<style>h3 {color: coral}</style><h3>${this.getAttribute(
+    //   "name"
+    // )}</h3>`;
+  }
+
+  toggleInfo() {
+    this.showInfo = !this.showInfo;
+    const info = this.shadowRoot.querySelector(".info");
+    const toggleButton = this.shadowRoot.querySelector("#toggle-info");
+    if (this.showInfo) {
+      info.style.display = "block";
+      toggleButton.innerText = "Hide Info";
+    } else {
+      info.style.display = "none";
+      toggleButton.innerText = "Show Info";
+    }
+  }
+
+  connectedCallback() {
+    this.shadowRoot
+      .querySelector("#toggle-info")
+      .addEventListener("click", () => this.toggleInfo());
+  }
+
+  disconnectedCallback() {
+    this.shadowRoot.querySelector("#toggle-info").removeEventListener();
+  }
+}
+
+window.customElements.define("user-card", UserCard);
