finished weather app

20250327/my-app/app/_layout.tsx

@@ -1,5 +0,0 @@
-import { Stack } from "expo-router";
-
-export default function RootLayout() {
-  return <Stack />;
-}

20250327/my-app/app/index.jsx

@@ -1,43 +1,298 @@
 import { useEffect, useState } from "react";
-import { View, Text, TextInput, Button, FlatList, StyleSheet, Alert } from "react-native";
+import { View, Text, TextInput, StyleSheet, Image, ScrollView, SafeAreaView, StatusBar, TouchableOpacity} from "react-native";
+import { Droplets, Droplet, Wind, Gauge, Eye, ThermometerSunIcon } from 'lucide-react';
 
 const baseUrl = "http://api.weatherapi.com/v1/current.json?key=1232eaa82978466da1f81125252703&q=";
 
-export default function Index() {
+const WeatherScreen = ({ weatherData }) => {
-  const [city, setCity] = useState("");
+  if (!weatherData){
-
+    return (
-
+      <SafeAreaView style={styles.container}>
-  const handlePress = () => {
+        <View style={styles.locationContainer}>
-    console.log(city);   
+          <Text style={styles.loading}>
+            Adatok betöltése
+          </Text>
+        </View>
+      </SafeAreaView>
+    )
   }
 
-  useEffect(() => {
+  const formatDateTime = (dateTimeStr) => {
-    async function fetchData() {
+    const date = new Date(dateTimeStr)
-      try {
+    const options = {
-        const response = await fetch(`${baseUrl}Békéscsaba`);
+      weekday: "long",
-        const data = await response.json();
+      year: "numeric",
-        console.log(data);
+      month: "long",
-      } catch (error) {
+      day: "numeric",
-        console.error(error);
+      hour: "2-digit",
-      }
+      minute: "2-digit",
     }
-    fetchData();
+    return date.toLocaleDateString("hu-HU", options)
-    }, []);
+  }
 
   return (
-    <View>
+    <SafeAreaView style={styles.container}>
-      <Text>
+      <StatusBar/>
-        Időjárás app
+      <ScrollView contentContainerStyle={styles.scrollContainer}>
-      </Text>
+        <View style={styles.locationContainer}>
-      <Button
+          <Text style={styles.locationName}>{weatherData.location.name}</Text>
-        title="Keresés"
+          <Text style={styles.locationDetail}>{weatherData.location.country}</Text>
-        onPress={handlePress} />
+          <Text style={styles.dateTime}>{formatDateTime(weatherData.location.localtime)}</Text>
-      <TextInput
+        </View>
-        placeholder="Város"
+
-        value={city}
+        <View style={styles.mainWeatherContainer}>
-        onChangeText={setCity} />
+          <Image
-    </View>
+            source={{ uri: `https:${weatherData.current.condition.icon}`.replace("64x64", "128x128") }}
-  );
+            style={styles.weatherIcon}
+          />
+          <Text style={styles.temperature}>{weatherData.current.temp_c}°C</Text>
+          <Text style={styles.weatherCondition}>{weatherData.current.condition.text}</Text>
+          <Text style={styles.feelsLike}>Hőérzet: {weatherData.current.feelslike_c}°C</Text>
+        </View>
+
+        <View style={styles.detailsContainer}>
+          <View style={styles.detailRow}>
+            <View style={styles.detailItem}>
+              <Droplet style={styles.icon}/>
+              <Text style={styles.detailTitle}>Páratartalom</Text>
+              <Text style={styles.detailValue}>{weatherData.current.humidity}%</Text>
+            </View>
+            <View style={styles.detailItem}>
+              <Wind style={styles.icon} />
+              <Text style={styles.detailTitle}>Szél</Text>
+              <Text style={styles.detailValue}>{weatherData.current.wind_kph} km/h</Text>
+              <Text style={styles.detailSubValue}>{weatherData.current.wind_dir}</Text>
+            </View>
+          </View>
+
+          <View style={styles.detailRow}>
+            <View style={styles.detailItem}>
+              <Gauge style={styles.icon} />
+              <Text style={styles.detailTitle}>Légnyomás</Text>
+              <Text style={styles.detailValue}>{weatherData.current.pressure_mb} mb</Text>
+            </View>
+            <View style={styles.detailItem}>
+              <Eye style={styles.icon} />
+              <Text style={styles.detailTitle}>Látótávolság</Text>
+              <Text style={styles.detailValue}>{weatherData.current.vis_km} km</Text>
+            </View>
+          </View>
+
+          <View style={styles.detailRow}>
+            <View style={styles.detailItem}>
+              <ThermometerSunIcon style={styles.icon} />
+              <Text style={styles.detailTitle}>UV Index</Text>
+              <Text style={styles.detailValue}>{weatherData.current.uv}</Text>
+            </View>
+            <View style={styles.detailItem}>
+              <Droplets style={styles.icon}/>
+              <Text style={styles.detailTitle}>Csapadék</Text>
+              <Text style={styles.detailValue}>{weatherData.current.precip_mm} mm</Text>
+            </View>
+          </View>
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  )
 }
 
 
+const styles = StyleSheet.create({
+  body: {
+    backgroundColor: "#1F2937",
+  },
+  icon: {
+    color: "#8CBBF1"
+  },
+  loading: {
+    color: "#FFFFFF",
+    fontSize: 25
+  },
+  container: {
+    flex: 1,
+    backgroundColor: "#1F2937",
+  },
+  scrollContainer: {
+    padding: 20,
+  },
+  locationContainer: {
+    alignItems: "center",
+    marginBottom: 20,
+  },
+  locationName: {
+    fontSize: 32,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+  },
+  locationDetail: {
+    fontSize: 18,
+    color: "#E5E7EB",
+    marginTop: 4,
+  },
+  dateTime: {
+    fontSize: 14,
+    color: "#9CA3AF",
+    marginTop: 8,
+  },
+  mainWeatherContainer: {
+    alignItems: "center",
+    marginBottom: 30,
+  },
+  weatherIcon: {
+    width: 128,
+    height: 128,
+    marginBottom: 10,
+  },
+  temperature: {
+    fontSize: 64,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+  },
+  weatherCondition: {
+    fontSize: 24,
+    color: "#E5E7EB",
+    marginTop: 4,
+  },
+  feelsLike: {
+    fontSize: 16,
+    color: "#9CA3AF",
+    marginTop: 8,
+  },
+  detailsContainer: {
+    backgroundColor: "#374151",
+    borderRadius: 20,
+    padding: 20,
+    marginBottom: 20,
+  },
+  detailRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginBottom: 20,
+  },
+  detailItem: {
+    flex: 1,
+    alignItems: "center",
+    padding: 10,
+  },
+  detailTitle: {
+    fontSize: 14,
+    color: "#9CA3AF",
+    marginTop: 8,
+  },
+  detailValue: {
+    fontSize: 18,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+    marginTop: 4,
+  },
+  detailSubValue: {
+    fontSize: 14,
+    color: "#E5E7EB",
+  },
+  headerContainer: {
+    backgroundColor: "#111827",
+    padding: 20,
+    borderBottomWidth: 1,
+    borderBottomColor: "#374151",
+    marginBottom: 10,
+  },
+  headerTitle: {
+    fontSize: 28,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+    textAlign: "center",
+    marginBottom: 20,
+    textShadowColor: "rgba(0, 0, 0, 0.75)",
+    textShadowOffset: { width: 1, height: 1 },
+    textShadowRadius: 3,
+  },
+  searchContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginBottom: 10,
+  },
+  searchInput: {
+    flex: 1,
+    backgroundColor: "#374151",
+    borderRadius: 10,
+    padding: 12,
+    color: "#FFFFFF",
+    marginRight: 10,
+    fontSize: 16,
+  },
+  searchButton: {
+    backgroundColor: "#3B82F6",
+    borderRadius: 10,
+    paddingVertical: 12,
+    paddingHorizontal: 20,
+    elevation: 2,
+  },
+  searchButtonText: {
+    color: "#FFFFFF",
+    fontWeight: "bold",
+    fontSize: 16,
+  },
+})
+
+
+
+// Example usage
+export default function App() {
+
+async function fetchData(city) {
+  try {
+    const response = await fetch(`${baseUrl}${city}`);
+    const data = await response.json();
+    if (response.status == 200){
+      setWeatherData(data);
+      console.log(data);
+    }
+    
+  } catch (error) {
+    console.error(error);
+  }
+}
+// Sample data based on the provided object
+  const [weatherData, setWeatherData] = useState(null);
+  
+  const [city, setCity] = useState("Békéscsaba");
+
+  const handlePress = () => {
+    if (city){
+      try {
+        fetchData(city);
+      } catch (error){
+        console.error(error);
+      }
+    }
+  }
+
+  useEffect(() => {
+    fetchData(city);
+  }, []);
+
+
+  return (
+    <SafeAreaView style={styles.container}>
+      <View style={styles.headerContainer}>
+        <Text style={styles.headerTitle}>Időjárás app</Text>
+
+        <View style={styles.searchContainer}>
+          <TextInput
+            style={styles.searchInput}
+            placeholder="Város"
+            placeholderTextColor="#9CA3AF"
+            value={city}
+            onChangeText={setCity}
+          />
+          <TouchableOpacity style={styles.searchButton} onPress={handlePress}>
+            <Text style={styles.searchButtonText}>Keresés</Text>
+          </TouchableOpacity>
+        </View>
+      </View>
+
+      <WeatherScreen weatherData={weatherData} />
+    </SafeAreaView>
+  )
+}
+

20250327/my-app/package-lock.json

@@ -24,6 +24,7 @@
         "expo-system-ui": "~4.0.8",
         "expo-web-browser": "~14.0.2",
         "firebase": "^11.5.0",
+        "lucide-react": "^0.485.0",
         "next": "^15.2.4",
         "react": "18.3.1",
         "react-dom": "18.3.1",
@@ -10288,6 +10289,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.485.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.485.0.tgz",
+      "integrity": "sha512-NvyQJ0LKyyCxL23nPKESlr/jmz8r7fJO1bkuptSNYSy0s8VVj4ojhX0YAgmE1e0ewfxUZjIlZpvH+otfTnla8Q==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/make-dir": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-4.0.0.tgz",

20250327/my-app/package.json

@@ -31,6 +31,7 @@
     "expo-system-ui": "~4.0.8",
     "expo-web-browser": "~14.0.2",
     "firebase": "^11.5.0",
+    "lucide-react": "^0.485.0",
     "next": "^15.2.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",