finished weather app
This commit is contained in:
Digi
parent
94cf2e3924
commit
45525c08d6
20250327/my-app
|
|
@ -1,5 +0,0 @@
|
|||
import { Stack } from "expo-router";
|
||||
|
||||
export default function RootLayout() {
|
||||
return <Stack />;
|
||||
}
|
||||
|
|
@ -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 [city, setCity] = useState("");
|
||||
|
||||
|
||||
const handlePress = () => {
|
||||
console.log(city);
|
||||
const WeatherScreen = ({ weatherData }) => {
|
||||
if (!weatherData){
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<View style={styles.locationContainer}>
|
||||
<Text style={styles.loading}>
|
||||
Adatok betöltése
|
||||
</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
)
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
async function fetchData() {
|
||||
try {
|
||||
const response = await fetch(`${baseUrl}Békéscsaba`);
|
||||
const data = await response.json();
|
||||
console.log(data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
const formatDateTime = (dateTimeStr) => {
|
||||
const date = new Date(dateTimeStr)
|
||||
const options = {
|
||||
weekday: "long",
|
||||
year: "numeric",
|
||||
month: "long",
|
||||
day: "numeric",
|
||||
hour: "2-digit",
|
||||
minute: "2-digit",
|
||||
}
|
||||
fetchData();
|
||||
}, []);
|
||||
return date.toLocaleDateString("hu-HU", options)
|
||||
}
|
||||
|
||||
return (
|
||||
<View>
|
||||
<Text>
|
||||
Időjárás app
|
||||
</Text>
|
||||
<Button
|
||||
title="Keresés"
|
||||
onPress={handlePress} />
|
||||
<TextInput
|
||||
placeholder="Város"
|
||||
value={city}
|
||||
onChangeText={setCity} />
|
||||
</View>
|
||||
);
|
||||
<SafeAreaView style={styles.container}>
|
||||
<StatusBar/>
|
||||
<ScrollView contentContainerStyle={styles.scrollContainer}>
|
||||
<View style={styles.locationContainer}>
|
||||
<Text style={styles.locationName}>{weatherData.location.name}</Text>
|
||||
<Text style={styles.locationDetail}>{weatherData.location.country}</Text>
|
||||
<Text style={styles.dateTime}>{formatDateTime(weatherData.location.localtime)}</Text>
|
||||
</View>
|
||||
|
||||
<View style={styles.mainWeatherContainer}>
|
||||
<Image
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
9
20250327/my-app/package-lock.json
generated
9
20250327/my-app/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user