Skip to content

NW6 |Zeliha Pala| JS2 | Codewars -API - Project #17

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

NW6 |Zeliha Pala| JS2 | Codewars -API - Project #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,8 @@ Let's play with grabbing some data from an API and displaying it on a website. W
4. Change the `username` variable in the `codewars-badge.js` file to your own Codewars username. Save the file and refresh the page to see your own badge.

5. [Look at this API directly](https://www.codewars.com/api/v1/users/CodeYourFuture) in your browser. It's just a URL - you can look at it. (Install a [JSON viewer extension](https://chrome.google.com/webstore/detail/json-viewer/gbmdgpbipfallnflgajpaliibnhdgobh) for your browser if you don't have one already. This will make it easier to read the data.)

6. Now try adding some more data to the badge component. There's lots of other possible data we could display in the badge. Read the [Codewars API docs](https://dev.codewars.com/#get-user) to help you.
Now try adding some more data to the badge component. There's lots of other possible data we could display in the badge. Read the [Codewars API docs](https://dev.codewars.com/#get-user) to help you.
6.

7. Now try creating a _new_ web component that displays some data from a Codewars API. There are several documented Codewars APIs you can play with. Use the `codewars-badge.js` file as a template for how to define a web component. You can use the `index.html` file to test your new component.

Expand Down
33 changes: 20 additions & 13 deletions codewars-badge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ class CodeWarsBadge extends HTMLElement {
constructor() {
super();
this.attachShadow({ mode: "open" });
this.userName = "CodeYourFuture";
this.userData = [];
this.userName = "zelihapala";
this.userData = {};
}

connectedCallback() {
Expand All @@ -22,29 +22,36 @@ class CodeWarsBadge extends HTMLElement {

// fetch the data from the Codewars API
async fetchActivity() {
const response = await fetch(
`https://www.codewars.com/api/v1/users/${this.userName}`
);
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 = `
<style>
<style>
:host {
--rank: ${this.userData.ranks.overall.color};
font: 600 100%/1 system-ui, sans-serif;
--rank: ${this.userData.ranks.overall.color};
font: 600 100%/1 system-ui, sans-serif;
}
data {
color: var(--rank);
border: 3px solid;
padding: .25em .5em;
color: var(--rank);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
color: var(--rank);
color: var(--rank);
background: black;

Hard to read!

border: 3px solid;
padding: .25em .5em;
}
</style>
<div>
<p>Username: ${this.userData.username}</p>
<p>Name: ${this.userData.name}</p>
<p>Honor: ${this.userData.honor}</p>
<p>Clan: ${this.userData.clan}</p>
<p>Leaderboard Position: ${this.userData.leaderboardPosition}</p>
<p>Total Authored Challenges: ${this.userData.codeChallenges.totalAuthored}</p>
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

How

Suggested change
<p>Total Authored Challenges: ${this.userData.codeChallenges.totalAuthored}</p>
<p>Total Authored Challenges: ${this.userData.codeChallenges.totalAuthored}</p>

How would you only show this line if totalAuthored had a value of greater than zero?

<p>Total Completed Challenges: ${this.userData.codeChallenges.totalCompleted}</p>
<data value="${this.userData.ranks.overall.score}">
${this.userData.ranks.overall.name}
</data>`;
${this.userData.ranks.overall.name}
</data>
</div>`;
}
}

Expand Down