diff --git a/public/index.html b/public/index.html index 96ebaf5..26266ef 100644 --- a/public/index.html +++ b/public/index.html @@ -25,11 +25,11 @@ - + @@ -65,6 +65,29 @@

Weatherify ⛅

+ + +
+
+

Saved Cities

+

Quickly reopen favorite cities or recent searches.

+
+
+
+
Favorites
+
+
+ +
+
Recent
+
+
+ +
+ +
+
+
@@ -91,7 +114,12 @@

Welcome to Weatherify ⛅

-

City Name

+
+

City Name

+ +

Date

@@ -168,6 +196,26 @@

Sun Position

-- km
+ +
+ +
+ Air Quality (AQI) + + -- + -- + + Pollutants -- + Recommendation -- +
+
+
@@ -198,6 +246,7 @@

Sun Position

+
@@ -205,21 +254,37 @@

Sun Position

--
- - - +
+ +
+
+ Humidity & Precip (Next 24 Hours) + -- +
+ +
+ + +
+ +
+ +
+
+
-

5-Day Forecast

+

24-Hour Forecast

Upcoming weather trend will appear here.

- +
+
@@ -262,7 +327,7 @@
- + diff --git a/public/manifest.json b/public/manifest.json index 407ceb6..aa09cb0 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -12,6 +12,7 @@ "sizes": "192x192 512x512", "type": "image/svg+xml", "purpose": "any maskable" + } ] } diff --git a/public/script.js b/public/script.js index 8edd3c5..6cd5bcb 100644 --- a/public/script.js +++ b/public/script.js @@ -5,9 +5,142 @@ const DEGREE = '\u00B0'; const DEFAULT_CITY = 'New Delhi'; let currentUnit = 'C'; -let rawData = { current: null, forecast: null }; +let rawData = { current: null, forecast: null, airQuality: null }; + +// AQI UI elements +const aqiCard = document.getElementById('aqi-card'); +const aqiValueEl = document.getElementById('aqi-value'); +const aqiBadgeEl = document.getElementById('aqi-badge'); +const aqiPollutantsEl = document.getElementById('aqi-pollutants'); +const aqiRecommendationEl = document.getElementById('aqi-recommendation'); + +function getAqiCategory(aqi) { + const value = Number(aqi); + if (!Number.isFinite(value)) { + return { label: 'Unknown', level: 0, badgeClass: '' }; + } + + // OpenWeatherMap air pollution uses a 1-5 AQI index. + switch (value) { + case 1: + return { label: 'Good', level: 1, badgeClass: 'aqi-1' }; + case 2: + return { label: 'Fair', level: 2, badgeClass: 'aqi-2' }; + case 3: + return { label: 'Moderate', level: 3, badgeClass: 'aqi-3' }; + case 4: + return { label: 'Poor', level: 4, badgeClass: 'aqi-4' }; + case 5: + return { label: 'Very Poor', level: 5, badgeClass: 'aqi-5' }; + default: + if (value <= 50) return { label: 'Good', level: 1, badgeClass: 'aqi-1' }; + if (value <= 100) return { label: 'Fair', level: 2, badgeClass: 'aqi-2' }; + if (value <= 150) return { label: 'Moderate', level: 3, badgeClass: 'aqi-3' }; + if (value <= 200) return { label: 'Poor', level: 4, badgeClass: 'aqi-4' }; + return { label: 'Very Poor', level: 5, badgeClass: 'aqi-5' }; + } +} + +function getAqiHealthRecommendation(categoryLabel) { + switch (categoryLabel) { + case 'Good': + return 'Enjoy outdoor activities. Sensitive groups may still consider monitoring.'; + case 'Fair': + return 'Unusually sensitive individuals should reduce prolonged outdoor exertion.'; + case 'Moderate': + return 'Consider reducing prolonged outdoor activities if you experience symptoms.'; + case 'Poor': + return 'Limit outdoor activity; keep windows closed and consider an air purifier.'; + case 'Very Poor': + return 'Avoid outdoor activity. Stay indoors and follow local health guidance.'; + default: + return 'Air quality information is unavailable right now.'; + } +} + +function renderAqiUI(airPollution) { + console.log('[AQI] renderAqiUI called with:', airPollution); + + if (!airPollution) { + console.warn('[AQI] No airPollution data provided'); + if (aqiCard) aqiCard.classList.add('hidden'); + return; + } + + if (!Array.isArray(airPollution.list)) { + console.warn('[AQI] airPollution.list is not an array:', typeof airPollution.list, airPollution.list); + if (aqiCard) aqiCard.classList.add('hidden'); + return; + } + + if (airPollution.list.length === 0) { + console.warn('[AQI] airPollution.list is empty'); + if (aqiCard) aqiCard.classList.add('hidden'); + return; + } + + console.log('[AQI] Rendering AQI data'); + if (aqiCard) aqiCard.classList.remove('hidden'); + + const entry = airPollution.list[0]; + console.log('[AQI] Entry:', entry); + const aqi = entry?.main?.aqi; + const pollutants = entry?.components || {}; + console.log('[AQI] AQI value:', aqi, 'Pollutants:', pollutants); + + const { label, badgeClass } = getAqiCategory(aqi); + + if (aqiValueEl) aqiValueEl.textContent = Number.isFinite(Number(aqi)) ? String(aqi) : '--'; + + if (aqiBadgeEl) { + aqiBadgeEl.textContent = label; + aqiBadgeEl.classList.remove('aqi-1', 'aqi-2', 'aqi-3', 'aqi-4', 'aqi-5'); + if (badgeClass) aqiBadgeEl.classList.add(badgeClass); + } + + if (aqiPollutantsEl) { + // Show the most common pollutant components when available + // + const parts = []; + const pm25 = pollutants.pm2_5; + const pm10 = pollutants.pm10; + const o3 = pollutants.o3; + const no2 = pollutants.no2; + const so2 = pollutants.so2; + const co = pollutants.co; + + const add = (key, label) => { + const v = pollutants[key]; + if (v === undefined || v === null) return; + parts.push(`${label}: ${v}`); + }; + + add('pm2_5', 'PM2.5'); + add('pm10', 'PM10'); + add('o3', 'O₃'); + add('no2', 'NO₂'); + add('so2', 'SO₂'); + add('co', 'CO'); + + aqiPollutantsEl.textContent = parts.length ? `Pollutants ${parts.join(' • ')}` : 'Pollutants --'; + } + + if (aqiRecommendationEl) { + aqiRecommendationEl.textContent = `Recommendation: ${getAqiHealthRecommendation(label)}`; + } +} + +async function fetchAirQualityByCoords(lat, lon) { + const url = `${API_BASE}/air-quality?lat=${lat}&lon=${lon}`; + + const response = await fetch(url); + if (!response.ok) { + throw new Error(`Air quality fetch failed: ${response.status}`); + } + + return response.json(); +} -// Initialize unit display after DOM is ready function initUnitDisplay() { const unitElement = document.querySelector('.unit'); if (unitElement) { @@ -80,21 +213,268 @@ const sunMarker = document.getElementById('sun-marker'); const sunProgress = document.getElementById('sun-progress'); const solarNoon = document.getElementById('solar-noon'); const forecastContainer = document.getElementById('forecast-container'); -const forecastGraph = document.getElementById('forecast-graph'); +const temperatureChartCanvas = document.getElementById('temperature-chart'); const forecastSummary = document.getElementById('forecast-summary'); const graphRange = document.getElementById('graph-range'); + +const humidityPrecipChartCanvas = document.getElementById('humidity-precip-chart'); +const humidityPrecipRange = document.getElementById('humidity-precip-range'); +const hourlyMetricControls = document.querySelectorAll('.hourly-toggle'); +let selectedHourlyMetric = 'humidity'; + const trendsSummary = document.getElementById('trends-summary'); const trendChart = document.getElementById('trend-chart'); const trendStats = document.getElementById('trend-stats'); const trendChartLabel = document.getElementById('trend-chart-label'); const trendChartRange = document.getElementById('trend-chart-range'); const trendControls = document.querySelector('.trend-controls'); + +const historyDropdown = document.getElementById('history-dropdown'); +const favoriteList = document.getElementById('favorite-list'); +const recentList = document.getElementById('recent-list'); +const clearHistoryBtn = document.getElementById('clear-history-btn'); +const favoriteToggleBtn = document.getElementById('favorite-btn'); + +const STORAGE_RECENT = 'weatherify-recent-cities'; +const STORAGE_FAVORITES = 'weatherify-favorite-cities'; +const MAX_RECENT_SEARCHES = 8; + let sunTimeline = null; let dailyTrendData = []; let selectedTrendMetric = 'avg'; +let currentCityQuery = ''; +let currentCityLabel = ''; +let recentSearches = []; +let favoriteCities = []; + +function normalizeCityKey(city) { + return city.trim().toLowerCase(); +} + +function loadHistoryArray(key) { + try { + const stored = localStorage.getItem(key); + const parsed = stored ? JSON.parse(stored) : []; + return Array.isArray(parsed) ? parsed : []; + } catch { + return []; + } +} + +function saveHistoryArray(key, entries) { + localStorage.setItem(key, JSON.stringify(entries)); +} + +function renderHistory() { + if (!historyDropdown) return; + + const favoriteMarkup = favoriteCities.map((item) => ` + + `).join(''); + + const recentMarkup = recentSearches.map((item) => ` + + `).join(''); + + const hasHistory = favoriteCities.length > 0 || recentSearches.length > 0; + const emptyState = !hasHistory ? ` +
+

