Create script.js

static/script.js

@@ -0,0 +1,65 @@
+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));
+}