diff --git a/codewars-badge.js b/codewars-badge.js
index 7c26060..4b23178 100644
--- a/codewars-badge.js
+++ b/codewars-badge.js
@@ -49,3 +49,229 @@ class CodeWarsBadge extends HTMLElement {
}
customElements.define("codewars-badge", CodeWarsBadge);
+
+// ______
+// || \\ // ||-----|
+/////////// ////|| \\// ||_____
+/////////// // || ||-----|
+/// /// || || ||
+// /// \\-_-_| || ||
+/////////////////////////////////////////////////////////////////////////
+////////////////////////////////////////////////////////////////////////
+
+let kataColor, kataValue, kataContent;
+const template = document.createElement("template");
+const templateContent = `
+
+
+
+ `;
+
+template.innerHTML = templateContent;
+
+class SelfCreated extends HTMLElement {
+ constructor() {
+ super();
+ this.attachShadow({ mode: "open" });
+ this.userName = "CodeYourFuture";
+ this.userData = [];
+
+ this.kataColor = null;
+ this.kataContent = null;
+ //this.kataValue = null;
+ }
+
+ connectedCallback() {
+ const form = document.querySelector("#username-form");
+ form.addEventListener("submit", (event) => {
+ event.preventDefault(); // Prevent the default form submission
+ this.getUserName();
+ });
+
+ this.fetching()
+ .then(() => this.userData)
+ .then(() => {
+ //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();
+ })
+ .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;
+ }
+
+ getUserName() {
+ const input = document.querySelector("input");
+ const value = input.value.trim();
+ if (value !== "") {
+ this.userName = value;
+ this.fetching().then(() => this.render());
+ } else {
+ this.userName = "CodeYourFuture";
+ }
+ }
+
+ render() {
+ //template.innerHTML = "";
+ this.shadowRoot.innerHTML = "";
+ 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}`;
+
+ 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");
+ 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;
+ this.shadowRoot.querySelector("#languages").innerHTML = "";
+ 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}`;
+ }
+}
+
+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,
+ },
+};
+
+// CodeYourFuture
diff --git a/icons8-spinner.gif b/icons8-spinner.gif
new file mode 100644
index 0000000..4019a6b
Binary files /dev/null and b/icons8-spinner.gif differ
diff --git a/index.html b/index.html
index bbb3149..5a1d368 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,11 @@
+
+
Codewars Badge
-
+
+
+