From 19c1c19a62454a42f1a13af54492ceabafe365a9 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 18 Dec 2023 16:57:12 +0000 Subject: [PATCH 1/4] completed --- codewars-badge.js | 76 ++++++++++++++++++++++++++++++++++++++++------- index.html | 4 ++- 2 files changed, 68 insertions(+), 12 deletions(-) diff --git a/codewars-badge.js b/codewars-badge.js index 7c26060..3f0fc73 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -1,6 +1,3 @@ -// 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 class CodeWarsBadge extends HTMLElement { constructor() { @@ -9,7 +6,6 @@ class CodeWarsBadge extends HTMLElement { this.userName = "CodeYourFuture"; this.userData = []; } - connectedCallback() { this.fetchActivity() .then(() => { @@ -25,10 +21,10 @@ class CodeWarsBadge extends HTMLElement { 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); + + diff --git a/index.html b/index.html index bbb3149..82a715f 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,9 @@ - +
+ + From cddae0370a79117dbf662d88fcb63001d4042261 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 18 Dec 2023 16:58:56 +0000 Subject: [PATCH 2/4] added correct path of js file --- codewarsName.js | 106 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 2 +- 2 files changed, 107 insertions(+), 1 deletion(-) create mode 100644 codewarsName.js diff --git a/codewarsName.js b/codewarsName.js new file mode 100644 index 0000000..968e4cb --- /dev/null +++ b/codewarsName.js @@ -0,0 +1,106 @@ + +class CodeWarsBadge extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.userName = "adniyaYousaf"; + 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} + + 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-adniya", CodeWarsBadge); + + + \ No newline at end of file diff --git a/index.html b/index.html index 82a715f..01017dd 100644 --- a/index.html +++ b/index.html @@ -13,7 +13,7 @@
- + From 64a3b4c178f3473387177d0be2408eea50b2e735 Mon Sep 17 00:00:00 2001 From: = Date: Mon, 18 Dec 2023 17:15:46 +0000 Subject: [PATCH 3/4] added the styles --- codewars-badge.js | 6 +++--- codewarsName.js | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/codewars-badge.js b/codewars-badge.js index 3f0fc73..e370113 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -41,14 +41,14 @@ class CodeWarsBadge extends HTMLElement { flex-direction:column; gap:1rem; width:60%; - background:#F6E8EA; + background:black; + color:white; padding:2rem; border:2px solid black; } .label{ text-align:center; - color: black; - border: 3px solid black; + border: 3px solid white; padding: .25em .5em; width:15rem; } diff --git a/codewarsName.js b/codewarsName.js index 968e4cb..944f6e6 100644 --- a/codewarsName.js +++ b/codewarsName.js @@ -41,14 +41,14 @@ class CodeWarsBadge extends HTMLElement { flex-direction:column; gap:1rem; width:60%; - background:#F6E8EA; + background:black; + color:white; padding:2rem; border:2px solid black; } .label{ text-align:center; - color: black; - border: 3px solid black; + border: 3px solid white; padding: .25em .5em; width:15rem; } From e3e77a1a71966c2d3f5a11d28cbd58524ccc40eb Mon Sep 17 00:00:00 2001 From: = Date: Mon, 18 Dec 2023 17:32:03 +0000 Subject: [PATCH 4/4] added function for reusability --- codewars-badge.js | 206 +++++++++++++++++++++++----------------------- codewarsName.js | 205 ++++++++++++++++++++++----------------------- 2 files changed, 207 insertions(+), 204 deletions(-) diff --git a/codewars-badge.js b/codewars-badge.js index e370113..ac79fa1 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -1,105 +1,107 @@ +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} - - 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)} - -
- ` - ; + justify-content:space-between; + } + .container{ + display:flex; + flex-direction:column; + gap:1rem; + width:60%; + background:black; + color:white; + padding:2rem; + border:2px solid black; + } + .label{ + text-align:center; + border: 3px solid white; + padding: .25em .5em; + width:15rem; + } + .rank{ + color:var(--rank); + border: 3px solid var(--rank); + padding: .25em .5em; + 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 index 944f6e6..9a69048 100644 --- a/codewarsName.js +++ b/codewarsName.js @@ -1,106 +1,107 @@ +function addUser(username){ class CodeWarsBadge extends HTMLElement { - constructor() { - super(); - this.attachShadow({ mode: "open" }); - this.userName = "adniyaYousaf"; - 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} - - 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)} - -
- ` - ; - } + flex-direction:column; + gap:1rem; + width:60%; + background:black; + color:white; + padding:2rem; + border:2px solid black; + } + .label{ + text-align:center; + border: 3px solid white; + padding: .25em .5em; + width:15rem; + } + .rank{ + color:var(--rank); + border: 3px solid var(--rank); + padding: .25em .5em; + 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-adniya", CodeWarsBadge); - - - \ No newline at end of file +} + +customElements.define("codewars-badge", CodeWarsBadge); +} + +addUser("CodeYourFuture");