script.js

let cityInput = document.getElementById('city_input'),
    searchBtn = document.getElementById('searchBtn'),
    locationBtn = document.getElementById('locationBtn'),
    api_key = '238cb5938a785d6545fd3c798fcc8bef',
    currentWeatherCard = document.querySelector('.weather-left .card'),
    fiveDaysForecastCard = document.querySelector('.day-forecast'),
    aqiCard = document.querySelectorAll('.highlights .card')[0],
    sunriseCard = document.querySelectorAll('.highlights .card')[1],
    humidityVal = document.getElementById('humidityVal'),
    pressureVal = document.getElementById('pressureVal'),
    visibilityVal = document.getElementById('visibilityVal'),
    windSpeedVal = document.getElementById('windSpeedVal'),
    feelsVal = document.getElementById('feelsVal');
    hourlyForecastCard =document.querySelector('.hourly-forecast'),

// Check if elements exist
console.log('Elements found:', {
    cityInput: !!cityInput,
    searchBtn: !!searchBtn,
    currentWeatherCard: !!currentWeatherCard,
    fiveDaysForecastCard: !!fiveDaysForecastCard,
    aqiCard: !!aqiCard,
    sunriseCard: !!sunriseCard,
    humidityVal: !!humidityVal,
    pressureVal: !!pressureVal,
    visibilityVal: !!visibilityVal,
    windSpeedVal: !!windSpeedVal,
    feelsVal: !!feelsVal
});

let aqiList = ['Good', 'Fair', 'Moderate', 'Poor', 'Very Poor'];

// Safe element update function
function safeUpdate(element, content) {
    if (element) {
        element.innerHTML = content;
    } else {
        console.warn('Element not found:', element);
    }
}

function showLoading() {
    safeUpdate(currentWeatherCard, '<p>Loading...</p>');
    safeUpdate(fiveDaysForecastCard, '<p>Loading forecast...</p>');
    safeUpdate(aqiCard, '<p>Loading air quality...</p>');
    if (sunriseCard) {
        sunriseCard.innerHTML = '<p>Loading...</p>';
    }
}

