NW6 | Pedro Ricciardi | JS2 Module | [TECH ED] Codewars API project | Week 4 Backlog

codewars-badge.js

@@ -6,7 +6,7 @@ class CodeWarsBadge extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
-    this.userName = "CodeYourFuture";
+    this.userName = "PERicci";
     this.userData = [];
   }
 
@@ -31,20 +31,39 @@ class CodeWarsBadge extends HTMLElement {
 
   render() {
     this.shadowRoot.innerHTML = `
-    <style>
+      <style>
         :host {
-           --rank: ${this.userData.ranks.overall.color};
-           font: 600 100%/1 system-ui, sans-serif;
+          --rank: ${this.userData.ranks.overall.color};
+          --font-sans-serif: 'Lato', sans-serif;
         }
         data { 
-            color: var(--rank);
-            border: 3px solid; 
-            padding: .25em .5em;
+          color: var(--rank);
+          border: 3px solid; 
+          padding: .25em .5em;
+        }
+        .container-horizontal {
+          display: flex;
+          flex-direction: row;
+          flex-wrap: nowrap;
+          align-items: center;
+          justify-content: flex-start;
+          gap: 1em;
+          margin: 2rem 0 1rem;
+        }
+
+        .title {
+          display: inline-block;
+          font-family: var(--font-sans-serif);
+          font-size: 2rem;
+          margin: 0;
         }      
       </style>
+      <div class="container-horizontal">
         <data value="${this.userData.ranks.overall.score}">
         ${this.userData.ranks.overall.name}
-        </data>`;
+        </data>
+        <h1 class="title">${this.userData.username}</h1>
+      </div>`;
   }
 }
 

codewars-challenges.js

@@ -0,0 +1,39 @@
+// This native web component fetches data from the Codewars API and renders it as a badge
+// 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 CodeWarsChallenges extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.userName = "PERicci";
+    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 = `
+        <p> Completed katas: ${this.userData.codeChallenges.totalCompleted} </p>
+      `;
+  }
+}
+
+customElements.define("codewars-challenges", CodeWarsChallenges);

codewars-last-completed.js

@@ -0,0 +1,41 @@
+// This native web component fetches data from the Codewars API and renders it as a badge
+// 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 CodeWarsLastCompleted extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this.userName = "PERicci";
+    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}/code-challenges/completed`
+    );
+    const data = await response.json();
+    this.userData = data; // set the userData property with the fetched data
+  }
+
+  render() {
+    this.shadowRoot.innerHTML = `
+        <h2>Last completed kata:</h2>
+        <h3>${this.userData.data[0].name}</h3>
+        <p>Languages: ${this.userData.data[0].completedLanguages}</p>
+      `;
+  }
+}
+
+customElements.define("codewars-last-completed", CodeWarsLastCompleted);

index.html

@@ -1,17 +1,29 @@
 <!DOCTYPE html>
 <html lang="en-gb">
-  <head>
-    <meta charset="utf-8" />
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <title>Codewars Badge</title>
-    <meta
-      name="description"
-      content="Extending HTML to create a new component"
-    />
-    <meta name="viewport" content="width=device-width, initial-scale=1" />
-  </head>
-  <body>
-    <codewars-badge></codewars-badge>
-    <script async defer type="module" src="./codewars-badge.js"></script>
-  </body>
-</html>
+
+<head>
+  <meta charset="utf-8" />
+  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+  <title>Codewars Badge</title>
+  <meta name="description" content="Extending HTML to create a new component" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Lato&display=swap" rel="stylesheet">
+
+  <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+  <codewars-badge></codewars-badge>
+  <codewars-challenges></codewars-challenges>
+  <codewars-last-completed></codewars-last-completed>
+
+
+  <script async defer type="module" src="./codewars-badge.js"></script>
+  <script async defer type="module" src="./codewars-challenges.js"></script>
+  <script async defer type="module" src="./codewars-last-completed.js"></script>
+</body>
+
+</html>

style.css

@@ -0,0 +1,22 @@
+:root {
+  --bg-colour: #16171b;
+  --fg-colour: #222327;
+  --text-colour: #efefef;
+  --text-secondary-colour: #b0b0b0;
+  --accent-colour: #b1361e;
+
+  --font-sans-serif: 'Lato', sans-serif;
+
+  --font-general: 600 1.2rem/1 var(--font-sans-serif);
+  --font-title: normal 2rem/1.5 var(--font-sans-serif);
+}
+
+body {
+  background-color: var(--bg-colour);
+  color: var(--text-colour);
+  font: var(--font-general);
+  -webkit-font-smoothing: antialiased;
+
+  width: 60%;
+  margin: auto;
+}