badge api

assets/css/style.css

@@ -770,3 +770,19 @@ br {
 #review-person:hover {
 	text-decoration: underline;
 }
+
+#badges {
+	display: flex;
+	padding: 3px;
+	background-color: var(--surface0);
+	border: 2px solid var(--surface1);
+	align-items: center;
+	justify-content: center;
+	gap: 3px;
+	border-radius: 8px;
+	margin-bottom: 10px;
+}
+
+#badges > img {
+	border-radius: 50%;
+}

assets/js/badgesapi.js

@@ -0,0 +1,29 @@
+import { user } from "./index.js";
+const apiUrl = "https://badges.atums.world";
+
+
+export async function getBadges(user) {
+    const response = await fetch(`${apiUrl}/${user}`);
+    if (!response.ok) throw new Error(`Error fetching reviews: ${response.status} ${response.statusText}`);
+    const data = await response.json();
+    return data;
+}
+
+export async function populateBadges(element) {
+	const target = document.querySelector(element);
+	const data = await getBadges(user);
+
+	target.innerHTML = "";
+
+	data.badges.forEach(badge => {
+		const badgeEl = document.createElement("div");
+		const badgeImg = document.createElement("img");
+		badgeImg.src = badge.badge;
+		badgeEl.classList.add("tooltip");
+		badgeEl.setAttribute("data-tooltip", badge.tooltip);
+		badgeImg.style.width = "32px";
+
+		badgeEl.appendChild(badgeImg);
+		target.appendChild(badgeEl);
+	})
+}

assets/js/index.js

@@ -1,10 +1,12 @@
 import * as wakatime from "./wakatime.js";
 import * as github from "./github.js";
 import * as reviewdb from "./reviewdb.js";
+import * as badgeapi from "./badgesapi.js";
+
 const timeElem = document.getElementById('time');
 const timezone = 'Europe/Berlin';
 
-timeElem.setAttribute('data-tooltip', timezone);
+export const user = "1201415921802170388";
 
 function getTime(timezone) {
     const now = new Date();
@@ -85,7 +87,6 @@ setInterval(() => {
     ageElem.setAttribute("data-tooltip", updateAge(null, 10, "years old"));
 }, 10);
 
-const user = "1201415921802170388";
 
 function lan() {
     lanyard({userId: user}).then(data => {
@@ -289,6 +290,7 @@ function fetchWeather(location) {
 wakatime.fetchWakatime("#wakapi");
 github.writeGithubStats("#github-full");
 reviewdb.writeReviews("#reviews");
+badgeapi.populateBadges("#badges");
 
 const messages = [
     "Coding",

index.html

@@ -14,7 +14,8 @@
         <div class="info" id="Info">
             <img alt="Profile Picture" id="profile-picture" src="https://cdn.discordapp.com/embed/avatars/0.png"/>
 			<h1 class="name"><a target="_blank" id="username">zyqunix</a></h1>
-			<span><div class="time tooltip" id="time"></div><div class="weather" id="weather"></div></span></span>
+			<div id="badges">Badges</div>
+			<span><div class="time" id="time"></div><div class="weather" id="weather"></div></span></span>
 			<div class="age tooltip" id="age"></div>
             <span class="hobbies" id="hobbies">
                 Coding, Listening to Music, Reverse Engineering, Playing Counter-Strike