diff --git a/codewars-badge.js b/codewars-badge.js index 7c26060..8c6e7f1 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -6,34 +6,27 @@ class CodeWarsBadge extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); - this.userName = "CodeYourFuture"; - this.userData = []; + this._userData = null; } - connectedCallback() { - this.fetchActivity() - .then(() => { - this.render(); - }) - .catch((error) => { - console.error(error); - }); + set userData(value) { + this._userData = value; + this.render(); + + } - // 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 + get userData() { + return this._userData; } - + render() { + if (!this._userData) return; + this.shadowRoot.innerHTML = ` - - ${this.userData.ranks.overall.name} + + ${this._userData.ranks.overall.name} `; } } diff --git a/codewars-sticker.js b/codewars-sticker.js new file mode 100644 index 0000000..81954f8 --- /dev/null +++ b/codewars-sticker.js @@ -0,0 +1,34 @@ +class StickerCard extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this._userData = null; + } + + set userData(value) { + this._userData = value; + this.render(); + } + + render() { + if (!this._userData) return; + + this.shadowRoot.innerHTML = ` + +
+ ${this._userData.language}: ${this._userData.name} +
+ `; + } +} + +customElements.define("sticker-card", StickerCard); diff --git a/index.html b/index.html index bbb3149..f317ce3 100644 --- a/index.html +++ b/index.html @@ -9,9 +9,31 @@ content="Extending HTML to create a new component" /> + - + + + + +
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..c1ae6d7 --- /dev/null +++ b/script.js @@ -0,0 +1,45 @@ +document.getElementById("fetchData").addEventListener("click", async () => { + const usernameInput = document.getElementById("username").value; + + if (!usernameInput) { + alert("Please enter a username!"); + return; + } + + try { + // Fetch the data from Codewars API + const response = await fetch( + `https://www.codewars.com/api/v1/users/${usernameInput}` + ); + const data = await response.json(); + + createCard(data) + } catch (error) { + console.error("Error fetching data:", error); + } +}); + +function createCard(user) { + document.getElementById("display").innerHTML = ""; + const cardTemplate = document.getElementById("card").content.cloneNode(true); + const badgeContainer = cardTemplate.getElementById("badge_div"); + const badge = document.createElement("codewars-badge"); + badge.userData = user; + badgeContainer.appendChild(badge); + + cardTemplate.querySelector("h3").textContent = user.name; + const h4Elements = cardTemplate.querySelectorAll("h4"); + h4Elements[0].textContent = user.clan ? `Clan: ${user.clan}` : "Clan: N/A"; + h4Elements[1].textContent = user.ranks.overall.score ? `Score: ${user.ranks.overall.score}` : 'Score: N/A';; + const stickerContainer = cardTemplate.getElementById("stickers_div"); + + Object.keys(user.ranks.languages).forEach(language => { + const sticker = document.createElement("sticker-card"); + sticker.userData = { + language: language, // Add language name + ...user.ranks.languages[language], // Merge existing data + }; + stickerContainer.appendChild(sticker) + }); + document.getElementById("display").appendChild(cardTemplate); +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..0dc9d20 --- /dev/null +++ b/style.css @@ -0,0 +1,34 @@ +body { + margin: 25px; + padding: 10px; + display: flex; + flex-direction: column; + align-items: center; +} + +#search_bar { + border-radius: 25px; + border: 5px solid blue; + display: flex; + flex-direction: row; + gap: 50px; + padding: 10px; + width: 600px; + align-items: center; + margin-bottom: 50px; +} + +#my_card { + background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12); + display: flex; + flex-direction: column; + align-items: center; + padding: 25px; +} + +#stickers_div { + display: flex; + flex-direction: row; + align-items: center; + gap: 20px; +} \ No newline at end of file