diff --git a/codewars-badge.js b/codewars-badge.js index 7c26060..8bcb814 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -1,51 +1,24 @@ -// 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 = []; - } - +class CodewarsBadge extends HTMLElement { connectedCallback() { - this.fetchActivity() - .then(() => { - this.render(); - }) - .catch((error) => { - console.error(error); - }); + const USERNAME = encodeURIComponent("Houssam LH"); + fetch(`https://www.codewars.com/api/v1/users/${USERNAME}`) + .then(res => res.json()) + .then(data => this.render(data)) + .catch(err => console.error(err)); } - // 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} - `; + render(data) { + this.innerHTML = ` +
+

${data.username}

+

Overall Rank: ${data.ranks.overall.name}

+

Total Completed Challenges: ${data.codeChallenges.totalCompleted}

+

Honor: ${data.honor}

+

JavaScript Rank: ${data.ranks.languages.javascript.name}

+
+ `; } } -customElements.define("codewars-badge", CodeWarsBadge); +customElements.define("codewars-badge", CodewarsBadge); + diff --git a/codewars-top-languages.js b/codewars-top-languages.js new file mode 100644 index 0000000..5e0b595 --- /dev/null +++ b/codewars-top-languages.js @@ -0,0 +1,26 @@ +class CodewarsTopLanguages extends HTMLElement { + connectedCallback() { + const USERNAME = encodeURIComponent("Houssam LH"); + fetch(`https://www.codewars.com/api/v1/users/${USERNAME}`) + .then(res => res.json()) + .then(data => this.render(data)) + .catch(err => console.error(err)); + } + + render(data) { + const languages = Object.entries(data.ranks.languages) + .sort((a, b) => b[1].score - a[1].score) + .slice(0, 3) + .map(([lang, info]) => `
  • ${lang}: ${info.name} (${info.score} pts)
    • `) + .join(''); + + this.innerHTML = ` +
    +

    Top 3 Languages

    + +
    + `; + } +} + +customElements.define("codewars-top-languages", CodewarsTopLanguages); diff --git a/index.html b/index.html index bbb3149..253bd19 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,36 @@ - - - - - Codewars Badge - - - - - - - - + + + + + Codewars Badge + + + +

    My Codewars Progress

    + + + + + + + + + + + + \ No newline at end of file