function getWeatherDetails(name, lat, lon, country, state) {
    showLoading();
    
    let FORECAST_API_URL = `https://api.openweathermap.org/data/2.5/forecast?lat=${lat}&lon=${lon}&appid=${api_key}&units=metric`,
        WEATHER_API_URL = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${api_key}&units=metric`,
        AIR_POLLUTION_API_URL = `https://api.openweathermap.org/data/2.5/air_pollution?lat=${lat}&lon=${lon}&appid=${api_key}&units=metric`;

    const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
    const months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];

    // Fetch current weather
    fetch(WEATHER_API_URL)
    .then(res => {
        console.log('Weather API Response status:', res.status);
        if (!res.ok) {
            throw new Error(`Weather API failed: ${res.status} ${res.statusText}`);
        }
        return res.json();
    })
    .then(data => {
        console.log('Weather data received:', data);
        
        if (!data || typeof data !== 'object') {
            throw new Error('Invalid weather data received');
        }

        let date = new Date();
        
        // Safely extract data with fallbacks
        const temp = data.main?.temp ? data.main.temp.toFixed(1) : '--';
        const description = data.weather?.[0]?.description || '--';
        const icon = data.weather?.[0]?.icon || '01d';
        
        safeUpdate(currentWeatherCard, `
            <div class="current-weather">
                <div class="details">
                    <p>Now</p>
                    <h2>${temp}&deg;C</h2>
                    <p>${description}</p>
                </div>
                <div class="weather-icon">
                    <img src="https://openweathermap.org/img/wn/${icon}@2x.png" alt="weather icon">
                </div>
            </div>
            <hr>
            <div class="card-footer">
                <p><i class="fa-light fa-calendar"></i>${days[date.getDay()]}, ${date.getDate()} ${months[date.getMonth()]}</p>
                <p><i class="fa-light fa-location-dot"></i>${name}, ${country}</p>
            </div>
        `);
  
        // Extract weather details safely
        let sunrise = data.sys?.sunrise || 0;
        let sunset = data.sys?.sunset || 0;
        let timezone = data.timezone || 0;
        let visibility = data.visibility || 0;
        let humidity = data.main?.humidity ?? "--";
        let pressure = data.main?.pressure ?? "--";
        let feels_like = data.main?.feels_like ?? "--";
        let speed = data.wind?.speed ?? "--";

        // Format times safely
        let sRiseTime = '--';
        let sSetTime = '--';
        
        try {
            if (sunrise && sunset) {
                sRiseTime = moment.unix(sunrise).utcOffset(timezone / 60).format('hh:mm A');
                sSetTime = moment.unix(sunset).utcOffset(timezone / 60).format('hh:mm A');
            }
        } catch (error) {
            console.error('Error formatting sunrise/sunset times:', error);
        }

        // Update sunrise card only if it exists
        if (sunriseCard) {
            sunriseCard.innerHTML = `
                <div class="card-head">
                    <p>Sunrise & Sunset</p>
                </div>
                <div class="sunrise-sunset">
                    <div class="item">
                        <div class="icon">
                            <i class="fa-light fa-sunrise fa-4x"></i>
                        </div>
                        <div>
                            <p>Sunrise</p>
                            <h2>${sRiseTime}</h2>
                        </div>
                    </div>
                    <div class="item">
                        <div class="icon">
                            <i class="fa-light fa-sunset fa-4x"></i>
                        </div>
                        <div>
                            <p>Sunset</p>
                            <h2>${sSetTime}</h2>
                        </div>
                    </div>
                </div>
            `;
        }

        // Update other values safely
        if (humidityVal) humidityVal.innerHTML = `${humidity}${humidity !== "--" ? "%" : ""}`;
        if (pressureVal) pressureVal.innerHTML = `${pressure !== "--" ? pressure + " hPa" : "--"}`;
        if (visibilityVal) visibilityVal.innerHTML = `${visibility ? (visibility / 1000).toFixed(1) + " km" : "--"}`;
        if (windSpeedVal) windSpeedVal.innerHTML = `${speed !== "--" ? speed + " m/s" : "--"}`;
        if (feelsVal) feelsVal.innerHTML = `${feels_like !== "--" ? Number(feels_like).toFixed(1) + "°C" : "--"}`;

    })
    .catch((error) => {
        console.error('Failed to fetch current weather:', error);
        safeUpdate(currentWeatherCard, '<p>Error loading weather data</p>');
    });

    // Fetch Air Quality Index
    fetch(AIR_POLLUTION_API_URL)
        .then(res => res.json())
        .then(data => {
            if (!data || !data.list || data.list.length === 0) {
                console.error('Invalid air quality data');
                safeUpdate(aqiCard, '<p>Air quality data not available</p>');
                return;
            }
            
            const components = data.list[0].components;

            // Safe value extraction function - FIXED CODE
            const getSafeValue = (value) => {
                if (value === null || value === undefined) return '--';
                
                const numValue = Number(value);
                if (isNaN(numValue) || !isFinite(numValue)) return '--';
                
                // Filter out unreasonably large values
                if (Math.abs(numValue) > 1000) return '--';
                
                return numValue.toFixed(2);
            };

            const pm2_5 = getSafeValue(components.pm2_5);
            const pm10 = getSafeValue(components.pm10);
            const so2 = getSafeValue(components.so2);
            const co = getSafeValue(components.co);
            const no = getSafeValue(components.no);
            const no2 = getSafeValue(components.no2);
            const nh3 = getSafeValue(components.nh3);
            const o3 = getSafeValue(components.o3);
            const aqi = data.list[0].main.aqi || 1;

            safeUpdate(aqiCard, `
               <div class="card-head">
                    <p>Air Quality Index</p>
                    <p class="air-index aqi-${aqi}">${aqiList[aqi - 1] || 'Unknown'}</p>
                </div>
                <div class="air-indices">
                    <i class="fa-regular fa-wind fa-3x"></i>
                    <div class="item">
                        <p>PM2.5</p>
                        <h2>${pm2_5}</h2>
                    </div>
                    <div class="item">
                        <p>PM10</p>
                        <h2>${pm10}</h2>
                    </div>
                    <div class="item">
                        <p>SO2</p>
                        <h2>${so2}</h2>
                    </div>
                    <div class="item">
                        <p>CO</p>
                        <h2>${co}</h2>
                    </div>
                    <div class="item">
                        <p>NO</p>
                        <h2>${no}</h2>
                    </div>
                    <div class="item">
                        <p>NO2</p>
                        <h2>${no2}</h2>
                    </div>
                    <div class="item">
                        <p>NH3</p>
                        <h2>${nh3}</h2>
                    </div>
                    <div class="item">
                        <p>O3</p>
                        <h2>${o3}</h2>
                    </div>
                </div>
            `);
        })
        .catch((error) => {
            console.error('Failed to fetch Air Quality Index:', error);
            safeUpdate(aqiCard, '<p>Failed to load air quality data</p>');
        });

    // Fetch 5-day forecast
    fetch(FORECAST_API_URL)
        .then(res => {
            if (!res.ok) {
                throw new Error('Forecast API response not OK');
            }
            return res.json();
        })
        .then(data => {
            if (!data || !data.list) {
                throw new Error('Invalid forecast data');
            }
            let hourlyForecast = data.list;
            hourlyForecastCard.innerHTML='';
            for (let i=0;i<=7;i++){
                let hourlyForecastDate=new Date(hourlyForecast[i].dt_txt);
                let hr = hourlyForecastDate.getHours();
                let a ='PM';
                if(hr<12) a = 'AM';
                if (hr==0) hr=12;
                if(hr>12) hr = hr-12;
                hourlyForecastCard.innerHTML+=`
                <div class="card">
                    <p>${hr} ${a}</p>
                    <img src="https://openweathermap.org/img/wn/${hourlyForecast[i].weather[0].icon}.png" alt="">
                    <p>${hourlyForecast[i].main.temp.toFixed(1)}&deg;C</p>

                </div>
                `;
            }
            let uniqueForecastDays = [];
            let fiveDaysForecast = data.list.filter(forecast => {
                let forecastDate = new Date(forecast.dt_txt).getDate();
                if (!uniqueForecastDays.includes(forecastDate)) {
                    return uniqueForecastDays.push(forecastDate);
                }
            });

            let forecastHTML = '';
            for (let i = 0; i < fiveDaysForecast.length; i++) {
                let date = new Date(fiveDaysForecast[i].dt_txt);
                const temp = fiveDaysForecast[i].main?.temp ? fiveDaysForecast[i].main.temp.toFixed(1) : '--';
                const icon = fiveDaysForecast[i].weather?.[0]?.icon || '01d';
                
                forecastHTML += `
                    <div class="forecast-item">
                        <div class="icon-wrapper">
                            <img src="https://openweathermap.org/img/wn/${icon}.png" alt="">
                            <span>${temp}&deg;C</span>
                        </div>
                        <p>${date.getDate()} ${months[date.getMonth()]}</p>
                        <p>${days[date.getDay()]}</p>
                    </div>
                `;
            }
            
            safeUpdate(fiveDaysForecastCard, forecastHTML);
        })
        .catch((error) => {
            console.error('Failed to fetch weather forecast:', error);
            safeUpdate(fiveDaysForecastCard, '<p>Error loading forecast</p>');
        });
}

