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 = `
-
-
- ${this.userData.ranks.overall.name}
- `;
+ 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"
/>
+
-
+