js readability and transition between avatar bg colors

index.js

@@ -1,27 +1,29 @@
 const status = document.querySelector("#status");
 const action = document.querySelector("#status-action");
-const avatar = document.querySelector(".avatar img");
+const avatar = document.querySelector(".avatar");
 
 updateStatus();
 window.setInterval(updateStatus, 10000);
 
 async function updateStatus() {
     const result = await fetch("https://api.youhavetrouble.me/online");
+
     if (result.status !== 200) return;
 
     const json = await result.json();
-    if (json.steam.status === "ONLINE") {
-        status.innerText = "Currently Online";
-        action.innerText = "";
-        setavatarBg("online")
-        return;
-    }
-    if (json.steam.status === "IN_GAME") {
-        status.innerText = "Currently Online";
-        action.innerText = `Playing ${json.steam.game}`;
-        setavatarBg("online")
-        return;
+    switch (json.steam.status) {
+        case "ONLINE":
+            status.innerText = "Currently Online";
+            action.innerText = "";
+            setavatarBg("online")
+            return;
+        case "IN_GAME":
+            status.innerText = "Currently Online";
+            action.innerText = `Playing ${json.steam.game}`;
+            setavatarBg("online")
+            return;
     }
+
     if (json.discord === "DO_NOT_DISTURB" || json.discord === "ONLINE") {
         status.innerText = "Currently Online";
         action.innerText = "";

main.css

@@ -88,6 +88,7 @@ main article {
     border: 3px solid #44251a;
     background-color: gray;
     overflow: clip;
+    transition: background-color 0.3s linear;
 }
 
 .avatar img {