Merge pull request #34 from AnshuRani7781/main-fea-weather-hours

Feat: add weather icons and improve hourly forecast display in Weather component

Author: Hrishikesh-Dalal

src/pages/Weather.jsx

@@ -85,6 +85,34 @@ export default function Weather() {
   // Helper to convert °C to °F
   const displayTemp = (c) => (unit === "C" ? c : Math.round((c * 9) / 5 + 32));
 
+  // Normalize icon URL returned by wttr.in (they sometimes return // links)
+  const getIconUrl = (iconArrOrStr) => {
+    if (!iconArrOrStr) return null;
+
+    // If API returned an array like [{ value: "//..." }]
+    if (Array.isArray(iconArrOrStr)) {
+      const url = iconArrOrStr?.[0]?.value;
+      if (!url) return null;
+      return url.startsWith("//") ? `https:${url}` : url;
+    }
+
+    // If API returned a plain string (rare) or already a URL
+    if (typeof iconArrOrStr === "string") {
+      return iconArrOrStr.startsWith("//")
+        ? `https:${iconArrOrStr}`
+        : iconArrOrStr;
+    }
+
+    return null;
+  };
+
+  // Format wttr.in hourly time values like "0", "300", "1500" -> "00:00", "03:00", "15:00"
+  const formatWttTime = (t) => {
+    if (t == null) return "";
+    const s = String(t).padStart(4, "0");
+    return `${s.slice(0, 2)}:${s.slice(2)}`;
+  };
+
   const getBadgeStyle = (condition) => {
     if (!condition) return { color: "#E0E0E0", label: "Clear 🌤️" };
 
@@ -142,9 +170,18 @@ export default function Weather() {
           {/* Current Weather */}
           <Card title="Current Weather" size="large">
             <h2>{data.nearest_area?.[0]?.areaName?.[0]?.value || city}</h2>
-            <p>
-              <strong>Temperature:</strong>{" "}
-              {displayTemp(Number(current.temp_C))}°{unit}
+            <p style={{ display: "flex", alignItems: "center", gap: "12px" }}>
+              {current && getIconUrl(current.weatherIconUrl) && (
+                <img
+                  src={getIconUrl(current.weatherIconUrl)}
+                  alt={current.weatherDesc?.[0]?.value || "weather icon"}
+                  style={{ width: 48, height: 48, objectFit: "contain" }}
+                />
+              )}
+              <span>
+                <strong>Temperature:</strong>{" "}
+                {displayTemp(Number(current.temp_C))}°{unit}
+              </span>
             </p>
             <p>
               <strong>Humidity:</strong> {current.humidity}%
@@ -163,7 +200,98 @@ export default function Weather() {
             return (
               <Card key={i} title={i === 0 ? "Today" : `Day ${i + 1}`}>
                 {/* Badge Section */}
-                <div
+                {/* Forecast icon (use first hourly entry icon) */}
+                {day.hourly?.[0] &&
+                  getIconUrl(day.hourly?.[0]?.weatherIconUrl) && (
+                    <div style={{ marginTop: 8 }}>
+                      <img
+                        src={getIconUrl(day.hourly?.[0]?.weatherIconUrl)}
+                        alt={
+                          day.hourly?.[0]?.weatherDesc?.[0]?.value ||
+                          "forecast icon"
+                        }
+                        style={{ width: 40, height: 40, objectFit: "contain" }}
+                        onError={(e) =>
+                          (e.currentTarget.style.display = "none")
+                        }
+                      />
+                    </div>
+                  )}
+
+                {/* Full-day hourly timeline (0:00 - 23:00) */}
+                {day.hourly && (
+                  <div
+                    style={{
+                      display: "block",
+                      marginTop: 8,
+                    }}
+                  >
+                    <div
+                      style={{
+                        display: "flex",
+                        gap: 12,
+                        overflowX: "auto",
+                        padding: "8px 4px",
+                        WebkitOverflowScrolling: "touch",
+                      }}
+                    >
+                      {day.hourly.map((h, idx) => {
+                        const icon = getIconUrl(h.weatherIconUrl);
+                        const t = h.time ?? h.Time ?? "";
+                        const temp =
+                          h.tempC ?? h.temp_C ?? h.tempC ?? h.tempF ?? "";
+
+                        return (
+                          <div
+                            key={idx}
+                            style={{
+                              minWidth: 72,
+                              padding: 6,
+                              borderRadius: 6,
+                              background: "rgba(0,0,0,0.03)",
+                              display: "flex",
+                              flexDirection: "column",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              fontSize: 12,
+                            }}
+                          >
+                            {icon ? (
+                              <img
+                                src={icon}
+                                alt={h.weatherDesc?.[0]?.value || "hour icon"}
+                                style={{
+                                  width: 36,
+                                  height: 36,
+                                  objectFit: "contain",
+                                }}
+                                loading="lazy"
+                                onError={(e) =>
+                                  (e.currentTarget.style.display = "none")
+                                }
+                              />
+                            ) : (
+                              <div style={{ fontSize: 18 }}>🌤️</div>
+                            )}
+                            <div style={{ marginTop: 6 }}>
+                              {formatWttTime(t)}
+                            </div>
+                            <div style={{ fontWeight: 700 }}>
+                              {displayTemp(Number(temp))}°{unit}
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  </div>
+                )}
+
+                <div style={
+                  {display:"flex",gap:"8px", marginTop:"17px"}
+                }>
+                  <strong>Avg Temp:</strong> {displayTemp(Number(day.avgtempC))}
+                  °{unit}
+                  <div
                   style={{
                     backgroundColor: badge.color,
                     borderRadius: "8px",
@@ -177,11 +305,7 @@ export default function Weather() {
                 >
                   {badge.label}
                 </div>
-
-                <p>
-                  <strong>Avg Temp:</strong> {displayTemp(Number(day.avgtempC))}
-                  °{unit}
-                </p>
+                </div>
                 <p>
                   <strong>Sunrise:</strong> {day.astronomy?.[0]?.sunrise}
                 </p>