Skip to content

Commit 89b56a8

Browse files
kayali436kayali436
committed
completed task
1 parent 7d42576 commit 89b56a8

File tree

3 files changed

+109
-42
lines changed

3 files changed

+109
-42
lines changed

‎codewars-badge.js

Lines changed: 70 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,79 @@
22
// Here is some information about web component https://developer.mozilla.org/en-US/docs/Web/Web_Components
33
// Here is the link to the Codewars API Docs: https://dev.codewars.com/#get-user
44

5-
class CodeWarsBadge extends HTMLElement {
6-
constructor() {
7-
super();
8-
this.attachShadow({ mode: "open" });
9-
this.userName = "CodeYourFuture";
10-
this.userData = [];
11-
}
5+
function extractCodeWarsAPI() {
6+
return fetch("https://www.codewars.com/api/v1/users/karam-ali").then(
7+
(res) => {
8+
if (!res.ok) {
9+
return "Error";
10+
}
11+
return res.json();
12+
}
13+
);
14+
}
1215

13-
connectedCallback() {
14-
this.fetchActivity()
15-
.then(() => {
16-
this.render();
17-
})
18-
.catch((error) => {
19-
console.error(error);
20-
});
21-
}
16+
const cardLayout = document.querySelector(".card_layout");
2217

23-
// fetch the data from the Codewars API
24-
async fetchActivity() {
25-
const response = await fetch(
26-
`https://www.codewars.com/api/v1/users/${this.userName}`
27-
);
28-
const data = await response.json();
29-
this.userData = data; // set the userData property with the fetched data
18+
function creatingElements(tag, classList, textContent) {
19+
const creatingElement = document.createElement(tag);
20+
if (classList) {
21+
creatingElement.classList.add(classList);
3022
}
31-
32-
render() {
33-
this.shadowRoot.innerHTML = `
34-
<style>
35-
:host {
36-
--rank: ${this.userData.ranks.overall.color};
37-
font: 600 100%/1 system-ui, sans-serif;
38-
}
39-
data {
40-
color: var(--rank);
41-
border: 3px solid;
42-
padding: .25em .5em;
43-
}
44-
</style>
45-
<data value="${this.userData.ranks.overall.score}">
46-
${this.userData.ranks.overall.name}
47-
</data>`;
23+
if (textContent) {
24+
creatingElement.textContent = textContent;
4825
}
26+
return creatingElement;
4927
}
5028

51-
customElements.define("codewars-badge", CodeWarsBadge);
29+
function renderUserData(data) {
30+
const rankAndHonor = creatingElements("div", "rank__honor");
31+
const rank = creatingElements("h1", "", `Rank: ${data.ranks.overall.name}`);
32+
const honor = creatingElements("h1", "", `Honor: ${data.honor}`);
33+
34+
rankAndHonor.appendChild(rank);
35+
rankAndHonor.appendChild(honor);
36+
37+
cardLayout.appendChild(rankAndHonor);
38+
}
39+
40+
function renderMainInfo(data) {
41+
const mainCardInfo = creatingElements("div", "main__details");
42+
const username = creatingElements("h1", "", `Username: ${data.username}`);
43+
const userID = creatingElements("h1", "", `User ID: ${data.id}`);
44+
const languages = creatingElements("h1", "", "Languages: JavaScript");
45+
const score = creatingElements(
46+
"h1",
47+
"",
48+
`Score: ${data.ranks.overall.score}`
49+
);
50+
const totalCompleted = creatingElements(
51+
"h1",
52+
"",
53+
`Total Completed: ${data.codeChallenges.totalCompleted}`
54+
);
55+
56+
mainCardInfo.appendChild(username);
57+
mainCardInfo.appendChild(userID);
58+
mainCardInfo.appendChild(languages);
59+
mainCardInfo.appendChild(score);
60+
mainCardInfo.appendChild(totalCompleted);
61+
62+
cardLayout.appendChild(mainCardInfo);
63+
}
64+
65+
function renderCardLabel() {
66+
const cardTitle = creatingElements("div", "comp__title", "CodeWars Tracker");
67+
cardLayout.insertAdjacentElement("beforeend", cardTitle);
68+
}
69+
70+
function render() {
71+
extractCodeWarsAPI()
72+
.then((data) => {
73+
renderUserData(data);
74+
renderMainInfo(data);
75+
})
76+
.then(() => renderCardLabel());
77+
}
78+
79+
window.onload = render;
80+

‎index.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,10 @@
99
content="Extending HTML to create a new component"
1010
/>
1111
<meta name="viewport" content="width=device-width, initial-scale=1" />
12+
<link rel="stylesheet" href="style.css">
1213
</head>
1314
<body>
14-
<codewars-badge></codewars-badge>
15+
<main class="card_layout"></main>
1516
<script async defer type="module" src="./codewars-badge.js"></script>
1617
</body>
1718
</html>

‎style.css

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
* {
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
}
6+
7+
body {
8+
color: #f7edb2;
9+
font-family: "Inconsolata", sans-serif;
10+
padding: 3rem;
11+
}
12+
13+
.card_layout {
14+
width: 52rem;
15+
height: 33rem;
16+
background-color: #625f69;
17+
border-radius: 12px;
18+
display: grid;
19+
grid-template-rows: 6.6rem 1fr 3rem;
20+
align-items: center;
21+
}
22+
23+
.rank__honor {
24+
display: flex;
25+
justify-content: space-between;
26+
padding: 0 2rem;
27+
}
28+
29+
.main__details {
30+
padding: 0 5.8rem;
31+
line-height: 3.2rem;
32+
}
33+
34+
.comp__title {
35+
justify-self: end;
36+
padding: 0 2rem;
37+
}

0 commit comments

Comments
 (0)