diff --git a/codewars-badge.js b/codewars-badge.js index 7c26060..80b4edb 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -6,7 +6,7 @@ class CodeWarsBadge extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); - this.userName = "CodeYourFuture"; + this.userName = "PERicci"; this.userData = []; } @@ -31,20 +31,39 @@ class CodeWarsBadge extends HTMLElement { render() { this.shadowRoot.innerHTML = ` - +
${this.userData.ranks.overall.name} - `; + +

${this.userData.username}

+
`; } } diff --git a/codewars-challenges.js b/codewars-challenges.js new file mode 100644 index 0000000..4fc7380 --- /dev/null +++ b/codewars-challenges.js @@ -0,0 +1,39 @@ +// 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 CodeWarsChallenges extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.userName = "PERicci"; + 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 = ` +

Completed katas: ${this.userData.codeChallenges.totalCompleted}

+ `; + } +} + +customElements.define("codewars-challenges", CodeWarsChallenges); diff --git a/codewars-last-completed.js b/codewars-last-completed.js new file mode 100644 index 0000000..5617f81 --- /dev/null +++ b/codewars-last-completed.js @@ -0,0 +1,41 @@ +// 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 CodeWarsLastCompleted extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.userName = "PERicci"; + 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}/code-challenges/completed` + ); + const data = await response.json(); + this.userData = data; // set the userData property with the fetched data + } + + render() { + this.shadowRoot.innerHTML = ` +

Last completed kata:

+

${this.userData.data[0].name}

+

Languages: ${this.userData.data[0].completedLanguages}

+ `; + } +} + +customElements.define("codewars-last-completed", CodeWarsLastCompleted); diff --git a/index.html b/index.html index bbb3149..56d37a6 100644 --- a/index.html +++ b/index.html @@ -1,17 +1,29 @@ - - - - Codewars Badge - - - - - - - - + + + + + Codewars Badge + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/style.css b/style.css new file mode 100644 index 0000000..ae5da5e --- /dev/null +++ b/style.css @@ -0,0 +1,22 @@ +:root { + --bg-colour: #16171b; + --fg-colour: #222327; + --text-colour: #efefef; + --text-secondary-colour: #b0b0b0; + --accent-colour: #b1361e; + + --font-sans-serif: 'Lato', sans-serif; + + --font-general: 600 1.2rem/1 var(--font-sans-serif); + --font-title: normal 2rem/1.5 var(--font-sans-serif); +} + +body { + background-color: var(--bg-colour); + color: var(--text-colour); + font: var(--font-general); + -webkit-font-smoothing: antialiased; + + width: 60%; + margin: auto; +}