add weater information

src/components/WeatherandTime.astro

@@ -0,0 +1,112 @@
+<main>
+    <div>
+        <section class="container mx-auto px-4">
+            <div id="swicthDIVBG">
+                <p id="cityName"></p>
+                <p id="temper"></p>
+                <p id="description"></p>
+            </div>
+        </section>
+        <!-- <div class="bg-red-500 text-black" id="weatherInfo"></div> -->
+    </div>
+</main>
+<script is:inline>
+        async function getCurrentLocation() {
+        return new Promise((resolve, reject) => {
+        if (navigator.geolocation) {
+            navigator.geolocation.getCurrentPosition(
+            (position) => resolve(position.coords),
+            (error) => reject(error)
+            );
+        } else {
+            reject(new Error('Geolocation is not supported by this browser.'));
+        }
+        });
+    }
+
+    async function getCityName(latitude, longitude) {
+        const apiKey = '4d54049b61eb45c4b121ab2cff9808ba';  // Replace with your OpenCage API key
+        const apiUrl = `https://api.opencagedata.com/geocode/v1/json?q=${latitude}+${longitude}&key=${apiKey}`;
+
+        try {
+        const response = await fetch(apiUrl);
+
+        if (!response.ok) {
+            throw new Error('Error fetching data from the server.');
+        }
+
+        const data = await response.json();
+
+        if (data.results && data.results.length > 0) {
+            const city = data.results[0].components.city;
+            return city;
+        } else {
+            throw new Error('City not found.');
+        }
+        } catch (error) {
+        console.error('Error:', error.message);
+        throw new Error('Error fetching city name.');
+        }
+    }
+
+    async function getWeatherData(city) {
+        const apiKey = 'aed8dd87581613e1d2bbbf63eeb618da';
+        const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`;
+
+        try {
+        const response = await fetch(apiUrl);
+
+        if (!response.ok) {
+            throw new Error('Error fetching weather data from the server.');
+        }
+
+        const data = await response.json();
+        return data;
+        } catch (error) {
+        console.error('Error:', error.message);
+        throw new Error('Error fetching weather data.');
+        }
+    }
+
+    async function showCityName() {
+        try {
+        const location = await getCurrentLocation();
+        const city = await getCityName(location.latitude, location.longitude);
+        // document.getElementById('weatherInfo').innerText = 'Current City: ' + city;
+
+        const weatherData = await getWeatherData(city);
+        displayWeather(weatherData);
+        } catch (error) {
+        console.error(error.message);
+        // document.getElementById('weatherInfo').innerText = 'Error fetching data.';
+        }
+    }
+
+    function displayWeather(data) {
+        // const weatherInfoDiv = document.getElementById('weatherInfo');
+
+        // Extract relevant information from the API response
+        const cityName = data.name;
+        const temperature = data.main.temp;
+        const description = data.weather[0].description;
+        document.getElementById('cityName').innerHTML= 'City: ' + cityName;
+        document.getElementById('temper').innerHTML = 'Temperature: ' + temperature;
+        document.getElementById('description').innerHTML = 'Description: ' + description;
+        let switchBG = document.innerHTML = description;
+        if (switchBG === 'clear sky') {
+            let clearSkyBG = document.getElementById('swicthDIVBG').style.backgroundImage = 'url(/img/clear_sky.webp)';
+            clearSkyBG.style.backgroundRepeat = 'no-repeat';
+            clearSkyBG.style.backgroundSize = 'cover';
+        }
+        // Display the weather information     switchDiv.style.backgroundImage = 'url("path/to/clear-sky-image.jpg")';
+
+        // weatherInfoDiv.innerHTML = `
+        // <p>City: ${cityName}</p>
+        // <p>Temperature: ${temperature} °C</p>
+        // <p>Description: ${description}</p>
+        // `;
+    }
+
+    // Call the function to display the city name and weather information
+    showCityName();
+</script>

src/layouts/Layout.astro

@@ -1,6 +1,7 @@
 ---
 import MainHeader from '../components/MainHeader.astro';
 import Footer from '../components/Footer.astro';
+import WeatherandTime from '../components/WeatherandTime.astro';
 export interface Props {
 	title: string; metaTitle: string; description: string; ogImg: string;  tiwtterCard: string; tiwtterImage: string; tiwtterTitle: string; tiwtterDesc: string; tiwtterURL: string; artPubTime: string; artUpdtTime: string; ogSiteName: string; ogType: string; ogTitle: string; ogDesc: string; ogURL: string; canonical: string;
 }
@@ -57,9 +58,9 @@ const { title, metaTitle, description, ogImg, tiwtterCard, tiwtterImage, tiwtter
 	<body>
 		<div>
 			<MainHeader /> 
-			
 		</div>
-		<div class="mt-[150px]">
+		<div class="mt-[100px]">
+			<WeatherandTime />
 			<slot />
 		</div>
 		<Footer />