diff --git a/src/Weather.js b/src/Weather.js
index ece3edc..0207334 100644
--- a/src/Weather.js
+++ b/src/Weather.js
@@ -1,17 +1,19 @@
-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);
@@ -19,14 +21,15 @@ function Weather() {
};
fetchData();
- }, []); // Empty dependency array ensures the effect runs only once when the component mounts
+ }, []);
return (
Weather Page
- {weatherData && }
+
+ {/* Render other components or data as needed */}
);
-}
+};
export default Weather;
diff --git a/src/WeatherCard.js b/src/WeatherCard.js
index 0967a55..21e5721 100644
--- a/src/WeatherCard.js
+++ b/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 (
Weather Information
-
{weatherData}
+
Temperature: {temperature}°C
+
Wind Speed: {windSpeed} km/h
+
Precipitation: {precipitation}
+ {shouldSeekShelter &&
SEEK SHELTER
}
{isHighTemperatureWarning &&
Warning: High Temperature!
}
{isHighWindSpeedWarning &&
Warning: High Wind Speed!
}
{isLowTemperatureWarning &&
Warning: Low Temperature!
}
+ {isRainWarning &&
Warning: Rain Expected!
}
{/* You can display different weather details here based on your API response */}
);