diff --git a/codewars-badge.js b/codewars-badge.js
index 7c26060..ac79fa1 100644
--- a/codewars-badge.js
+++ b/codewars-badge.js
@@ -1,51 +1,107 @@
-// 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
+function addUser(username){
-class CodeWarsBadge extends HTMLElement {
- constructor() {
- super();
- this.attachShadow({ mode: "open" });
- this.userName = "CodeYourFuture";
- this.userData = [];
- }
-
- connectedCallback() {
- this.fetchActivity()
- .then(() => {
- this.render();
- })
- .catch((error) => {
- console.error(error);
- });
- }
-
- // 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
- }
-
- render() {
- this.shadowRoot.innerHTML = `
-
-
- ${this.userData.ranks.overall.name}
- `;
+ width:5rem;
+ }
+
+
+
+ ${this.userData.ranks.overall.name}
+
+ Name:
+ ${this.userData.name}
+
+
+ Honor:
+ ${this.userData.honor}
+
+
+ Clan :
+ ${this.userData.clan}
+
+
+ LeaderShip Board Position :
+ ${this.userData.leaderboardPosition}
+
+
+ Rank:
+ ${this.userData.ranks.overall.rank}
+
+
+ Score:
+ ${this.userData.ranks.overall.score}
+
+
+ JavaScript Score:
+ ${this.userData.ranks.languages.javascript.score}
+
+
+ Languages:
+ ${Object.keys(this.userData.ranks.languages)}
+
+
+ `
+ ;
+ }
}
-}
-
-customElements.define("codewars-badge", CodeWarsBadge);
+
+ customElements.define("codewars-adniya", CodeWarsBadge);
+ }
+
+ addUser("adniyaYousaf");
diff --git a/codewarsName.js b/codewarsName.js
new file mode 100644
index 0000000..9a69048
--- /dev/null
+++ b/codewarsName.js
@@ -0,0 +1,107 @@
+function addUser(username){
+
+class CodeWarsBadge extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+ this.userName = username;
+ this.userData = [];
+ }
+ connectedCallback() {
+ this.fetchActivity()
+ .then(() => {
+ this.render();
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ }
+
+ // fetch the data from the Codewars API
+ async fetchActivity(username) {
+ 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
+ }
+ render() {
+ this.shadowRoot.innerHTML = `
+
+
+
+ ${this.userData.ranks.overall.name}
+
+ Name:
+ ${this.userData.name}
+
+
+ Honor:
+ ${this.userData.honor}
+
+
+ Clan :
+ ${this.userData.clan}
+
+
+ LeaderShip Board Position :
+ ${this.userData.leaderboardPosition}
+
+
+ Rank:
+ ${this.userData.ranks.overall.rank}
+
+
+ Score:
+ ${this.userData.ranks.overall.score}
+
+
+ JavaScript Score:
+ ${this.userData.ranks.languages.javascript.score}
+
+
+ Languages:
+ ${Object.keys(this.userData.ranks.languages)}
+
+
+ `
+ ;
+ }
+}
+
+customElements.define("codewars-badge", CodeWarsBadge);
+}
+
+addUser("CodeYourFuture");
diff --git a/index.html b/index.html
index bbb3149..01017dd 100644
--- a/index.html
+++ b/index.html
@@ -11,7 +11,9 @@
-
+
+
+