No recent searches yet.

+ Search a city and it will appear here for quick access. +
+ ` : ''; + + const inner = historyDropdown.querySelector('.history-dropdown-inner'); + if (inner) { + inner.innerHTML = ` +
+
Favorites
+
${favoriteMarkup}
+
+
+
Recent
+
${recentMarkup}
+
+ ${emptyState} +
+ +
+ `; + } + + const newFavoriteList = document.getElementById('favorite-list'); + const newRecentList = document.getElementById('recent-list'); + const newClearHistoryBtn = document.getElementById('clear-history-btn'); + + if (newFavoriteList) { + newFavoriteList.addEventListener('click', handleHistoryClick); + } + if (newRecentList) { + newRecentList.addEventListener('click', handleHistoryClick); + } + if (newClearHistoryBtn) { + newClearHistoryBtn.addEventListener('click', (event) => { + event.stopPropagation(); + clearRecentHistory(); + }); + } +} + +function updateFavoriteButton() { + if (!favoriteToggleBtn) return; + + const active = favoriteCities.some((item) => normalizeCityKey(item.query) === normalizeCityKey(currentCityQuery)); + const icon = favoriteToggleBtn.querySelector('.favorite-icon'); + favoriteToggleBtn.setAttribute('aria-pressed', String(active)); + if (icon) icon.textContent = active ? '★' : '☆'; + favoriteToggleBtn.title = active ? 'Remove favorite' : 'Favorite'; +} + +function createCityEntry(data) { + const label = `${data.name}, ${data.sys.country}`; + const query = `${data.name},${data.sys.country}`; + return { query, label }; +} + +function addRecentSearch(entry) { + if (!entry || !entry.query) return; + + const normalized = normalizeCityKey(entry.query); + recentSearches = recentSearches.filter((item) => normalizeCityKey(item.query) !== normalized); + recentSearches.unshift(entry); + + if (recentSearches.length > MAX_RECENT_SEARCHES) { + recentSearches = recentSearches.slice(0, MAX_RECENT_SEARCHES); + } + + saveHistoryArray(STORAGE_RECENT, recentSearches); + renderHistory(); +} + +function toggleFavoriteCity(entry) { + if (!entry || !entry.query) return; + + const normalized = normalizeCityKey(entry.query); + const existingIndex = favoriteCities.findIndex((item) => normalizeCityKey(item.query) === normalized); + + if (existingIndex >= 0) { + favoriteCities.splice(existingIndex, 1); + } else { + favoriteCities.unshift(entry); + } + + saveHistoryArray(STORAGE_FAVORITES, favoriteCities); + updateFavoriteButton(); + renderHistory(); +} + +function clearRecentHistory() { + recentSearches = []; + saveHistoryArray(STORAGE_RECENT, recentSearches); + renderHistory(); +} + +function handleHistoryClick(event) { + const button = event.target.closest('button.history-button'); + if (!button) return; + + const query = button.dataset.query; + if (!query) return; + + cityInput.value = query.replace(/,([A-Z]{2})$/, ', $1'); + clearBtn.classList.remove('hidden'); + cityInput.dispatchEvent(new Event('input', { bubbles: true })); + hideSuggestions(); + closeHistoryDropdown(); + fetchWeatherData(query); +} + +function openHistoryDropdown() { + if (!historyDropdown) return; + // Only show if user isn't typing and there is something to show + const hasAny = (favoriteCities && favoriteCities.length) || (recentSearches && recentSearches.length); + if (!hasAny) return; + historyDropdown.classList.remove('hidden'); +} + +function closeHistoryDropdown() { + if (!historyDropdown) return; + historyDropdown.classList.add('hidden'); +} + +function initHistory() { + recentSearches = loadHistoryArray(STORAGE_RECENT); + favoriteCities = loadHistoryArray(STORAGE_FAVORITES); + renderHistory(); + + if (cityInput) { + cityInput.addEventListener('focus', () => { + if (!cityInput.value.trim()) { + openHistoryDropdown(); + } + }); + + cityInput.addEventListener('input', () => { + if (!cityInput.value.trim()) { + if (favoriteCities.length || recentSearches.length) { + openHistoryDropdown(); + } + } else { + closeHistoryDropdown(); + } + }); + } + + + if (historyDropdown) { + historyDropdown.addEventListener('click', handleHistoryClick); + } + + if (clearHistoryBtn) { + clearHistoryBtn.classList.toggle('hidden', recentSearches.length === 0); + } + + if (favoriteToggleBtn) { + favoriteToggleBtn.addEventListener('click', () => { + if (!currentCityQuery || !currentCityLabel) return; + toggleFavoriteCity({ query: currentCityQuery, label: currentCityLabel }); + }); + } +} + + +function setCurrentCity(data) { + currentCityLabel = `${data.name}, ${data.sys.country}`; + currentCityQuery = `${data.name},${data.sys.country}`; + updateFavoriteButton(); + + // Record as recent search (prevent duplicates via addRecentSearch) + addRecentSearch({ query: currentCityQuery, label: currentCityLabel }); +} + + +// Hourly metric toggle +hourlyMetricControls.forEach((btn) => { + btn.addEventListener('click', () => { + selectedHourlyMetric = btn.dataset.hourlyMetric; + hourlyMetricControls.forEach((b) => b.classList.toggle('active', b === btn)); + if (rawData.forecast) { + const hoursAhead = 24; + const hourlyPoints = buildHourlyPoints(rawData.forecast.list, rawData.forecast.city?.timezone || 0, hoursAhead); + renderHumidityPrecipChart(hourlyPoints); + } + }); +}); + // Unit toggle document.querySelectorAll('.unit-btn').forEach(btn => { + btn.addEventListener('click', () => { currentUnit = btn.dataset.unit; document.querySelectorAll('.unit-btn').forEach(b => b.classList.remove('active')); @@ -148,11 +528,14 @@ clearBtn.addEventListener('click', (e) => { cityInput.focus(); }); -// Hide suggestions when clicking outside +// Hide suggestions and history when clicking outside search controls document.addEventListener('click', (e) => { if (!e.target.closest('.search-box')) { hideSuggestions(); } + if (!e.target.closest('.search-container')) { + closeHistoryDropdown(); + } }); if (trendControls) { @@ -217,7 +600,8 @@ window.addEventListener('DOMContentLoaded', () => { console.error('Service Worker registration failed:', err); }); } - showNoDataMessage(); + initHistory(); + fetchWeatherData(DEFAULT_CITY); }); function handleSearch() { @@ -319,10 +703,30 @@ async function fetchWeatherByCoords(lat, lon) { rawData.current = currentData; rawData.forecast = forecastData; + + // Fetch AQI using resolved coordinates when available + if (currentData?.coord?.lat !== undefined && currentData?.coord?.lon !== undefined) { + try { + console.log('[AQI] Fetching AQI for coordinates:', currentData.coord.lat, currentData.coord.lon); + const airQuality = await fetchAirQualityByCoords(currentData.coord.lat, currentData.coord.lon); + rawData.airQuality = airQuality; + console.log('[AQI] Rendering AQI UI after fetch'); + renderAqiUI(airQuality); + } catch (error) { + console.error('[AQI] Error fetching/rendering AQI:', error); + rawData.airQuality = null; + if (aqiCard) aqiCard.classList.add('hidden'); + } + } else { + console.warn('[AQI] No coordinates available for AQI fetch'); + } + localStorage.setItem('weatherify-last-data', JSON.stringify(rawData)); updateUI(currentData); updateForecastUI(forecastData); showWeather(); + setCurrentCity(currentData); + } catch (error) { if (!navigator.onLine) { const cachedData = localStorage.getItem('weatherify-last-data'); @@ -343,6 +747,9 @@ async function fetchWeatherByCoords(lat, lon) { } } async function fetchWeatherData(city) { + // reset AQI section while fetching new data + if (aqiCard) aqiCard.classList.add('hidden'); + showLoading(); hideError(); // hideWeather(); @@ -371,10 +778,23 @@ async function fetchWeatherData(city) { rawData.current = currentData; rawData.forecast = forecastData; + + if (currentData?.coord?.lat !== undefined && currentData?.coord?.lon !== undefined) { + try { + const airQuality = await fetchAirQualityByCoords(currentData.coord.lat, currentData.coord.lon); + rawData.airQuality = airQuality; + renderAqiUI(airQuality); + } catch { + rawData.airQuality = null; + if (aqiCard) aqiCard.classList.add('hidden'); + } + } + localStorage.setItem('weatherify-last-data', JSON.stringify(rawData)); updateUI(currentData); updateForecastUI(forecastData); showWeather(); + setCurrentCity(currentData); } catch (error) { console.error('Fetch error:', error); if (!navigator.onLine) { @@ -428,48 +848,39 @@ function updateForecastUI(forecastData) { return; } - const chartData = forecastData.list.slice(0, 8); + const hourlyData = forecastData.list.slice(0, 8); // Next 24 hours (8 * 3 hours) dailyTrendData = buildDailyTrendData(forecastData.list, forecastData.city?.timezone || 0); - const dailyData = []; - const seenDates = new Set(); - - for (const item of forecastData.list) { - const date = new Date(item.dt * 1000); - const dateKey = date.toLocaleDateString('en-CA'); - const hour = date.getHours(); - - if (!seenDates.has(dateKey) && hour >= 11 && hour <= 14) { - seenDates.add(dateKey); - dailyData.push(item); - } - - if (dailyData.length >= 5) break; - } forecastContainer.innerHTML = ''; - dailyData.forEach((day) => { - const date = new Date(day.dt * 1000); - const dayName = date.toLocaleDateString('en-US', { weekday: 'short' }); - const iconCode = day.weather[0].icon; - const description = day.weather[0].description; + hourlyData.forEach((hour) => { + const date = new Date(hour.dt * 1000); + const timeString = date.toLocaleTimeString('en-US', { hour: 'numeric', hour12: true }); + const iconCode = hour.weather[0].icon; + const description = hour.weather[0].description; const card = document.createElement('div'); card.className = 'forecast-card'; card.innerHTML = ` -
${dayName}
+
${timeString}
${description}
-
${toUnit(day.main.temp)}
+
${toUnit(hour.main.temp)}
${description}
`; forecastContainer.appendChild(card); }); - updateForecastSummary(chartData); - renderForecastGraph(chartData); + updateForecastSummary(hourlyData); + renderTemperatureChart(hourlyData); + + // Hourly humidity/precip chart + const hoursAhead = 24; + const hourlyPoints = buildHourlyPoints(forecastData.list, forecastData.city?.timezone || 0, hoursAhead); + renderHumidityPrecipChart(hourlyPoints); + updateWeatherTrends(dailyTrendData); } @@ -830,66 +1241,161 @@ function formatDuration(seconds) { return `${hours}h ${minutes}m`; } -function renderForecastGraph(chartData) { - if (!forecastGraph) return; +function renderTemperatureChart(hourlyData) { + if (!temperatureChartCanvas) return; - if (!chartData.length) { - forecastGraph.innerHTML = ''; + if (!hourlyData.length) { + // Clear chart if no data + if (window.temperatureChart) { + window.temperatureChart.destroy(); + } return; } - const width = 640; - const height = 240; - const padding = { top: 24, right: 20, bottom: 42, left: 20 }; - const innerWidth = width - padding.left - padding.right; - const innerHeight = height - padding.top - padding.bottom; - const temps = chartData.map((item) => toUnitNum(item.main.temp)); - const minTemp = Math.min(...temps); - const maxTemp = Math.max(...temps); - const range = Math.max(maxTemp - minTemp, 1); + const labels = hourlyData.map(item => { + const date = new Date(item.dt * 1000); + return date.toLocaleTimeString('en-US', { hour: 'numeric', hour12: true }); + }); + + const temperatures = hourlyData.map(item => toUnitNum(item.main.temp)); + + const data = { + labels: labels, + datasets: [{ + label: `Temperature (${unitLabel()})`, + data: temperatures, + borderColor: 'rgba(75, 192, 192, 1)', + backgroundColor: 'rgba(75, 192, 192, 0.2)', + fill: true, + tension: 0.4 + }] + }; + + const config = { + type: 'line', + data: data, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false + } + }, + scales: { + y: { + beginAtZero: false, + ticks: { + callback: function(value) { + return value + (currentUnit === 'K' ? 'K' : DEGREE); + } + } + } + } + } + }; + + if (window.temperatureChart) { + window.temperatureChart.destroy(); + } + window.temperatureChart = new Chart(temperatureChartCanvas, config); +} - const points = chartData.map((item, index) => { - const convertedTemp = toUnitNum(item.main.temp); - const x = padding.left + (index * innerWidth) / Math.max(chartData.length - 1, 1); - const y = padding.top + ((maxTemp - convertedTemp) / range) * innerHeight; +function buildHourlyPoints(forecastList, timezoneOffsetSeconds, hoursAhead) { + if (!Array.isArray(forecastList) || forecastList.length === 0) return []; + const nowSeconds = Math.floor(Date.now() / 1000); + const endSeconds = nowSeconds + hoursAhead * 60 * 60; + + // OpenWeather dt is in UTC seconds. + const points = forecastList + .slice() + .sort((a, b) => a.dt - b.dt) + .filter((item) => item?.dt >= nowSeconds - 3600 && item?.dt <= endSeconds); + + // Keep it compact (3-hour steps => ~8 points for 24h) + return points.slice(0, 10).map((item) => { + const localDate = getShiftedDate(item.dt, timezoneOffsetSeconds); return { - x, - y, - temp: convertedTemp, - label: new Date(item.dt * 1000).toLocaleTimeString('en-US', { - hour: 'numeric' - }) + raw: item, + dt: item.dt, + timeLabel: localDate.toLocaleTimeString('en-US', { hour: 'numeric' }), + humidity: item.main?.humidity ?? null, + precipProb: item.pop ?? null, + precipAmount: item.rain?.['3h'] ?? null }; }); +} + +function renderHumidityPrecipChart(hourlyPoints) { + if (!humidityPrecipChartCanvas || !humidityPrecipRange) return; + + if (!hourlyPoints || hourlyPoints.length === 0) { + if (window.humidityPrecipChart) { + window.humidityPrecipChart.destroy(); + } + humidityPrecipRange.textContent = '--'; + return; + } + + const metric = selectedHourlyMetric; + const labels = hourlyPoints.map(p => p.timeLabel); + const values = hourlyPoints.map(p => { + if (metric === 'humidity') { + return p.humidity || 0; + } + return (p.precipProb || 0) * 100; + }); - const polylinePoints = points.map((point) => `${point.x},${point.y}`).join(' '); - const areaPoints = [ - `${points[0].x},${height - padding.bottom}`, - ...points.map((point) => `${point.x},${point.y}`), - `${points[points.length - 1].x},${height - padding.bottom}` - ].join(' '); + const data = { + labels: labels, + datasets: [{ + label: metric === 'humidity' ? 'Humidity (%)' : 'Precipitation Probability (%)', + data: values, + borderColor: metric === 'humidity' ? 'rgba(54, 162, 235, 1)' : 'rgba(255, 99, 132, 1)', + backgroundColor: metric === 'humidity' ? 'rgba(54, 162, 235, 0.2)' : 'rgba(255, 99, 132, 0.2)', + fill: true, + tension: 0.4 + }] + }; - const yGuides = [0, 0.5, 1].map((step) => { - const y = padding.top + innerHeight * step; - return ``; - }).join(''); + const config = { + type: 'line', + data: data, + options: { + responsive: true, + maintainAspectRatio: false, + plugins: { + legend: { + display: false + } + }, + scales: { + y: { + beginAtZero: true, + max: metric === 'humidity' ? 100 : 100, + ticks: { + callback: function(value) { + return value + '%'; + } + } + } + } + } + }; - const labels = points.map((point) => ` - - - ${point.temp}${currentUnit === 'K' ? 'K' : DEGREE} - ${point.label} - - `).join(''); + if (window.humidityPrecipChart) { + window.humidityPrecipChart.destroy(); + } + window.humidityPrecipChart = new Chart(humidityPrecipChartCanvas, config); - forecastGraph.innerHTML = ` - ${yGuides} - - - ${labels} - `; + // Update range label + const minV = Math.min(...values); + const maxV = Math.max(...values); + const suffix = metric === 'humidity' ? 'Humidity %' : 'Precip Probability %'; + humidityPrecipRange.textContent = `${minV}% - ${maxV}% (${suffix})`; } + function getWindDirection(deg) { if (deg === undefined || deg === null) return ''; const directions = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW']; diff --git a/public/style.css b/public/style.css index a869734..f0c35a7 100644 --- a/public/style.css +++ b/public/style.css @@ -158,6 +158,7 @@ h1 { width: 100%; max-width: none; margin-left: 0; + position: relative; } .theme-toggle { @@ -278,6 +279,167 @@ h1 { transition: background 0.4s ease; } +.history-dropdown { + position: static; + margin-top: 18px; + background: #eef2ff; + border: 1px solid #c7d2fe; + border-radius: 22px; + box-shadow: 0 24px 60px rgba(15, 23, 42, 0.12); + padding: 20px; + width: 100%; + overflow: hidden; + animation: none; +} + +.history-dropdown.hidden { + display: none; +} + +.history-panel-header { + margin-bottom: 16px; + padding-bottom: 8px; + border-bottom: 1px solid rgba(99, 102, 241, 0.15); +} + +.history-panel-header h2 { + margin: 0; + font-size: 1.2rem; + font-weight: 700; + color: #1e293b; +} + +.history-panel-header p { + margin: 8px 0 0; + color: #475569; + font-size: 0.95rem; + line-height: 1.45; +} + +.history-empty { + padding: 18px; + border-radius: 16px; + background: #f8fafc; + color: #475569; + border: 1px dashed #cbd5e0; + text-align: center; +} + +.history-empty p { + font-weight: 600; + margin-bottom: 6px; +} + +.history-empty small { + color: #64748b; +} + +.history-actions { + display: flex; + justify-content: flex-end; + padding-top: 8px; +} + +.history-toggle-btn { + border: none; + background: #eef2ff; + color: #4f46e5; + border-radius: 14px; + padding: 0 14px; + min-width: 48px; + height: 48px; + cursor: pointer; + display: inline-flex; + align-items: center; + justify-content: center; + transition: background 0.2s ease, transform 0.2s ease; +} + +.history-toggle-btn:hover { + background: #e0e7ff; + transform: translateY(-1px); +} + +.history-dropdown-inner { + display: grid; + gap: 14px; +} + +.history-section { + display: grid; + gap: 10px; +} + +.history-section-title { + font-size: 0.9rem; + font-weight: 700; + color: #334155; +} + +.history-list { + display: grid; + gap: 8px; + max-height: 160px; + overflow-y: auto; + padding-right: 4px; +} + +.history-button { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + gap: 10px; + padding: 12px 14px; + border-radius: 14px; + border: 1px solid #e2e8f0; + background: #f8fafc; + color: #0f172a; + font-size: 0.95rem; + text-align: left; + cursor: pointer; + transition: background 0.2s ease, transform 0.2s ease; +} + +.history-button:hover { + transform: translateX(2px); + background: #e2e8f0; +} + +.history-badge { + font-size: 0.9rem; + color: #ca8a04; +} + +.clear-history-btn { + width: fit-content; + border: 1px solid #cbd5e0; + background: #ffffff; + color: #475569; + border-radius: 12px; + padding: 10px 16px; + cursor: pointer; + transition: background 0.2s ease, color 0.2s ease; +} + +.clear-history-btn:hover { + background: #f8fafc; +} + +.favorite-btn { + border: none; + background: transparent; + color: #f59e0b; + font-size: 1.6rem; + line-height: 1; + cursor: pointer; + transition: transform 0.2s ease; +} + +.favorite-btn:hover { + transform: scale(1.1); +} + .suggestion-item { padding: 14px 20px; cursor: pointer; @@ -564,6 +726,57 @@ h1 { text-align: center; } +.aqi-value { + font-size: 1.2rem; + font-weight: 800; + color: #1f2937; +} + +.aqi-badge { + display: inline-flex; + align-items: center; + justify-content: center; + padding: 5px 12px; + border-radius: 999px; + color: #ffffff; + font-size: 11px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 0.08em; + white-space: nowrap; +} + +.aqi-1 { + background: #16a34a; +} + +.aqi-2 { + background: #fbbf24; + color: #1f2937; +} + +.aqi-3 { + background: #f97316; +} + +.aqi-4 { + background: #dc2626; +} + +.aqi-5 { + background: #9333ea; +} + +.aqi-pollutants, +.aqi-recommendation { + display: block; + font-size: 12px; + line-height: 1.5; + color: #475569; + margin-top: 8px; + text-align: center; +} + .detail-label { font-size: 11px; color: #718096; @@ -588,6 +801,47 @@ h1 { gap: 18px; } +.hourly-toggle-row { + display: flex; + gap: 8px; + margin: 0 0 12px 0; + flex-wrap: wrap; +} + +.hourly-toggle { + border: none; + border-radius: 12px; + padding: 9px 14px; + background: #edf2f7; + color: #718096; + cursor: pointer; + font: inherit; + font-size: 13px; + font-weight: 700; + transition: all 0.2s ease; +} + +.hourly-toggle:hover { + color: #4c51bf; + background: rgba(255, 255, 255, 0.72); +} + +.hourly-toggle.active { + color: white; + background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); + box-shadow: 0 6px 18px rgba(102, 126, 234, 0.25); +} + +body.dark-mode .hourly-toggle { + background: rgba(30, 41, 59, 0.9); + color: #94a3b8; +} + +body.dark-mode .hourly-toggle.active { + color: white; +} + + .forecast-title { font-size: 24px; font-weight: 700; @@ -634,10 +888,9 @@ h1 { height: 240px; } -#forecast-graph { +#temperature-chart { width: 100%; height: 100%; - overflow: visible; } .graph-grid-line { @@ -998,6 +1251,7 @@ h1 { @keyframes popIn { 0% { opacity: 0; transform: scale(0); } 100% { opacity: 1; transform: scale(1); } + } @keyframes drawLine { diff --git a/public/sw.js b/public/sw.js index d8630b7..6fcf8ac 100644 --- a/public/sw.js +++ b/public/sw.js @@ -15,6 +15,7 @@ self.addEventListener('install', (event) => { caches.open(CACHE_NAME) .then((cache) => cache.addAll(ASSETS_TO_CACHE)) .then(() => self.skipWaiting()) + ); }); diff --git a/server.js b/server.js index 3a623f3..754e4da 100644 --- a/server.js +++ b/server.js @@ -13,6 +13,7 @@ const app = express(); * Rate limiter — 100 requests per 15 minutes per IP. * Applied to all /api/ routes to protect the OpenWeatherMap API key * from exhaustion by malicious actors or rogue scripts. + * ***** */ const apiLimiter = rateLimit({ windowMs: 15 * 60 * 1000, // 15 minutes @@ -68,6 +69,8 @@ async function proxyOpenWeather(basePath, req, res) { app.get('/api/weather', (req, res) => proxyOpenWeather('/data/2.5/weather', req, res)); app.get('/api/forecast', (req, res) => proxyOpenWeather('/data/2.5/forecast', req, res)); app.get('/api/geo', (req, res) => proxyOpenWeather('/geo/1.0/direct', req, res)); +app.get('/api/air-quality', (req, res) => proxyOpenWeather('/data/2.5/air_pollution', req, res)); + app.use(express.static(path.join(__dirname, 'public')));