diff --git a/app.js b/app.js new file mode 100644 index 0000000..97769b3 --- /dev/null +++ b/app.js @@ -0,0 +1,62 @@ +import "./component/header.js"; +//import "./codewars-badge.js"; +import "./component/hero.js"; +import "./component/footer.js"; +import "./component/warrior-profile.js"; + +const state = { + userData: null, + userName: "", +}; + +const header = document.querySelector("app-header"); + +const warrior = document.querySelector("warrior-profile"); +const existingUser = localStorage.getItem(state.userName); + +if (warrior != null) { + warrior.addEventListener("user-input", async (e) => { + state.userName = e.detail; + + if (existingUser) { + state.userDate = JASON.parse(existingUser); + warrior.userData = state.userData; + } else { + await load(); + warrior.userData = state.userData; + } + }); +} + +// fetch the data from the Codewars API +async function fetchActivity() { + try { + const response = await fetch( + `https://www.codewars.com/api/v1/users/${state.userName}`, + ); + + if (!response.ok) { + throw new Error(`User not found (${response.status})`); + } + const data = await response.json(); + return data; + } catch (error) { + console.error(error.message); + return null; + } +} + +async function load() { + localStorage.clear(); + const userData = await fetchActivity(); + if (!userData) { + + warrior.load = false; + return; + }; + state.userData = userData; + if (!existingUser) { + localStorage.setItem(`${state.userName}`, JSON.stringify(userData)); + } +} + diff --git a/asset/algorithms.jpeg b/asset/algorithms.jpeg new file mode 100644 index 0000000..30db5a8 Binary files /dev/null and b/asset/algorithms.jpeg differ diff --git a/asset/code warrior.jpeg b/asset/code warrior.jpeg new file mode 100644 index 0000000..45490bf Binary files /dev/null and b/asset/code warrior.jpeg differ diff --git a/asset/codewar.png b/asset/codewar.png new file mode 100644 index 0000000..35ee5d2 Binary files /dev/null and b/asset/codewar.png differ diff --git a/asset/hero.jpeg b/asset/hero.jpeg new file mode 100644 index 0000000..37fed6b Binary files /dev/null and b/asset/hero.jpeg differ diff --git a/asset/master challenges.jpeg b/asset/master challenges.jpeg new file mode 100644 index 0000000..53992bd Binary files /dev/null and b/asset/master challenges.jpeg differ diff --git a/codeArena.html b/codeArena.html new file mode 100644 index 0000000..f9e3898 --- /dev/null +++ b/codeArena.html @@ -0,0 +1,20 @@ + + + + + + Page Title + + + +
+ +
+
+ + + + + diff --git a/component/codeChallenge.js b/component/codeChallenge.js new file mode 100644 index 0000000..e69de29 diff --git a/codewars-badge.js b/component/codewars-badge.js similarity index 59% rename from codewars-badge.js rename to component/codewars-badge.js index 7c26060..f991fa8 100644 --- a/codewars-badge.js +++ b/component/codewars-badge.js @@ -2,50 +2,48 @@ // Here is some information about web component https://developer.mozilla.org/en-US/docs/Web/Web_Components // Here is the link to the Codewars API Docs: https://dev.codewars.com/#get-user -class CodeWarsBadge extends HTMLElement { + export class CodeWarsBadge extends HTMLElement { constructor() { super(); this.attachShadow({ mode: "open" }); - this.userName = "CodeYourFuture"; + this.userName = "Edakofonime"; this.userData = []; } connectedCallback() { - this.fetchActivity() - .then(() => { + this.render(); - }) - .catch((error) => { - console.error(error); - }); + } - // 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 - } + render() { this.shadowRoot.innerHTML = ` - + Rank: ${this.userData.ranks.overall.name} - `; + + + + `; + } } customElements.define("codewars-badge", CodeWarsBadge); + diff --git a/component/footer.js b/component/footer.js new file mode 100644 index 0000000..3b72791 --- /dev/null +++ b/component/footer.js @@ -0,0 +1,100 @@ +export class Footer extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + } + + connectedCallback() { + this.render(); + } + + render() { + this.shadowRoot.innerHTML = ` + + + + + +
+ +
+

+ Code Arena +

+

Defeat Algorithms

+

Master Challenges

+

Become A Code Warrior

+
+ +
+

Navigation

+ +

Code Arena

+

Katas

+

Warriors

+

Ranks

+
+ +
+

Resources

+ +

Git Hub

+

Documentation

+

API

+
+
+

+ Connect +

+

+

+

