From 471045badb82b69d6c2b10a26a7c2999d6407405 Mon Sep 17 00:00:00 2001 From: Pedro Date: Mon, 15 Jan 2024 08:34:32 +0000 Subject: [PATCH 1/3] corrected indentation in codewars-badge.js --- codewars-badge.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/codewars-badge.js b/codewars-badge.js index 7c26060..fbf5026 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -31,7 +31,7 @@ class CodeWarsBadge extends HTMLElement { render() { this.shadowRoot.innerHTML = ` - ${this.userData.ranks.overall.name} - `; + `; } } From e445dcbdbe1000ed79c1cc4cfd7567e41b5320df Mon Sep 17 00:00:00 2001 From: Pedro Date: Mon, 15 Jan 2024 08:43:03 +0000 Subject: [PATCH 2/3] changed the user name to my own codewars user --- codewars-badge.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/codewars-badge.js b/codewars-badge.js index fbf5026..ebf06df 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 = []; } From 208768d5abd570bb8aa2037e1da0c1e4d6c09f79 Mon Sep 17 00:00:00 2001 From: Pedro Date: Mon, 15 Jan 2024 09:45:35 +0000 Subject: [PATCH 3/3] added user name, amount of completed katas and last kata's name and languages --- codewars-badge.js | 31 ++++++++++++++++++++++------ codewars-challenges.js | 39 +++++++++++++++++++++++++++++++++++ codewars-last-completed.js | 41 +++++++++++++++++++++++++++++++++++++ index.html | 42 ++++++++++++++++++++++++-------------- style.css | 22 ++++++++++++++++++++ 5 files changed, 154 insertions(+), 21 deletions(-) create mode 100644 codewars-challenges.js create mode 100644 codewars-last-completed.js create mode 100644 style.css diff --git a/codewars-badge.js b/codewars-badge.js index ebf06df..80b4edb 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -33,18 +33,37 @@ class CodeWarsBadge extends HTMLElement { 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; +}