Add files via upload

simple-twitch-metrics/index.html

@@ -0,0 +1,20 @@
+
+<link rel="stylesheet" href="./style.css" />
+<div id="mainContainer">
+	<label class="metricContainer">
+		<label class="icon">★</label>
+		<label id="subCountLabel"></label>
+	</label>
+
+	<label class="metricContainer">
+		<label class="icon">♥</label>
+		<label class="metricLabel" id="followerCountLabel"></label>
+	</label>
+
+	<label class="metricContainer">
+		<label class="icon">👁</label>
+		<label class="metricLabel" id="viewCountLabel"></label>
+	</label>
+</div>
+
+<script src="./script.js"></script>

simple-twitch-metrics/script.js

@@ -0,0 +1,38 @@
+////////////////////
+// URL PARAMETERS //
+////////////////////
+
+const queryString = window.location.search;
+const urlParams = new URLSearchParams(queryString);
+const twitchUsername = urlParams.get("username") || '';
+
+///////////////
+// FUNCTIONS //
+///////////////
+
+async function UpdateMetrics() {
+    document.getElementById("subCountLabel").innerHTML = await GetMetric("https://decapi.me/twitch/subcount");
+    document.getElementById("followerCountLabel").innerHTML = await GetMetric("https://decapi.me/twitch/followcount");
+    document.getElementById("viewCountLabel").innerHTML = await GetViewCount();
+
+    setTimeout(UpdateMetrics, 15000);
+}
+
+UpdateMetrics();
+
+async function GetMetric(url) {
+    const response = await fetch(`${url}/${twitchUsername}`);
+    const metric = await response.text();
+
+    if (metric.includes("decapi.me"))
+        return "-";
+    else
+        return metric;
+}
+
+async function GetViewCount() {    
+    const response = await fetch(`https://decapi.me/twitch/viewercount/${twitchUsername}`);
+    const viewcount = await response.text();
+
+    return isNaN(Number(viewcount)) ? 0 : Number(viewcount);
+}

simple-twitch-metrics/style.css

@@ -0,0 +1,25 @@
+* {
+	margin: 0;
+	padding: 0;
+}
+
+#mainContainer {
+	text-align: center;
+	font-size: 40px;
+	text-transform: uppercase;
+	font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+	
+	font-weight: 700;
+	font-size: 36px;
+	text-shadow: rgb(0, 0, 0) 2px 2px 2px;
+	color: white;
+}
+
+.metricContainer {
+	padding: 0px 10px;
+}
+
+.icon {
+	font-size: 44px;
+	padding: 0px 10px;
+}