CodeYourFuture · Ofonimeedak · Aug 25, 2026
diff --git a/app.js 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
diff --git a/asset/code warrior.jpeg b/asset/code warrior.jpeg
diff --git a/asset/codewar.png b/asset/codewar.png
diff --git a/asset/hero.jpeg b/asset/hero.jpeg
diff --git a/asset/master challenges.jpeg b/asset/master challenges.jpeg
diff --git a/codeArena.html b/codeArena.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="utf-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
+ <title>Page Title</title>
+ <link rel="stylesheet" href="main.css" />
+ </head>
+ <body>
+ <header>
+ <app-header></app-header>
+ </header>
+ <main></main>
+
+ <footer>
+ <app-footer></app-footer>
+ </footer>
+ <script type="module" src="./app.js"></script>
+ </body>
+</html>
diff --git a/component/codeChallenge.js b/component/codeChallenge.js
diff --git a/codewars-badge.js → component/codewars-badge.js b/codewars-badge.js → 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 = `
  <style>
  :host {
  --rank: ${this.userData.ranks.overall.color};
+ --scores:${this.userData.ranks.languages.javascript.color};
  font: 600 100%/1 system-ui, sans-serif;
+
+
  }
  data { 
  color: var(--rank);
  border: 3px solid; 
  padding: .25em .5em;
- } 
+ } 
+
  </style>
- <data value="${this.userData.ranks.overall.score}">
+ <data value="${this.userData.ranks.overall.score}"> Rank:
  ${this.userData.ranks.overall.name}
- </data>`;
+ </data>
+
+
+ `;
+
  }
 }
 
 customElements.define("codewars-badge", CodeWarsBadge);
+
diff --git a/component/footer.js 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 = `
+
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.0/css/all.min.css" integrity="sha512-ApSLB1Pd3/bZN8fWB/RG9YhN/7bd9Hkf3AGaE2mPfebjrxagjuBtx2GcgdqIlJkUzwylBo61r9Xa9NmgBI0swA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
+
+ <style>
+ .wrapper{
+ height: auto;
+ width:auto;
+ margin:0;
+ padding:2px;
+ display: flex;
+ justify-content: space-around;
+ flex-wrap:wrap;
+
+ }
+
+
+.wrapper h3 {
+ color: #38BDF8;
+ font-size: 2rem;
+ letter-spacing: 2px;
+}
+
+.wrapper p {
+ color: #A1A1AA;
+ max-width: 400px;
+}
+
+
+.wrapper a {
+ display: block;
+ color: #A1A1AA;
+ text-decoration: none;
+ margin-bottom: 10px;
+ transition: 0.3s;
+}
+
+
+.wrapper a:hover {
+ color: #38BDF8;
+ transform: translateX(5px);
+}
+
+
+
+
+ </style>
+
+ <div class="wrapper">
+
+ <div>
+ <h3>
+ Code Arena
+ </h3>
+ <p> Defeat Algorithms</p>
+ <p> Master Challenges </P>
+ <p> Become A Code Warrior</p>
+ </div>
+
+ <div>
+ <h3>Navigation</h3>
+
+ <p> <a href="./codeArena.html">Code Arena</a> </p>
+ <p> <a href="./kata.html">Katas</a></p>
+ <p><a href="./warrior.html">Warriors</a></p>
+ <p> <a href="./rank.html">Ranks</a></p>
+ </div>
+
+ <div>
+ <h3>Resources</h3>
+
+ <p> <a href="">Git Hub</a></p>
+ <p> <a href="">Documentation</a></p>
+ <p> <a href="">API</a></p>
+ </div>
+ <div>
+ <h3>
+ Connect
+ </h3>
+ <p> <a href=""> <label htmlFor=""> Facebook <i class="fa-brands fa-facebook"></i></label></a></p>
+ <p> <a href=""> <label htmlFor=""> Tiktok <i class="fa-brands fa-tiktok"></i></label></a></p> 
+<p><a href=""> <label htmlFor=""> Whatsapp <i class="fa-brands fa-whatsapp"></i></label></a> </p> 
+
+ </div>
+
+ </div> `;
+ }
+}
+customElements.define("app-footer", Footer);
diff --git a/component/header.js 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 = `
+ <style>
+ .wrapper{
+
+height:65px;
+min-width:320px;
+gap:10px;
+margin:10px 0 0 10px;
+padding: 10px 0 0 0;
+padding:10px;
+border-radius:5px;
+
+
+ }
+
+ .container{
+
+ display:flex;
+ height:100%;
+ width:100%;
+ justify-content: space-around;
+ align-items:center;
+ background-color: #192538a1;
+ border-radius:10px;
+ flex-wrap:wrap;
+
+ }
+
+ a {
+ color:#FFFFFF;
+ text-decoration:none
+ }
+img {
+
+height:65px;
+width:65px;
+}
+
+ </style>
+
+ <header class="wrapper">
+
+ <div class="container">
+ <a href="./"> <img src='./asset/codewar.png'> </img></a>
+ <a href="./">Home</a>
+ <a href="./warrior.html">Warrior Profile</a>
+ <a href="./kata.html"> Kata</a> 
+ <a href="./rank.html"> Ranks</a>
+
+
+ </div>
+
+ </header>
+
+ `;
+ }
+}
+
+customElements.define("app-header", Header);
+
+export { Header };