diff --git a/codewars-badge.js b/codewars-badge.js index 7c26060..a6e2bf2 100644 --- 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 = ` - - - ${this.userData.ranks.overall.name} - `; + + + + + + + + + + + + + + + + + + + + + + + + + + +
Rank: ${this.userData.ranks.overall.name}${this.userData.ranks.overall.score}${this.userData.ranks.overall.color}
Honor: ${this.userData.honor}
JavaScript Rank: ${this.userData.ranks.languages.javascript.name}${this.userData.ranks.languages.javascript.score}${this.userData.ranks.languages.javascript.color}
Total Completed Kata: ${this.userData.codeChallenges.totalCompleted}
+` } } - customElements.define("codewars-badge", CodeWarsBadge); + diff --git a/index.html b/index.html index bbb3149..1aabffb 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,7 @@ + Codewars Badge - +
+

6 kyu BakhatBegum

+ + + + +
+
diff --git a/style.css b/style.css new file mode 100644 index 0000000..ba1a5d1 --- /dev/null +++ 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; + } + } \ No newline at end of file