static/script.js

function fetchWeather() {
    const city = document.getElementById('city-input').value;
    const days = document.getElementById('forecast-days').value;

    fetch(`/weather?city=${encodeURIComponent(city)}&days=${days}`)
        .then(response => response.json())
        .then(data => {
            if (data.error) {
                document.getElementById('weather-summary').innerHTML = `<p>${data.error}</p>`;
                return;
            }

            // Update summary
            const summary = `
                <h3>Current Weather in ${city}</h3>
                <p>Temperature: ${data.current.temp}°C</p>
                <p>Condition: ${data.current.weather}</p>
                <p>Humidity: ${data.current.humidity}%</p>
                <p>Wind Speed: ${data.current.wind_speed} km/h</p>
            `;
            document.getElementById('weather-summary').innerHTML = summary;

            // Temperature Graph
            Plotly.newPlot('temperature-graph', [{
                x: data.forecast.map(d => d.date),
                y: data.forecast.map(d => d.temp),
                type: 'scatter',
                mode: 'lines+markers',
                name: 'Temperature'
            }], {
                title: 'Temperature Forecast',
                xaxis: { title: 'Date' },
                yaxis: { title: 'Temperature (°C)' },
                template: 'plotly_dark'
            });

            // Precipitation Graph
            Plotly.newPlot('precipitation-graph', [{
                x: data.forecast.map(d => d.date),
                y: data.forecast.map(d => d.precipitation),
                type: 'bar',
                name: 'Precipitation'
            }], {
                title: 'Precipitation Forecast',
                xaxis: { title: 'Date' },
                yaxis: { title: 'Precipitation (mm)' },
                template: 'plotly_dark'
            });

            // Wind Speed Graph
            Plotly.newPlot('wind-graph', [{
                x: data.forecast.map(d => d.date),
                y: data.forecast.map(d => d.wind_speed),
                type: 'scatter',
                mode: 'lines+markers',
                name: 'Wind Speed'
            }], {
                title: 'Wind Speed Forecast',
                xaxis: { title: 'Date' },
                yaxis: { title: 'Wind Speed (km/h)' },
                template: 'plotly_dark'
            });
        })
        .catch(error => console.error('Error:', error));
}