From 28eaff53c5a3d5198c647ef618c252af3fbb2c7d Mon Sep 17 00:00:00 2001 From: karimi Date: Wed, 24 Jan 2024 19:00:03 +0000 Subject: [PATCH 1/5] create a new tag and setting it up --- codewars-badge.js | 115 ++++++++++++++++++++++++++++++++++++++++++++++ index.html | 1 + 2 files changed, 116 insertions(+) diff --git a/codewars-badge.js b/codewars-badge.js index 7c26060..44585b1 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -49,3 +49,118 @@ class CodeWarsBadge extends HTMLElement { } customElements.define("codewars-badge", CodeWarsBadge); + +const template = document.createElement("template"); +template.innerHTML = ` +
+

+

+

+
+ + +`; + +class SelfCreated extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this.userName = "bkarimii"; + this.userData = []; + } + + connectedCallback() { + this.fetching() + .then(() => this.render()) + .then(() => console.log("this is userData------->", this.userData)) + .then(console.log(this.userData.ranks), "<------------second console") + .catch(error, console.log(error, "<---------- error happened")); + } + async fetching() { + const response = await fetch( + `https://www.codewars.com/api/v1/users/${this.userName}` + ); + + const data = await response.json(); + this.userData = data; + } + + render() { + this.shadowRoot.appendChild(template.content.cloneNode(true)); + this.shadowRoot.querySelector("h3").textContent = "The User Profile:"; + this.shadowRoot.querySelector( + "#user-name" + ).textContent = `USER NAME: ${this.userData.username}`; + this.shadowRoot.querySelector( + "#name-of-user" + ).textContent = `Name: ${this.userData.name}`; + //`${this.userData.ranks.overall.color}`; + } +} + +window.customElements.define("self-created", SelfCreated); + +const obj = { + username: "some_user", + name: "Some Person", + honor: 544, + clan: "some clan", + leaderboardPosition: 134, + skills: [ + "ruby", + "c#", + ".net", + "javascript", + "coffeescript", + "nodejs", + "rails", + ], + ranks: { + overall: { + rank: -3, + name: "3 kyu", + color: "blue", + score: 2116, + }, + languages: { + javascript: { + rank: -3, + name: "3 kyu", + color: "blue", + score: 1819, + }, + ruby: { + rank: -4, + name: "4 kyu", + color: "blue", + score: 1005, + }, + coffeescript: { + rank: -4, + name: "4 kyu", + color: "blue", + score: 870, + }, + }, + }, + codeChallenges: { + totalAuthored: 3, + totalCompleted: 230, + }, +}; diff --git a/index.html b/index.html index bbb3149..43df144 100644 --- a/index.html +++ b/index.html @@ -12,6 +12,7 @@ + From 3438abfb5c759b06ae2775d6939cbac27df557c8 Mon Sep 17 00:00:00 2001 From: karimi Date: Thu, 25 Jan 2024 18:19:04 +0000 Subject: [PATCH 2/5] styling and starting searchbar js code --- codewars-badge.js | 136 ++++++++++++++++++++++++++++++++++++++-------- index.html | 15 ++++- style.css | 47 ++++++++++++++++ 3 files changed, 172 insertions(+), 26 deletions(-) create mode 100644 style.css diff --git a/codewars-badge.js b/codewars-badge.js index 44585b1..6cb12fe 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -50,30 +50,69 @@ class CodeWarsBadge extends HTMLElement { customElements.define("codewars-badge", CodeWarsBadge); +///////////////////////////////////////////////////////////////////////// +//////////////////////////////////////////////////////////////////////// +let kataColor, kataValue, kataContent; const template = document.createElement("template"); template.innerHTML = ` -
-

-

-

-

    -

    -
+
+ + +
+

+

+

+

+
    +
    +

    +

    +
    +
    +
    `; @@ -87,11 +126,19 @@ class SelfCreated extends HTMLElement { connectedCallback() { this.fetching() - .then(() => this.render()) - .then(() => console.log("this is userData------->", this.userData)) - .then(console.log(this.userData.ranks), "<------------second console") - .catch(error, console.log(error, "<---------- error happened")); + .then(() => { + kataColor = this.userData.ranks.overall.color; + kataContent = this.userData.ranks.overall.name; + kataValue = this.userData.ranks.overall.score; + this.render(); + }) + .then(() => this.userData) + .catch((error) => console.log(error, "<---------- error happened")); + + const fontAwesome = document.querySelector("#icon"); + fontAwesome.addEventListener("click", () => this.getUserName()); } + async fetching() { const response = await fetch( `https://www.codewars.com/api/v1/users/${this.userName}` @@ -101,6 +148,17 @@ class SelfCreated extends HTMLElement { this.userData = data; } + getUserName() { + const value = document.querySelector("input").value; + if (value != "") { + this.userName = value; + console.log(this.userName, "<---------Username"); + } else { + this.userName = "bkarimii"; + } + console.log(123); + } + render() { this.shadowRoot.appendChild(template.content.cloneNode(true)); this.shadowRoot.querySelector("h3").textContent = "The User Profile:"; @@ -110,6 +168,36 @@ class SelfCreated extends HTMLElement { this.shadowRoot.querySelector( "#name-of-user" ).textContent = `Name: ${this.userData.name}`; + const skillsList = this.shadowRoot.querySelector("#skills"); + const skillArray = this.userData.skills; + if (skillArray.length != 0) { + skillArray.forEach((skill) => { + const li = document.createElement("li"); // Use document.createElement + li.textContent = skill; + skillsList.appendChild(li); + }); + } else { + skillsList.textContent = "Skills: No Skill To Display!"; + } + + this.shadowRoot.querySelector( + "#clan" + ).textContent = `Clan: ${this.userData.clan}`; + this.shadowRoot.querySelector( + "#overall-rank" + ).textContent = `Overall Score: ${this.userData.ranks.overall.score}`; + + const languages = this.userData.ranks.languages; + + for (const key in languages) { + const span = document.createElement("span"); + span.innerText = `${key}: ${languages[key].score}\n `; + this.shadowRoot.querySelector("#languages").appendChild(span); + } + + const dataTag = this.shadowRoot.querySelector("#dataTag"); + dataTag.textContent = kataContent; + //`${this.userData.ranks.overall.color}`; } } diff --git a/index.html b/index.html index 43df144..5118a1f 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,11 @@ + + Codewars Badge - - + +
    +
    + + +
    + +
    diff --git a/style.css b/style.css new file mode 100644 index 0000000..fde6045 --- /dev/null +++ b/style.css @@ -0,0 +1,47 @@ +body { + font-family: 'Arial', sans-serif; + background-color: #f0f0f0; + margin: 0; + padding: 0; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; +} + +#main-div { + width: 60%; + background-color: #fff; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + padding: 20px; + text-align: center; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + +} + +input { + padding: 4px; + margin-bottom: 15px; + width: 13rem; + height: 1.5rem; + box-sizing: border-box; +} +.fa.fa-search { + width: 1rem; + height: 1rem; + +} +.fa.fa-search:hover{ + cursor: pointer; +} + + +self-created { + margin-top: 15px; + display: block; + width: 100%; +} \ No newline at end of file From 674e0ba93f6b379785b7c11065f9c5a2b65c8536 Mon Sep 17 00:00:00 2001 From: karimi Date: Thu, 25 Jan 2024 21:16:53 +0000 Subject: [PATCH 3/5] last designs and improvements --- codewars-badge.js | 149 ++++++++++++++++++++++++--------------------- icons8-spinner.gif | Bin 0 -> 11264 bytes index.html | 10 +-- style.css | 9 +-- 4 files changed, 91 insertions(+), 77 deletions(-) create mode 100644 icons8-spinner.gif diff --git a/codewars-badge.js b/codewars-badge.js index 6cb12fe..32d35b2 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -54,67 +54,69 @@ customElements.define("codewars-badge", CodeWarsBadge); //////////////////////////////////////////////////////////////////////// let kataColor, kataValue, kataContent; const template = document.createElement("template"); -template.innerHTML = ` -
    - - -
    -

    -

    -

    -

    -
      -
      -

      -

      -
      -
      -
      - - -`; +
      +

      +

      +

      +

      +
        +
        +

        +

        +
        +
        + + + + `; + +template.innerHTML = templateContent; class SelfCreated extends HTMLElement { constructor() { @@ -125,6 +127,12 @@ class SelfCreated extends HTMLElement { } connectedCallback() { + const form = document.querySelector("#username-form"); + form.addEventListener("submit", (event) => { + event.preventDefault(); // Prevent the default form submission + this.getUserName(); + }); + this.fetching() .then(() => { kataColor = this.userData.ranks.overall.color; @@ -134,9 +142,6 @@ class SelfCreated extends HTMLElement { }) .then(() => this.userData) .catch((error) => console.log(error, "<---------- error happened")); - - const fontAwesome = document.querySelector("#icon"); - fontAwesome.addEventListener("click", () => this.getUserName()); } async fetching() { @@ -149,17 +154,19 @@ class SelfCreated extends HTMLElement { } getUserName() { - const value = document.querySelector("input").value; - if (value != "") { + const input = document.querySelector("input"); + const value = input.value.trim(); + if (value !== "") { this.userName = value; - console.log(this.userName, "<---------Username"); + this.fetching().then(() => this.render()); } else { this.userName = "bkarimii"; } - console.log(123); } render() { + //template.innerHTML = ""; + this.shadowRoot.innerHTML = ""; this.shadowRoot.appendChild(template.content.cloneNode(true)); this.shadowRoot.querySelector("h3").textContent = "The User Profile:"; this.shadowRoot.querySelector( @@ -168,11 +175,13 @@ class SelfCreated extends HTMLElement { this.shadowRoot.querySelector( "#name-of-user" ).textContent = `Name: ${this.userData.name}`; + const skillsList = this.shadowRoot.querySelector("#skills"); + skillsList.innerHTML = ""; const skillArray = this.userData.skills; if (skillArray.length != 0) { skillArray.forEach((skill) => { - const li = document.createElement("li"); // Use document.createElement + const li = document.createElement("li"); li.textContent = skill; skillsList.appendChild(li); }); @@ -188,7 +197,7 @@ class SelfCreated extends HTMLElement { ).textContent = `Overall Score: ${this.userData.ranks.overall.score}`; const languages = this.userData.ranks.languages; - + this.shadowRoot.querySelector("#languages").innerHTML = ""; for (const key in languages) { const span = document.createElement("span"); span.innerText = `${key}: ${languages[key].score}\n `; @@ -252,3 +261,5 @@ const obj = { totalCompleted: 230, }, }; + +// CodeYourFuture diff --git a/icons8-spinner.gif b/icons8-spinner.gif new file mode 100644 index 0000000000000000000000000000000000000000..4019a6b76a39da7fcb68bf88491ce7c884503c04 GIT binary patch literal 11264 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 literal 0 HcmV?d00001 diff --git a/index.html b/index.html index 5118a1f..5a1d368 100644 --- a/index.html +++ b/index.html @@ -17,11 +17,13 @@ +
        -
        - - -
        +
        +
        + +
        +
        diff --git a/style.css b/style.css index fde6045..39a657f 100644 --- a/style.css +++ b/style.css @@ -1,6 +1,6 @@ body { font-family: 'Arial', sans-serif; - background-color: #f0f0f0; + background-color: #a9a7a7; margin: 0; padding: 0; display: flex; @@ -11,7 +11,7 @@ body { #main-div { width: 60%; - background-color: #fff; + background-color:#807f7f; border-radius: 8px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); padding: 20px; @@ -26,7 +26,7 @@ body { input { padding: 4px; margin-bottom: 15px; - width: 13rem; + width: 14rem; height: 1.5rem; box-sizing: border-box; } @@ -44,4 +44,5 @@ self-created { margin-top: 15px; display: block; width: 100%; -} \ No newline at end of file +} + From 513f5a853ffbe7815ba99e15af11170f96043f47 Mon Sep 17 00:00:00 2001 From: karimi Date: Thu, 25 Jan 2024 21:53:24 +0000 Subject: [PATCH 4/5] finals --- codewars-badge.js | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/codewars-badge.js b/codewars-badge.js index 32d35b2..0bea8de 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -50,8 +50,15 @@ class CodeWarsBadge extends HTMLElement { customElements.define("codewars-badge", CodeWarsBadge); +// ______ +// || \\ // ||-----| +/////////// ////|| \\// ||_____ +/////////// // || ||-----| +/// /// || || || +// /// \\-_-_| || || ///////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////// + let kataColor, kataValue, kataContent; const template = document.createElement("template"); const templateContent = ` @@ -85,7 +92,7 @@ const templateContent = ` padding:1rem; } .user-card{ - background-color:5f5e5e; + background-color:#444444; margin-top:1rem; padding:1rem; } @@ -122,8 +129,12 @@ class SelfCreated extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); - this.userName = "bkarimii"; + this.userName = "CodeYourFuture"; this.userData = []; + + //this.kataColor = null; + //this.kataContent = null; + //this.kataValue = null; } connectedCallback() { @@ -134,13 +145,14 @@ class SelfCreated extends HTMLElement { }); this.fetching() + .then(() => this.userData) .then(() => { - kataColor = this.userData.ranks.overall.color; - kataContent = this.userData.ranks.overall.name; - kataValue = this.userData.ranks.overall.score; + //kataColor = this.userData.ranks.overall.color; + //kataContent = this.userData.ranks.overall.name; + //kataValue = this.userData.ranks.overall.score; + console.log(kataColor, kataContent, kataValue); this.render(); }) - .then(() => this.userData) .catch((error) => console.log(error, "<---------- error happened")); } @@ -160,7 +172,7 @@ class SelfCreated extends HTMLElement { this.userName = value; this.fetching().then(() => this.render()); } else { - this.userName = "bkarimii"; + this.userName = "CodeYourFuture"; } } From c12893cbdbde2e605279e3669e78359a36b37cbb Mon Sep 17 00:00:00 2001 From: karimi Date: Wed, 21 Feb 2024 17:35:11 +0000 Subject: [PATCH 5/5] codeWarsbadge --- codewars-badge.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/codewars-badge.js b/codewars-badge.js index 0bea8de..4b23178 100644 --- a/codewars-badge.js +++ b/codewars-badge.js @@ -132,8 +132,8 @@ class SelfCreated extends HTMLElement { this.userName = "CodeYourFuture"; this.userData = []; - //this.kataColor = null; - //this.kataContent = null; + this.kataColor = null; + this.kataContent = null; //this.kataValue = null; }