CodeYourFuture · Fradoka · Apr 5, 2025
diff --git a/codewars-badge.js b/codewars-badge.js
@@ -6,34 +6,27 @@ class CodeWarsBadge extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
-    this.userName = "CodeYourFuture";
-    this.userData = [];
+    this._userData = null;
   }
 
-  connectedCallback() {
-    this.fetchActivity()
-      .then(() => {
-        this.render();
-      })
-      .catch((error) => {
-        console.error(error);
-      });
+  set userData(value) {
+    this._userData = value;
+    this.render();
+
+
   }
 
-  // fetch the data from the Codewars API
-  async fetchActivity() {
-    const response = await fetch(
-      `https://www.codewars.com/api/v1/users/${this.userName}`
-    );
-    const data = await response.json();
-    this.userData = data; // set the userData property with the fetched data
+  get userData() {
+    return this._userData;
   }
-
+  
   render() {
+    if (!this._userData) return;
+
     this.shadowRoot.innerHTML = `
     <style>
         :host {
-           --rank: ${this.userData.ranks.overall.color};
+           --rank: ${this._userData.ranks.overall.color};
            font: 600 100%/1 system-ui, sans-serif;
         }
         data { 
@@ -42,8 +35,8 @@ class CodeWarsBadge extends HTMLElement {
             padding: .25em .5em;
         }      
       </style>
-        <data value="${this.userData.ranks.overall.score}">
-        ${this.userData.ranks.overall.name}
+        <data value="${this._userData.ranks.overall.score}">
+        ${this._userData.ranks.overall.name}
         </data>`;
   }
 }

diff --git a/codewars-sticker.js b/codewars-sticker.js
@@ -0,0 +1,34 @@
+class StickerCard extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._userData = null;
+  }
+
+  set userData(value) {
+    this._userData = value;
+    this.render();
+  }
+
+  render() {
+    if (!this._userData) return;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          background: yellow;
+          padding: 10px;
+          border-radius: 8px;
+          box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
+          font-family: Arial, sans-serif;
+        }
+      </style>
+      <div>
+        <slot>${this._userData.language}: ${this._userData.name}</slot>
+      </div>
+    `;
+  }
+}
+
+customElements.define("sticker-card", StickerCard);
diff --git a/index.html b/index.html
@@ -9,9 +9,31 @@
       content="Extending HTML to create a new component"
     />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="stylesheet" href="./style.css">
   </head>
   <body>
-    <codewars-badge></codewars-badge>
+    <template id="card">
+      <section id="my_card">
+        <div id="badge_div"></div>
+        <h3>Full name</h3>
+        <h4>Clan</h4>
+        <h4>Score</h4>
+        <div id="stickers_div"></div>
+      </section>
+    </template>
+
+    <section id="search_bar">
+      <label for="username">
+        Enter Codewars Username:
+        <input type="text" id="username" placeholder="Codewars username..." />
+      </label>
+      <button id="fetchData">Get Card</button>
+    </section>
+
+    <section id="display"></section>
+
     <script async defer type="module" src="./codewars-badge.js"></script>
+    <script async defer type="module" src="./codewars-sticker.js"></script>
+    <script async defer type="module" src="./script.js"></script>
   </body>
 </html>
diff --git a/script.js b/script.js
@@ -0,0 +1,45 @@
+document.getElementById("fetchData").addEventListener("click", async () => {
+  const usernameInput = document.getElementById("username").value;
+
+  if (!usernameInput) {
+    alert("Please enter a username!");
+    return;
+  }
+
+  try {
+    // Fetch the data from Codewars API
+    const response = await fetch(
+      `https://www.codewars.com/api/v1/users/${usernameInput}`
+    );
+    const data = await response.json();
+
+    createCard(data)
+  } catch (error) {
+    console.error("Error fetching data:", error);
+  }
+});
+
+function createCard(user) {
+    document.getElementById("display").innerHTML = "";
+  const cardTemplate = document.getElementById("card").content.cloneNode(true);
+  const badgeContainer = cardTemplate.getElementById("badge_div");
+  const badge = document.createElement("codewars-badge");
+  badge.userData = user;
+  badgeContainer.appendChild(badge);
+
+  cardTemplate.querySelector("h3").textContent = user.name;
+  const h4Elements = cardTemplate.querySelectorAll("h4");
+  h4Elements[0].textContent = user.clan ? `Clan: ${user.clan}` : "Clan: N/A";
+  h4Elements[1].textContent = user.ranks.overall.score ? `Score: ${user.ranks.overall.score}` : 'Score: N/A';;
+  const stickerContainer = cardTemplate.getElementById("stickers_div");
+
+  Object.keys(user.ranks.languages).forEach(language => {
+    const sticker = document.createElement("sticker-card");
+    sticker.userData = {
+      language: language, // Add language name
+      ...user.ranks.languages[language], // Merge existing data
+    };
+    stickerContainer.appendChild(sticker)
+  });
+  document.getElementById("display").appendChild(cardTemplate);
+}
diff --git a/style.css b/style.css
@@ -0,0 +1,34 @@
+body {
+    margin: 25px;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+#search_bar {
+    border-radius: 25px;
+    border: 5px solid blue;
+    display: flex;
+    flex-direction: row;
+    gap: 50px;
+    padding: 10px;
+    width: 600px;
+    align-items: center;
+    margin-bottom: 50px;
+}
+
+#my_card {
+    background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 25px;
+}
+
+#stickers_div {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 20px;
+}