function getCityCoordinates() {
    let cityName = cityInput.value.trim();
    if (!cityName) {
        alert('Please enter a city name');
        return;
    }

    let GEOCODING_API_URL = `https://api.openweathermap.org/geo/1.0/direct?q=${cityName}&limit=1&appid=${api_key}`;

    fetch(GEOCODING_API_URL)
        .then(res => {
            if (!res.ok) {
                throw new Error('Geocoding API response not OK');
            }
            return res.json();
        })
        .then(data => {
            if (!data || data.length === 0) {
                alert(`No results found for "${cityName}"`);
                return;
            }
            let { name, lat, lon, country, state } = data[0];
            getWeatherDetails(name, lat, lon, country, state);
        })
        .catch((error) => {
            console.error(`Failed to fetch coordinates of ${cityName}:`, error);
            alert(`Failed to fetch coordinates of "${cityName}". Please check your internet connection.`);
        });
}

function getUserCoordinates(){
    navigator.geolocation.getCurrentPosition(position =>{
       let {latitude,longitude}=position.coords;
       let REVERSE_GEOCODING_URL = `https://api.openweathermap.org/geo/1.0/reverse?lat=${latitude}&lon=${longitude}&limit=1&appid=${api_key}`;
       fetch(REVERSE_GEOCODING_URL).then(res =>res.json()).then(data =>{
        let {name,country,state}=data[0];
        getWeatherDetails(name,latitude,longitude,country,state);
       }).catch(()=>{
        alert("Failed to Fetch User Coordinates..")
       })
    })
}

searchBtn.addEventListener('click', getCityCoordinates);
locationBtn.addEventListener('click',getUserCoordinates);

// Allow searching by pressing Enter key
cityInput.addEventListener('keypress', function(e) {
    if (e.key === 'Enter') {
        getCityCoordinates();
    }
});

// Check if moment.js is available
if (typeof moment === 'undefined') {
    console.error('Moment.js is not loaded. Please include moment.js in your HTML');
}