Updated

AirQuality/AirQuality.ino

@@ -258,6 +258,8 @@ void setup() {
 
       const data = await response.json();
 
+      console.log("Fetched data:", data);
+
       // Update cards
       updateCard("aqiCard", data.latest.aqi, getAQIRecommendation(data.latest.aqi));
       updateCard("eco2Card", data.latest.eco2, getECO2Recommendation(data.latest.eco2));
@@ -293,12 +295,18 @@ void setup() {
       console.error(`Value text element not found in ${cardId}`);
     }
 
-    if (recText && recommendation) {
+    // Apply color class based on recommendation
-      recText.textContent = recommendation.text || "";
+    if (recommendation && recommendation.class) {
-      card.className = `card text-center ${recommendation.class || ""}`;
+      card.className = `card text-center ${recommendation.class}`;
+    } else {
+      card.className = "card text-center"; // Default class if no recommendation
+    }
+
+    // Update recommendation text if available
+    if (recText && recommendation && recommendation.text) {
+      recText.textContent = recommendation.text;
     } else if (recText) {
-      recText.textContent = "";
+      recText.textContent = ""; // Clear text if no recommendation
-      card.className = "card text-center";
     }
   }
 
@@ -326,18 +334,17 @@ void setup() {
   }
 
   function getTemperatureClass(temp) {
-    if (temp < 18) return { class: "moderate"};
+    if (temp < 18) return { class: "moderate", text: "" }; // Too cold
-    if (temp > 26) return { class: "poor"};
+    if (temp > 26) return { class: "poor", text: "" }; // Too hot
-    return { class: "good"};
+    return { class: "good", text: "" }; // Comfortable
   }
 
   function getHumidityClass(hum) {
-    if (hum < 30) return { class: "moderate"};
+    if (hum < 30) return { class: "moderate", text: "" }; // Too dry
-    if (hum > 60) return { class: "poor"};
+    if (hum > 60) return { class: "poor", text: "" }; // Too humid
-    return { class: "good"};
+    return { class: "good", text: "" }; // Comfortable
   }
 
-  // Fetch data every second
   setInterval(fetchData, 1000);
 </script>