diff --git a/codewars-badge.js b/codewars-badge.js index 7c26060..cdc0a39 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,26 +22,33 @@ 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}
+ `; } } customElements.define("codewars-badge", CodeWarsBadge); + + diff --git a/index.html b/index.html index bbb3149..acafb21 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,15 @@ content="Extending HTML to create a new component" /> + - +

Fathi's Codewars Data:


+ + + + +
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