barta-india.in/src/pages/weather.astro

<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="flex flex-col justify-center place-items-center fixed top-[50%] right-[50%] bg-white md:max-w-lg w-full p-6 rounded-2xl shadow-xl" style="display: none;" id="weatherPermission">
            <p>know weather information allow location Permission</p>
            <div class="flex flex-row gap-6">
                <button id="yesButton" class="border-2 border-[#580a0a] text-[#580a0a] px-4 py-2 rounded-xl">Allow</button>
                <button id="noButton" class="border-2 border-[#580a0a] text-[#580a0a] px-4 py-2 rounded-xl">Deny</button>
            </div>
            
        </div>
        <!-- <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=Los%20Angeles&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>
        // `;
    }
    function windowOnload() {
            document.getElementById('weatherPermission').style.display = 'block';

            // Attach click event handlers to the buttons
            document.getElementById('yesButton').addEventListener('click', onYesButtonClick);
            document.getElementById('noButton').addEventListener('click', onNoButtonClick);
        }

        function onYesButtonClick() {
            // Call the function to display the city name and weather information
            showCityName();

            // Hide the weather permission div
            document.getElementById('weatherPermission').style.display = 'none';
        }

        function onNoButtonClick() {
            // Hide the weather permission div without fetching weather information
            document.getElementById('weatherPermission').style.display = 'none';
        }
        
        window.onload = windowOnload;
</script>