REAL VARIABLE NAMES AND JSON!!

src/Weather.js

@@ -1,32 +1,35 @@
-import './App.css';
+// Weather.js
+
 import React, { useEffect, useState } from "react";
 import WeatherCard from "./WeatherCard";
 
-function Weather() {
+const Weather = () => {
   const [weatherData, setWeatherData] = useState(null);
 
   useEffect(() => {
     const fetchData = async () => {
       try {
-        const response = await fetch('http://wttr.in/?format=%C+%t+%w');
-        const result = await response.text();
+        const response = await fetch('http://wttr.in/?format=j1');
+        const result = await response.json();
 
         console.log("Weather Data:", result);
+
         setWeatherData(result);
       } catch (error) {
         console.error("Error fetching weather data:", error);
       }
     };
 
     fetchData();
-  }, []); // Empty dependency array ensures the effect runs only once when the component mounts
+  }, []);
 
   return (
     <div>
       <h2>Weather Page</h2>
-      {weatherData && <WeatherCard weatherData={weatherData} />}
+      <WeatherCard weatherData={weatherData} />
+      {/* Render other components or data as needed */}
     </div>
   );
-}
+};
 
 export default Weather;

src/WeatherCard.js

@@ -1,13 +1,18 @@
-// Modify WeatherCard.js
+// WeatherCard.js
 
 import React from "react";
 
 const WeatherCard = ({ weatherData }) => {
-  // Extract temperature from the weatherData (assuming temperature is the first part)
-  const temperature = parseInt(weatherData.split(" ")[0]);
+  if (!weatherData || !weatherData.current_condition || weatherData.current_condition.length === 0) {
+    return null; // Return null or some loading indicator if weatherData is not available yet
+  }
 
-  // Extract wind speed from the weatherData (assuming wind speed is the third part)
-  const windSpeed = parseInt(weatherData.split(" ")[2]);
+  const currentCondition = weatherData.current_condition[0];
+
+  // Extracting variables from the JSON response
+  const temperature = currentCondition.temp_C;
+  const windSpeed = currentCondition.windspeedKmph;
+  const precipitation = currentCondition.precipitation;
 
   // Set thresholds for warnings (you can adjust these values)
   const highTemperatureThreshold = 30; // Example threshold in degrees Celsius
@@ -18,11 +23,13 @@ const WeatherCard = ({ weatherData }) => {
   const isHighTemperatureWarning = temperature > highTemperatureThreshold;
   const isHighWindSpeedWarning = windSpeed > highWindSpeedThreshold;
   const isLowTemperatureWarning = temperature < lowTemperatureThreshold;
+  const isRainWarning = precipitation === "Rain";
+
+  // Determine if "SEEK SHELTER" warning is needed
+  const shouldSeekShelter = isHighTemperatureWarning || isHighWindSpeedWarning || isLowTemperatureWarning || isRainWarning;
 
   // Set color based on warnings
-  const cardColor = isHighTemperatureWarning || isHighWindSpeedWarning || isLowTemperatureWarning
-    ? "rgba(255, 0, 0, 0.2)"
-    : "rgba(0, 0, 255, 0.2)";
+  const cardColor = shouldSeekShelter ? "rgba(255, 0, 0, 0.2)" : "rgba(0, 0, 255, 0.2)";
 
   // You can add more styling to customize the appearance of the card
   const cardStyle = {
@@ -37,10 +44,14 @@ const WeatherCard = ({ weatherData }) => {
   return (
     <div style={cardStyle}>
       <h3>Weather Information</h3>
-      <p>{weatherData}</p>
+      <p>Temperature: {temperature}°C</p>
+      <p>Wind Speed: {windSpeed} km/h</p>
+      <p>Precipitation: {precipitation}</p>
+      {shouldSeekShelter && <p style={{ color: "red", fontWeight: "bold" }}>SEEK SHELTER</p>}
       {isHighTemperatureWarning && <p style={{ color: "red" }}>Warning: High Temperature!</p>}
       {isHighWindSpeedWarning && <p style={{ color: "red" }}>Warning: High Wind Speed!</p>}
       {isLowTemperatureWarning && <p style={{ color: "blue" }}>Warning: Low Temperature!</p>}
+      {isRainWarning && <p style={{ color: "orange" }}>Warning: Rain Expected!</p>}
       {/* You can display different weather details here based on your API response */}
     </div>
   );