added code on html and js and css

BakhatBegum · BakhatBegum · commit 8fde0a41600a · 2024-01-26T14:13:25.000Z
diff --git a/codewars-badge.js b/codewars-badge.js
@@ -6,7 +6,7 @@ class CodeWarsBadge extends HTMLElement {
   constructor() {
     super();
     this.attachShadow({ mode: "open" });
-    this.userName = "CodeYourFuture";
+    this.userName = "BakhatBegum";
     this.userData = [];
   }
 
@@ -31,21 +31,35 @@ class CodeWarsBadge extends HTMLElement {
 
   render() {
     this.shadowRoot.innerHTML = `
-    <style>
-        :host {
-           --rank: ${this.userData.ranks.overall.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}">
-        ${this.userData.ranks.overall.name}
-        </data>`;
+<data>
+<table>
+<tr>
+  <td>Rank: </td>
+    <td>${this.userData.ranks.overall.name}</td>
+    <td>${this.userData.ranks.overall.score}</td>
+    <td>${this.userData.ranks.overall.color}</td>
+</tr> 
+
+<tr>
+  <td>Honor: </td>
+    <td>${this.userData.honor}</td>
+</tr>
+
+<tr>
+    <td>JavaScript Rank: </td>
+    <td>${this.userData.ranks.languages.javascript.name}</td>
+    <td>${this.userData.ranks.languages.javascript.score}</td>
+    <td>${this.userData.ranks.languages.javascript.color}</td>
+</tr>
+
+<tr>
+      <td>Total Completed Kata: </td>
+      <td>${this.userData.codeChallenges.totalCompleted}</td>
+</tr>
+
+</table>
+</data>`
   }
 }
-
 customElements.define("codewars-badge", CodeWarsBadge);
+
diff --git a/index.html b/index.html
@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <link rel="stylesheet" href="style.css">
     <title>Codewars Badge</title>
     <meta
       name="description"
@@ -11,7 +12,14 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
   </head>
   <body>
-    <codewars-badge></codewars-badge>
+    <div class="layout">
+      <h1><span>6 kyu </span> BakhatBegum</h1>
+      <table>
+        <tr>
+      <codewars-badge></codewars-badge>
+        </tr>
+    </table>
+    </div>
     <script async defer type="module" src="./codewars-badge.js"></script>
   </body>
 </html>
diff --git a/style.css b/style.css
@@ -0,0 +1,34 @@
+body{
+    background-color: #1D1D1B;
+    margin: 0 auto;
+    color: white;
+}
+span{
+    color: #f7941d;
+    border:5px solid yellow;
+    font-size: 1.2rem;
+    padding: 6px 6px;
+    border-radius: 50px;
+    }
+
+  .layout {
+    margin: 0 auto; 
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 60vh;
+    margin-right: 500px;
+  }
+  @media screen and (max-width: 992px) {
+    .layout {
+      margin-right: 300px;
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+
+  .layout {
+    margin-right: 0px;
+  }
+  }
