From 89b56a8546827b7582085da488bd8de0e7fd7ab5 Mon Sep 17 00:00:00 2001
From: karam <karam780@live.co.uk>
Date: Tue, 23 Jan 2024 12:58:18 +0000
Subject: [PATCH] completed task

---
 codewars-badge.js | 111 +++++++++++++++++++++++++++++-----------------
 index.html        |   3 +-
 style.css         |  37 ++++++++++++++++
 3 files changed, 109 insertions(+), 42 deletions(-)
 create mode 100644 style.css

diff --git a/codewars-badge.js b/codewars-badge.js
index 7c26060..bbfb41a 100644
--- a/codewars-badge.js
+++ b/codewars-badge.js
@@ -2,50 +2,79 @@
 // Here is some information about web component https://developer.mozilla.org/en-US/docs/Web/Web_Components
 // Here is the link to the Codewars API Docs: https://dev.codewars.com/#get-user
 
-class CodeWarsBadge extends HTMLElement {
-  constructor() {
-    super();
-    this.attachShadow({ mode: "open" });
-    this.userName = "CodeYourFuture";
-    this.userData = [];
-  }
+function extractCodeWarsAPI() {
+  return fetch("https://www.codewars.com/api/v1/users/karam-ali").then(
+    (res) => {
+      if (!res.ok) {
+        return "Error";
+      }
+      return res.json();
+    }
+  );
+}
 
-  connectedCallback() {
-    this.fetchActivity()
-      .then(() => {
-        this.render();
-      })
-      .catch((error) => {
-        console.error(error);
-      });
-  }
+const cardLayout = document.querySelector(".card_layout");
 
-  // 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
+function creatingElements(tag, classList, textContent) {
+  const creatingElement = document.createElement(tag);
+  if (classList) {
+    creatingElement.classList.add(classList);
   }
-
-  render() {
-    this.shadowRoot.innerHTML = `
-    <style>
-        :host {
-           --rank: ${this.userData.ranks.overall.color};
-           font: 600 100%/1 system-ui, sans-serif;
-        }
-        data { 
-            color: var(--rank);
-            border: 3px solid; 
-            padding: .25em .5em;
-        }      
-      </style>
-        <data value="${this.userData.ranks.overall.score}">
-        ${this.userData.ranks.overall.name}
-        </data>`;
+  if (textContent) {
+    creatingElement.textContent = textContent;
   }
+  return creatingElement;
 }
 
-customElements.define("codewars-badge", CodeWarsBadge);
+function renderUserData(data) {
+  const rankAndHonor = creatingElements("div", "rank__honor");
+  const rank = creatingElements("h1", "", `Rank: ${data.ranks.overall.name}`);
+  const honor = creatingElements("h1", "", `Honor: ${data.honor}`);
+
+  rankAndHonor.appendChild(rank);
+  rankAndHonor.appendChild(honor);
+
+  cardLayout.appendChild(rankAndHonor);
+}
+
+function renderMainInfo(data) {
+  const mainCardInfo = creatingElements("div", "main__details");
+  const username = creatingElements("h1", "", `Username: ${data.username}`);
+  const userID = creatingElements("h1", "", `User ID: ${data.id}`);
+  const languages = creatingElements("h1", "", "Languages: JavaScript");
+  const score = creatingElements(
+    "h1",
+    "",
+    `Score: ${data.ranks.overall.score}`
+  );
+  const totalCompleted = creatingElements(
+    "h1",
+    "",
+    `Total Completed: ${data.codeChallenges.totalCompleted}`
+  );
+
+  mainCardInfo.appendChild(username);
+  mainCardInfo.appendChild(userID);
+  mainCardInfo.appendChild(languages);
+  mainCardInfo.appendChild(score);
+  mainCardInfo.appendChild(totalCompleted);
+
+  cardLayout.appendChild(mainCardInfo);
+}
+
+function renderCardLabel() {
+  const cardTitle = creatingElements("div", "comp__title", "CodeWars Tracker");
+  cardLayout.insertAdjacentElement("beforeend", cardTitle);
+}
+
+function render() {
+  extractCodeWarsAPI()
+    .then((data) => {
+      renderUserData(data);
+      renderMainInfo(data);
+    })
+    .then(() => renderCardLabel());
+}
+
+window.onload = render;
+
diff --git a/index.html b/index.html
index bbb3149..79c14ff 100644
--- a/index.html
+++ b/index.html
@@ -9,9 +9,10 @@
       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>
+    <main class="card_layout"></main>
     <script async defer type="module" src="./codewars-badge.js"></script>
   </body>
 </html>
diff --git a/style.css b/style.css
new file mode 100644
index 0000000..40df965
--- /dev/null
+++ b/style.css
@@ -0,0 +1,37 @@
+* {
+    padding: 0;
+    margin: 0;
+    box-sizing: border-box;
+  }
+  
+  body {
+    color: #f7edb2;
+    font-family: "Inconsolata", sans-serif;
+    padding: 3rem;
+  }
+  
+  .card_layout {
+    width: 52rem;
+    height: 33rem;
+    background-color: #625f69;
+    border-radius: 12px;
+    display: grid;
+    grid-template-rows: 6.6rem 1fr 3rem;
+    align-items: center;
+  }
+  
+  .rank__honor {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 2rem;
+  }
+  
+  .main__details {
+    padding: 0 5.8rem;
+    line-height: 3.2rem;
+  }
+  
+  .comp__title {
+    justify-self: end;
+    padding: 0 2rem;
+  }
\ No newline at end of file