+ +
+ +
`; + } +} +customElements.define("app-footer", Footer); diff --git a/component/header.js b/component/header.js new file mode 100644 index 0000000..4dbdb24 --- /dev/null +++ b/component/header.js @@ -0,0 +1,82 @@ +class Header extends HTMLElement { + constructor() { + super(); + + this.attachShadow({ mode: "open" }); + this._userData = null; + } + + set userData(data) { + this._userData = data; + this.render(); + } + get userData() { + return this._userData; + } + + connectedCallback() { + this.render(); + } + + render() { + this.shadowRoot.innerHTML = ` + + +
+ +
+ + Home + Warrior Profile + Kata + Ranks + + +
+ +
+ + `; + } +} + +customElements.define("app-header", Header); + +export { Header }; diff --git a/component/hero.js b/component/hero.js new file mode 100644 index 0000000..55adbd9 --- /dev/null +++ b/component/hero.js @@ -0,0 +1,198 @@ + + +export class Hero extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + } + + connectedCallback() { + this.render(); + } + + render() { + this.shadowRoot.innerHTML = ` + + +
+
+
+

CODE WARS

+

Enter the Code Battle Field

+ + +
+
+ +
+
+

Defeat algorithms

+
+ + +
+ +
+

Master challenges

+
+ +
+ +
+

Become a coding warrior

+
+ +
+ + +
+View Warrior Profile + + +
+ +
+ + +
+ +
+ + + +
`; + + + } +} + +customElements.define("app-hero", Hero); diff --git a/component/warrior-profile.js b/component/warrior-profile.js new file mode 100644 index 0000000..34d6ae8 --- /dev/null +++ b/component/warrior-profile.js @@ -0,0 +1,329 @@ +export class Profile extends HTMLElement { + constructor() { + super(); + this.attachShadow({ mode: "open" }); + this._userData = null; + this._load= true; + } + + connectedCallback() { + this.render(); + } + set load(data) { + + this._load = data; +this.render() + } + + get load() { + + return this._load; + } + + set userData(data) { + this._userData = data; + this.render(); + } + set load(data) { + this._load = data; + this.render(); + } + get load() { + return this._load; + } + get userData() { + return this._userData; + } + + renderLoading() { + return ` + + + +
+ + +
+
+ + +
+

Warrior Profile

+
+ +
+
Oops! unmatched credentials
+

See What You Have Been Upto Lately!

+
+ + +
`; + } + + renderData() { + return ` + + + +
+

Welcome to Your Profile ${this._userData.name + .split(" ") + .map((name) => name[0].toUpperCase()+name.slice(1)) + .join(" ")}

+
+ + + + + + +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Languages Rank Score
Javascript ${this._userData.ranks.overall.rank} ${this._userData.ranks.languages.javascript ? this._userData.ranks.languages.javascript.score : 0}
SQL ${this._userData.ranks.languages.sql ? this.userData.ranks.languages.sql.name : "Not ranked"} ${this._userData.ranks.languages.sql ? this.userData.ranks.languages.sql.score : 0}
Go ${this._userData.ranks.languages.go ? this.userData.ranks.languages.go.name : "Not ranked"} ${this._userData.ranks.languages.go ? this.userData.ranks.languages.go.score : 0}
Ruby ${this._userData.ranks.languages.ruby ? this.userData.ranks.languages.rugby.name : "Not ranked"} ${this._userData.ranks.languages.ruby ? this.userData.ranks.languages.rugby.score : 0}
+ +
+ +
`; + } + + render() { + if (this._userData) { + this.shadowRoot.innerHTML = this.renderData(); + } else { + this.shadowRoot.innerHTML = this.renderLoading(); + + const submitBtn = this.shadowRoot.querySelector("button"); + const inputElement = this.shadowRoot.querySelector("input"); + + submitBtn.addEventListener("click", () => { + if(inputElement.value==="") return + this.dispatchEvent( + new CustomEvent("user-input", { + bubbles: true, + compose: true, + detail: inputElement.value, + }), + ); + + inputElement.value = ""; + }); + } + } +} + +customElements.define("warrior-profile", Profile); diff --git a/index.html b/index.html index bbb3149..1452a25 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - + @@ -9,9 +9,30 @@ content="Extending HTML to create a new component" /> + - - - + + + + + + + diff --git a/kata.html b/kata.html new file mode 100644 index 0000000..f9e3898 --- /dev/null +++ b/kata.html @@ -0,0 +1,20 @@ + + + + + + Page Title + + + +
+ +
+
+ + + + + diff --git a/rank.html b/rank.html new file mode 100644 index 0000000..e3f6108 --- /dev/null +++ b/rank.html @@ -0,0 +1,22 @@ + + + + + + + Ranks + + + +
+ +
+
+ + + + + + diff --git a/warrior.html b/warrior.html new file mode 100644 index 0000000..b18800e --- /dev/null +++ b/warrior.html @@ -0,0 +1,39 @@ + + + + + + + Code Warriors + + +
+ +
+
+ + +
+ + + + + +