From ff1d5905598517b89bb780d7d09e6469ecf4370c Mon Sep 17 00:00:00 2001 From: Fathi Kahin Date: Fri, 19 Jan 2024 16:57:27 +0000 Subject: [PATCH 1/5] index.html completed --- index.html | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/index.html b/index.html index bbb3149..5bd0f97 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,15 @@ content="Extending HTML to create a new component" /> + - +

This Is Fathi's Codewars Data:

+ + + + +
From fc222908ea76e5fa3daea642a4fbf5e6bc5b2f10 Mon Sep 17 00:00:00 2001 From: Fathi Kahin Date: Fri, 19 Jan 2024 16:58:51 +0000 Subject: [PATCH 2/5] Codewars-badge.js completeted --- codewars-badge.js | 43 ++++++++++++++++++++++--------------------- 1 file changed, 22 insertions(+), 21 deletions(-) diff --git a/codewars-badge.js b/codewars-badge.js index 7c26060..79fd755 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -1,13 +1,9 @@ -// 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() { super(); this.attachShadow({ mode: "open" }); - this.userName = "CodeYourFuture"; - this.userData = []; + this.userName = "fhkahin"; + this.userData = {}; } connectedCallback() { @@ -26,25 +22,30 @@ class CodeWarsBadge extends HTMLElement { `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 = data; + return data; } render() { this.shadowRoot.innerHTML = ` - - - ${this.userData.ranks.overall.name} - `; + + + + + + + + + + + + + + + + +
Overall Rank${this.userData.ranks.overall.name}${this.userData.ranks.overall.score}
JavaScript Rank${this.userData.ranks.languages.javascript.name}${this.userData.ranks.languages.javascript.score}
Total Challenges Completed${this.userData.codeChallenges.totalCompleted}
+ `; } } From 9b1f6993eb9fb8e0cf40d5b51245889d505392f0 Mon Sep 17 00:00:00 2001 From: Fathi Kahin Date: Fri, 19 Jan 2024 17:20:23 +0000 Subject: [PATCH 3/5] index.html completed --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index 5bd0f97..acafb21 100644 --- a/index.html +++ b/index.html @@ -12,7 +12,7 @@ -

This Is Fathi's Codewars Data:

+

Fathi's Codewars Data:


From 5491bf777ebe8e374aa720b4f7984b3ea732b933 Mon Sep 17 00:00:00 2001 From: Fathi Kahin Date: Fri, 19 Jan 2024 17:20:42 +0000 Subject: [PATCH 4/5] badge.js completed --- codewars-badge.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/codewars-badge.js b/codewars-badge.js index 79fd755..cdc0a39 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -50,3 +50,5 @@ class CodeWarsBadge extends HTMLElement { } customElements.define("codewars-badge", CodeWarsBadge); + + From e6cda52f97562382d343be4ef434063c384898b6 Mon Sep 17 00:00:00 2001 From: Fathi Kahin Date: Fri, 19 Jan 2024 17:27:22 +0000 Subject: [PATCH 5/5] css completed --- styles.css | 42 ++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 42 insertions(+) create mode 100644 styles.css diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..23f064e --- /dev/null +++ b/styles.css @@ -0,0 +1,42 @@ +body { + background-color: #1D1D1B; + color: #7C9521; + margin: 0; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + } + + .container { + text-align: center; + } + + h1 { + margin: 0 auto; + } + + table { + border-collapse: collapse; + width: 60%; + margin: 0 auto; + } + + td { + border: 1px solid #7C9521; + padding: 10px; + } + + codewars-badge { + --overall-rank: var(--badge-color, #f7941d); + --javascript-rank: var(--badge-color, #f7941d); + font: 600 100%/1 system-ui, sans-serif; + display: flex; + flex-direction: column; + align-items: center; + } + + data { + margin-top: 20px; + } + \ No newline at end of file