diff --git a/codewars-badge.js b/codewars-badge.js
index 7c26060..b5578f7 100644
--- a/codewars-badge.js
+++ b/codewars-badge.js
@@ -1,17 +1,14 @@
-// This native web component fetches data from the Codewars API and renders it as a badge
-// 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
-
+// Existing component to display user's rank and honor points
class CodeWarsBadge extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.userName = "CodeYourFuture";
- this.userData = [];
+ this.userData = {};
}
connectedCallback() {
- this.fetchActivity()
+ this.fetchUserData()
.then(() => {
this.render();
})
@@ -20,32 +17,75 @@ class CodeWarsBadge extends HTMLElement {
});
}
- // fetch the data from the Codewars API
- async fetchActivity() {
+ async fetchUserData() {
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
+ this.userData = await response.json();
}
render() {
this.shadowRoot.innerHTML = `
-
-
+
${this.userData.ranks.overall.name}
- `;
+
+
+ Honor Points: ${this.userData.honor}
+ `;
}
}
customElements.define("codewars-badge", CodeWarsBadge);
+
+// New component to display user's username
+class CodeWarsName extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+ this.userName = "CodeYourFuture"; // Set default username
+ this.userData = {};
+ }
+
+ connectedCallback() {
+ this.fetchUserData()
+ .then(() => {
+ this.render();
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ }
+
+ async fetchUserData() {
+ const response = await fetch(
+ `https://www.codewars.com/api/v1/users/${this.userName}`
+ );
+ this.userData = await response.json();
+ }
+
+ render() {
+ this.shadowRoot.innerHTML = `
+
+ ${this.userData.username}`;
+ }
+}
+
+customElements.define("codewars-name", CodeWarsName);
diff --git a/index.html b/index.html
index bbb3149..c682871 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
+