From ec1cca2e027b543ab662591e3050754aa1c753b6 Mon Sep 17 00:00:00 2001
From: Aishwarya <aishwaryaanekar3775@gmail.com>
Date: Wed, 13 May 2026 23:10:37 +0530
Subject: [PATCH 01/13] Add Air Quality Index (AQI) support with health
 indicators

---
 public/index.html |  50 +++++-
 public/script.js  | 403 +++++++++++++++++++++++++++++++++++++++++++++-
 public/style.css  | 213 ++++++++++++++++++++++++
 server.js         |   2 +
 4 files changed, 664 insertions(+), 4 deletions(-)

diff --git a/public/index.html b/public/index.html
index c246fb1..b89dd83 100644
--- a/public/index.html
+++ b/public/index.html
@@ -64,6 +64,28 @@ <h1>Weatherify ⛅</h1>
                     <div id="error-message" class="hidden text-red-500 text-sm mt-2">
                         <p>City not found. Please check spelling and try again.</p>
                     </div>
+
+                    <div id="history-dropdown" class="history-dropdown" aria-label="Recent searches and favorites">
+                        <div class="history-panel-header">
+                            <h2>Saved Cities</h2>
+                            <p>Quickly reopen favorite cities or recent searches.</p>
+                        </div>
+                        <div class="history-dropdown-inner">
+                            <div class="history-section">
+                                <div class="history-section-title">Favorites</div>
+                                <div id="favorite-list" class="history-list"></div>
+                            </div>
+
+                            <div class="history-section">
+                                <div class="history-section-title">Recent</div>
+                                <div id="recent-list" class="history-list"></div>
+                            </div>
+
+                            <div class="history-actions">
+                                <button id="clear-history-btn" type="button" class="clear-history-btn hidden">Clear history</button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
             </header>
 
@@ -72,7 +94,12 @@ <h1>Weatherify ⛅</h1>
                 <div class="weather-main">
                     <div class="temperature-section">
                         <div class="location-info">
-                            <h2 id="city-name">City Name</h2>
+                            <div class="city-header-row">
+                                <h2 id="city-name">City Name</h2>
+                                <button id="favorite-btn" class="favorite-btn" type="button" aria-label="Toggle favorite" aria-pressed="false" title="Favorite">
+                                    <span class="favorite-icon" aria-hidden="true">☆</span>
+                                </button>
+                            </div>
                             <p id="date">Date</p>
                         </div>
                         <div class="weather-icon" id="weather-icon"></div>
@@ -149,6 +176,26 @@ <h3>Sun Position</h3>
                             <span class="detail-value" id="visibility">-- km</span>
                         </div>
                     </div>
+
+                    <div class="detail-card" id="aqi-card">
+                        <div class="detail-icon" aria-hidden="true">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M21 16V8a2 2 0 0 0-1-1.73L12 2 4 6.27A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73L12 22l8-4.27a2 2 0 0 0 1-1.73Z"></path>
+                                <path d="M12 22V12"></path>
+                                <path d="M21 8l-9 4-9-4"></path>
+                            </svg>
+                        </div>
+                        <div class="detail-info">
+                            <span class="detail-label">Air Quality (AQI)</span>
+                            <span class="detail-value" style="display:flex; align-items:center; gap:10px;">
+                                <span class="aqi-value" id="aqi-value">--</span>
+                                <span class="aqi-badge" id="aqi-badge">--</span>
+                            </span>
+                            <span class="aqi-pollutants" id="aqi-pollutants">Pollutants --</span>
+                            <span class="aqi-recommendation" id="aqi-recommendation">Recommendation --</span>
+                        </div>
+                    </div>
+
                     <div class="detail-card">
                         <div class="detail-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="9" x2="12" y2="2"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line></svg>
@@ -179,6 +226,7 @@ <h3>Sun Position</h3>
 
                 </div>
 
+
                 <div class="forecast-section">
                     <div class="forecast-graph-card">
                         <div class="graph-header">
diff --git a/public/script.js b/public/script.js
index f0cc7d7..eaee046 100644
--- a/public/script.js
+++ b/public/script.js
@@ -5,9 +5,141 @@ 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) {
@@ -88,9 +220,234 @@ 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) => `
+        <button type="button" class="history-button favorite-entry" data-query="${item.query}">
+            <span>${item.label}</span>
+            <span class="history-badge">★</span>
+        </button>
+    `).join('');
+
+    const recentMarkup = recentSearches.map((item) => `
+        <button type="button" class="history-button recent-entry" data-query="${item.query}">
+            <span>${item.label}</span>
+        </button>
+    `).join('');
+
+    const hasHistory = favoriteCities.length > 0 || recentSearches.length > 0;
+    const emptyState = !hasHistory ? `
+        <div class="history-empty">
+            <p>No recent searches yet.</p>
+            <small>Search a city and it will appear here for quick access.</small>
+        </div>
+    ` : '';
+
+    const inner = historyDropdown.querySelector('.history-dropdown-inner');
+    if (inner) {
+        inner.innerHTML = `
+            <div class="history-section">
+                <div class="history-section-title">Favorites</div>
+                <div id="favorite-list" class="history-list">${favoriteMarkup}</div>
+            </div>
+            <div class="history-section">
+                <div class="history-section-title">Recent</div>
+                <div id="recent-list" class="history-list">${recentMarkup}</div>
+            </div>
+            ${emptyState}
+            <div class="history-actions">
+                <button id="clear-history-btn" type="button" class="clear-history-btn ${recentSearches.length === 0 ? 'hidden' : ''}">Clear history</button>
+            </div>
+        `;
+    }
+
+    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 });
+}
+
 
 // Unit toggle
 document.querySelectorAll('.unit-btn').forEach(btn => {
@@ -147,11 +504,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) {
@@ -216,6 +576,7 @@ window.addEventListener('DOMContentLoaded', () => {
             console.error('Service Worker registration failed:', err);
         });
     }
+    initHistory();
     fetchWeatherData(DEFAULT_CITY);
 });
 
@@ -318,10 +679,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');
@@ -342,6 +723,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();
@@ -370,10 +754,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) {
diff --git a/public/style.css b/public/style.css
index a869734..385c8bc 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;
diff --git a/server.js b/server.js
index 3a623f3..e82476c 100644
--- a/server.js
+++ b/server.js
@@ -68,6 +68,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')));
 

From 1af94ac19b0039b3d134103ef7bac5ae0c5be11e Mon Sep 17 00:00:00 2001
From: Aishwarya <aishwaryaanekar3775@gmail.com>
Date: Wed, 13 May 2026 23:21:51 +0530
Subject: [PATCH 02/13] Add favorite cities and recent searches support

---
 public/index.html    | 1 +
 public/manifest.json | 1 +
 public/script.js     | 1 +
 public/style.css     | 1 +
 public/sw.js         | 1 +
 server.js            | 1 +
 6 files changed, 6 insertions(+)

diff --git a/public/index.html b/public/index.html
index b89dd83..17e2174 100644
--- a/public/index.html
+++ b/public/index.html
@@ -64,6 +64,7 @@ <h1>Weatherify ⛅</h1>
                     <div id="error-message" class="hidden text-red-500 text-sm mt-2">
                         <p>City not found. Please check spelling and try again.</p>
                     </div>
+                    
 
                     <div id="history-dropdown" class="history-dropdown" aria-label="Recent searches and favorites">
                         <div class="history-panel-header">
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 eaee046..9d783bb 100644
--- a/public/script.js
+++ b/public/script.js
@@ -100,6 +100,7 @@ function renderAqiUI(airPollution) {
 
     if (aqiPollutantsEl) {
         // Show the most common pollutant components when available
+        //
         const parts = [];
         const pm25 = pollutants.pm2_5;
         const pm10 = pollutants.pm10;
diff --git a/public/style.css b/public/style.css
index 385c8bc..77f274e 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1211,6 +1211,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 e82476c..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

From 309e7f907fb38e091fb1b64abe51ebca0daaf88c Mon Sep 17 00:00:00 2001
From: Muskankr <mkr803967@gmail.com>
Date: Wed, 13 May 2026 23:23:45 +0530
Subject: [PATCH 03/13] B fix: improve weather dashboard validation and graph
 readability

---
 public/script.js | 41 +++++++++++++++++++++++++++++++++++++----
 public/style.css | 35 ++++++++++++++++++++++++++---------
 2 files changed, 63 insertions(+), 13 deletions(-)

diff --git a/public/script.js b/public/script.js
index 5bc19a6..d267972 100644
--- a/public/script.js
+++ b/public/script.js
@@ -79,6 +79,11 @@ let sunTimeline = null;
 let dailyTrendData = [];
 let selectedTrendMetric = 'avg';
 
+function isValidCity(city) {
+    const cityRegex = /^[A-Za-z\s\-'.]{2,}$/;
+    return cityRegex.test(city.trim());
+}
+
 // Unit toggle
 document.querySelectorAll('.unit-btn').forEach(btn => {
     btn.addEventListener('click', () => {
@@ -95,7 +100,7 @@ document.querySelectorAll('.unit-btn').forEach(btn => {
 // Event Listeners
 searchBtn.addEventListener('click', handleSearch);
 cityInput.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' && !searchBtn.disabled) {
         hideSuggestions();
         handleSearch();
     }
@@ -105,11 +110,32 @@ cityInput.addEventListener('keypress', (e) => {
 let debounceTimer;
 cityInput.addEventListener('input', (e) => {
     hideError();
+
     const query = e.target.value.trim();
-    searchBtn.disabled = query.length === 0;
 
     clearTimeout(debounceTimer);
 
+    // Empty input
+    if (query.length === 0) {
+        searchBtn.disabled = true;
+        cityInput.classList.remove('input-error');
+        hideSuggestions();
+        return;
+    }
+
+    // Invalid city input
+    if (!isValidCity(query)) {
+        searchBtn.disabled = true;
+        cityInput.classList.add('input-error');
+        showError('Please enter a valid city name.');
+        hideSuggestions();
+        return;
+    }
+
+    // Valid input
+    cityInput.classList.remove('input-error');
+    searchBtn.disabled = false;
+
     if (query.length < 2) {
         hideSuggestions();
         return;
@@ -191,10 +217,17 @@ window.addEventListener('DOMContentLoaded', () => {
 
 function handleSearch() {
     const city = cityInput.value.trim();
-    if (city) {
-        fetchWeatherData(city);
+
+    if (!isValidCity(city)) {
+        cityInput.classList.add('input-error');
+        showError('Please enter a valid city name.');
+        return;
     }
+
+    cityInput.classList.remove('input-error');
+    fetchWeatherData(city);
 }
+
 function detectUserLocation() {
     if (!navigator.geolocation) {
         fetchWeatherData('London');
diff --git a/public/style.css b/public/style.css
index 2afc69c..19c7c46 100644
--- a/public/style.css
+++ b/public/style.css
@@ -581,7 +581,7 @@ h1 {
 }
 
 .graph-grid-line {
-    stroke: rgba(102, 126, 234, 0.15);
+    stroke: rgba(255, 255, 255, 0.12);
     stroke-width: 1;
     stroke-dasharray: 5 5;
 }
@@ -610,15 +610,20 @@ h1 {
     opacity: 0;
 }
 
-.graph-point-label {
-    fill: #2d3748;
-    font-size: 12px;
+.graph-point-label,
+.trend-value-label {
+    fill: #ffffff;
+    font-size: 13px;
     font-weight: 700;
+    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
+    paint-order: stroke;
+    stroke: rgba(0, 0, 0, 0.35);
+    stroke-width: 1px;
 }
 
 .graph-axis-label {
-    fill: #718096;
-    font-size: 11px;
+    fill: rgba(255, 255, 255, 0.88);
+    font-size: 12px;
     font-weight: 600;
 }
 
@@ -834,12 +839,12 @@ h1 {
     animation: popIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }
 
-.trend-value-label {
+/* .trend-value-label {
     paint-order: stroke;
     stroke: #f8fbff;
     stroke-width: 5px;
     stroke-linejoin: round;
-}
+} */
 
 .trend-stats {
     display: grid;
@@ -1608,5 +1613,17 @@ body.dark-mode .loading p {
 }
 
 @keyframes spin {
-    100% { transform: rotate(360deg); }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.input-error {
+    border: 1px solid #ff4d4f !important;
+    box-shadow: 0 0 10px rgba(255, 77, 79, 0.35);
+    transition: all 0.2s ease;
+}
+
+#error-message {
+    transition: all 0.2s ease;
 }
\ No newline at end of file

From d72515a53cf44e404b18abc2bb7ead339c53d919 Mon Sep 17 00:00:00 2001
From: Aishwarya <aishwaryaanekar3775@gmail.com>
Date: Thu, 14 May 2026 00:29:55 +0530
Subject: [PATCH 04/13] Add hourly weather forecast with charts

---
 public/index.html |  30 ++++--
 public/script.js  | 252 +++++++++++++++++++++++++++++++++-------------
 public/style.css  |  44 +++++++-
 3 files changed, 245 insertions(+), 81 deletions(-)

diff --git a/public/index.html b/public/index.html
index 17e2174..1069282 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,11 +25,11 @@
 
     <!-- Theme -->
     <meta name="theme-color" content="#0ea5e9" />
-    <link rel="manifest" href="/manifest.json">
     <link rel="stylesheet" href="style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
 
@@ -235,21 +235,37 @@ <h3>Sun Position</h3>
                             <span id="graph-range">--</span>
                         </div>
                         <div class="graph-wrapper">
-                            <svg id="forecast-graph" viewBox="0 0 640 240" preserveAspectRatio="none" aria-label="Temperature forecast line graph">
-                                <!-- Forecast graph is rendered by JavaScript -->
-                            </svg>
+                            <canvas id="temperature-chart" width="640" height="240" aria-label="Temperature forecast chart"></canvas>
                         </div>
                     </div>
+
+                    <div class="forecast-graph-card" style="padding-top: 18px;">
+                        <div class="graph-header">
+                            <span>Humidity & Precip (Next 24 Hours)</span>
+                            <span id="humidity-precip-range">--</span>
+                        </div>
+
+                        <div class="hourly-toggle-row" role="group" aria-label="Hourly humidity and precipitation display">
+                            <button type="button" class="hourly-toggle active" data-hourly-metric="humidity">Humidity</button>
+                            <button type="button" class="hourly-toggle" data-hourly-metric="precip">Precip</button>
+                        </div>
+
+                        <div class="graph-wrapper" style="height: 220px;">
+                            <canvas id="humidity-precip-chart" width="640" height="220" aria-label="Humidity and precipitation forecast chart"></canvas>
+                        </div>
+                    </div>
+
                     <div>
-                    <h3 class="forecast-title">5-Day Forecast</h3>
+                    <h3 class="forecast-title">24-Hour Forecast</h3>
                     <p class="forecast-subtitle" id="forecast-summary">Upcoming weather trend will appear here.</p>
                     
                     <div class="forecast-container" id="forecast-container">
-                        <!-- Forecast cards will be inserted here -->
+                        <!-- Hourly forecast cards will be inserted here -->
                     </div>
                     </div>
                 </div>
 
+
                 <section class="weather-trends-section" aria-labelledby="weather-trends-title">
                     <div class="trends-header">
                         <div>
@@ -292,6 +308,6 @@ <h3 class="forecast-title" id="weather-trends-title">Weather Trends</h3>
         </div>
     </div>
 
-    <script src="script.js"></script>
+    <script src="script.js?v=1"></script>
 </body>
 </html>
diff --git a/public/script.js b/public/script.js
index 9d783bb..8642260 100644
--- a/public/script.js
+++ b/public/script.js
@@ -212,15 +212,22 @@ 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');
@@ -450,8 +457,23 @@ function setCurrentCity(data) {
 }
 
 
+// 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'));
@@ -825,48 +847,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 = `
-            <div class="forecast-day">${dayName}</div>
+            <div class="forecast-day">${timeString}</div>
             <div class="forecast-icon">
                 <img src="${ICON_URL}/${iconCode}@2x.png" alt="${description}">
             </div>
-            <div class="forecast-temp">${toUnit(day.main.temp)}</div>
+            <div class="forecast-temp">${toUnit(hour.main.temp)}</div>
             <div class="forecast-desc">${description}</div>
         `;
 
         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);
 }
 
@@ -1227,66 +1240,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 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;
+    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);
+}
+
+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
         };
     });
+}
 
-    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(' ');
+function renderHumidityPrecipChart(hourlyPoints) {
+    if (!humidityPrecipChartCanvas || !humidityPrecipRange) return;
 
-    const yGuides = [0, 0.5, 1].map((step) => {
-        const y = padding.top + innerHeight * step;
-        return `<line x1="${padding.left}" y1="${y}" x2="${width - padding.right}" y2="${y}" class="graph-grid-line"></line>`;
-    }).join('');
+    if (!hourlyPoints || hourlyPoints.length === 0) {
+        if (window.humidityPrecipChart) {
+            window.humidityPrecipChart.destroy();
+        }
+        humidityPrecipRange.textContent = '--';
+        return;
+    }
 
-    const labels = points.map((point) => `
-        <g transform="translate(${point.x}, ${point.y})">
-            <circle r="5" class="graph-point"></circle>
-            <text y="-14" text-anchor="middle" class="graph-point-label">${point.temp}${currentUnit === 'K' ? 'K' : DEGREE}</text>
-            <text y="${height - padding.bottom - point.y + 24}" text-anchor="middle" class="graph-axis-label">${point.label}</text>
-        </g>
-    `).join('');
+    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;
+    });
 
-    forecastGraph.innerHTML = `
-        ${yGuides}
-        <polygon points="${areaPoints}" class="graph-area"></polygon>
-        <polyline points="${polylinePoints}" class="graph-line"></polyline>
-        ${labels}
-    `;
+    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 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 + '%';
+                        }
+                    }
+                }
+            }
+        }
+    };
+
+    if (window.humidityPrecipChart) {
+        window.humidityPrecipChart.destroy();
+    }
+    window.humidityPrecipChart = new Chart(humidityPrecipChartCanvas, config);
+
+    // 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 77f274e..f0c35a7 100644
--- a/public/style.css
+++ b/public/style.css
@@ -801,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;
@@ -847,10 +888,9 @@ h1 {
     height: 240px;
 }
 
-#forecast-graph {
+#temperature-chart {
     width: 100%;
     height: 100%;
-    overflow: visible;
 }
 
 .graph-grid-line {

From 8e67cf4a01882ea739f443de2a78ca21df4aabff Mon Sep 17 00:00:00 2001
From: Adithya KP <adithyakp86@gmail.com>
Date: Thu, 14 May 2026 08:47:03 +0530
Subject: [PATCH 05/13] fix: resolve hardcoded celsius unit in weather trends

---
 public/script.js | 33 ++++++++++++++++++---------------
 1 file changed, 18 insertions(+), 15 deletions(-)

diff --git a/public/script.js b/public/script.js
index 8edd3c5..7f53527 100644
--- a/public/script.js
+++ b/public/script.js
@@ -558,7 +558,7 @@ function updateWeatherTrends(trendData) {
     const warmestDay = trendData.reduce((warmest, day) => day.high > warmest.high ? day : warmest, trendData[0]);
     const coolestDay = trendData.reduce((coolest, day) => day.low < coolest.low ? day : coolest, trendData[0]);
 
-    trendsSummary.textContent = `${trendText} Warmest: ${warmestDay.dayLabel} at ${Math.round(warmestDay.high)}${DEGREE}C. Coolest: ${coolestDay.dayLabel} at ${Math.round(coolestDay.low)}${DEGREE}C.`;
+    trendsSummary.textContent = `${trendText} Warmest: ${warmestDay.dayLabel} at ${toUnit(warmestDay.high)}. Coolest: ${coolestDay.dayLabel} at ${toUnit(coolestDay.low)}.`;
     renderTrendStats(trendData);
     renderTrendChart(trendData);
 }
@@ -573,9 +573,9 @@ function renderTrendStats(trendData) {
                 <small>${day.dateLabel}</small>
             </div>
             <div class="trend-stat-values">
-                <span><strong>${Math.round(day.high)}${DEGREE}C</strong> high</span>
-                <span><strong>${Math.round(day.low)}${DEGREE}C</strong> low</span>
-                <span><strong>${Math.round(day.avg)}${DEGREE}C</strong> avg</span>
+                <span><strong>${toUnit(day.high)}</strong> high</span>
+                <span><strong>${toUnit(day.low)}</strong> low</span>
+                <span><strong>${toUnit(day.avg)}</strong> avg</span>
             </div>
         </div>
     `).join('');
@@ -613,9 +613,9 @@ function renderTrendChart(trendData) {
     const padding = { top: 46, right: 42, bottom: 48, left: 54 };
     const innerWidth = width - padding.left - padding.right;
     const innerHeight = height - padding.top - padding.bottom;
-    const values = trendData.map((day) => day[metric]);
-    const lowValues = trendData.map((day) => day.low);
-    const highValues = trendData.map((day) => day.high);
+    const values = trendData.map((day) => toUnitNum(day[metric]));
+    const lowValues = trendData.map((day) => toUnitNum(day.low));
+    const highValues = trendData.map((day) => toUnitNum(day.high));
     const minValue = Math.floor(Math.min(...lowValues) - 1);
     const maxValue = Math.ceil(Math.max(...highValues) + 1);
     const range = Math.max(maxValue - minValue, 1);
@@ -624,11 +624,14 @@ function renderTrendChart(trendData) {
     const getY = (value) => padding.top + ((maxValue - value) / range) * innerHeight;
     const points = trendData.map((day, index) => {
         const x = padding.left + (index * innerWidth) / Math.max(trendData.length - 1, 1);
+        const convertedMetric = toUnitNum(day[metric]);
         return {
             ...day,
             x,
-            y: getY(day[metric]),
-            value: day[metric]
+            y: getY(convertedMetric),
+            value: convertedMetric,
+            highConverted: toUnitNum(day.high),
+            lowConverted: toUnitNum(day.low)
         };
     });
 
@@ -638,9 +641,9 @@ function renderTrendChart(trendData) {
         return `
             <g class="trend-bar-group">
                 <rect x="${point.x - barWidth / 2}" y="${point.y}" width="${barWidth}" height="${barHeight}" rx="10" class="trend-bar"></rect>
-                <line x1="${point.x}" y1="${getY(point.low)}" x2="${point.x}" y2="${getY(point.high)}" class="trend-range-line"></line>
-                <circle cx="${point.x}" cy="${getY(point.high)}" r="4" class="trend-high-dot"></circle>
-                <circle cx="${point.x}" cy="${getY(point.low)}" r="4" class="trend-low-dot"></circle>
+                <line x1="${point.x}" y1="${getY(point.lowConverted)}" x2="${point.x}" y2="${getY(point.highConverted)}" class="trend-range-line"></line>
+                <circle cx="${point.x}" cy="${getY(point.highConverted)}" r="4" class="trend-high-dot"></circle>
+                <circle cx="${point.x}" cy="${getY(point.lowConverted)}" r="4" class="trend-low-dot"></circle>
             </g>
         `;
     }).join('');
@@ -650,13 +653,13 @@ function renderTrendChart(trendData) {
         const value = Math.round(maxValue - range * step);
         return `
             <line x1="${padding.left}" y1="${y}" x2="${width - padding.right}" y2="${y}" class="graph-grid-line"></line>
-            <text x="${padding.left - 12}" y="${y + 4}" text-anchor="end" class="graph-axis-label">${value}${DEGREE}</text>
+            <text x="${padding.left - 12}" y="${y + 4}" text-anchor="end" class="graph-axis-label">${value}${currentUnit === 'K' ? 'K' : DEGREE}</text>
         `;
     }).join('');
     const labels = points.map((point) => `
         <g transform="translate(${point.x}, ${point.y})">
             <circle r="5" class="trend-line-point"></circle>
-            <text y="-18" text-anchor="middle" class="graph-point-label trend-value-label">${Math.round(point.value)}${DEGREE}</text>
+            <text y="-18" text-anchor="middle" class="graph-point-label trend-value-label">${Math.round(point.value)}${currentUnit === 'K' ? 'K' : DEGREE}</text>
             <text y="${height - padding.bottom - point.y + 28}" text-anchor="middle" class="graph-axis-label">${point.dayLabel}</text>
         </g>
     `).join('');
@@ -674,7 +677,7 @@ function renderTrendChart(trendData) {
     }
 
     if (trendChartRange) {
-        trendChartRange.textContent = `${Math.round(Math.min(...values))}${DEGREE}C - ${Math.round(Math.max(...values))}${DEGREE}C`;
+        trendChartRange.textContent = `${Math.round(Math.min(...values))}${unitLabel()} - ${Math.round(Math.max(...values))}${unitLabel()}`;
     }
 }
 

From b18bf3e4b290e643951778864486cc109652a9e2 Mon Sep 17 00:00:00 2001
From: Ashutosh Singh <121851703+ashujsrfox@users.noreply.github.com>
Date: Thu, 14 May 2026 23:37:58 +0530
Subject: [PATCH 06/13] Revert "fix: improve weather dashboard validation and
 graph readability"

---
 public/script.js | 41 +++--------------------------------------
 public/style.css | 35 ++++++++---------------------------
 2 files changed, 11 insertions(+), 65 deletions(-)

diff --git a/public/script.js b/public/script.js
index 6c8ce58..7470084 100644
--- a/public/script.js
+++ b/public/script.js
@@ -472,11 +472,6 @@ hourlyMetricControls.forEach((btn) => {
 });
 
 
-function isValidCity(city) {
-    const cityRegex = /^[A-Za-z\s\-'.]{2,}$/;
-    return cityRegex.test(city.trim());
-}
-
 // Unit toggle
 document.querySelectorAll('.unit-btn').forEach(btn => {
 
@@ -494,7 +489,7 @@ document.querySelectorAll('.unit-btn').forEach(btn => {
 // Event Listeners
 searchBtn.addEventListener('click', handleSearch);
 cityInput.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter' && !searchBtn.disabled) {
+    if (e.key === 'Enter') {
         hideSuggestions();
         handleSearch();
     }
@@ -511,34 +506,12 @@ if (locationBtn) {
 let debounceTimer;
 cityInput.addEventListener('input', (e) => {
     hideError();
-
     const query = e.target.value.trim();
     searchBtn.disabled = query.length === 0;
     clearBtn.classList.toggle('hidden', cityInput.value.length === 0);
 
     clearTimeout(debounceTimer);
 
-    // Empty input
-    if (query.length === 0) {
-        searchBtn.disabled = true;
-        cityInput.classList.remove('input-error');
-        hideSuggestions();
-        return;
-    }
-
-    // Invalid city input
-    if (!isValidCity(query)) {
-        searchBtn.disabled = true;
-        cityInput.classList.add('input-error');
-        showError('Please enter a valid city name.');
-        hideSuggestions();
-        return;
-    }
-
-    // Valid input
-    cityInput.classList.remove('input-error');
-    searchBtn.disabled = false;
-
     if (query.length < 2) {
         hideSuggestions();
         return;
@@ -633,18 +606,10 @@ window.addEventListener('DOMContentLoaded', () => {
 
 function handleSearch() {
     const city = cityInput.value.trim();
-
-    if (!isValidCity(city)) {
-        cityInput.classList.add('input-error');
-        showError('Please enter a valid city name.');
-        return;
+    if (city) {
+        fetchWeatherData(city);
     }
-
-    cityInput.classList.remove('input-error');
-    fetchWeatherData(city);
 }
-
-function detectUserLocation() {
 function getLocationErrorMessage(error) {
     if (!error) return 'Unable to get your location.';
 
diff --git a/public/style.css b/public/style.css
index d18d374..f0c35a7 100644
--- a/public/style.css
+++ b/public/style.css
@@ -894,7 +894,7 @@ body.dark-mode .hourly-toggle.active {
 }
 
 .graph-grid-line {
-    stroke: rgba(255, 255, 255, 0.12);
+    stroke: rgba(102, 126, 234, 0.15);
     stroke-width: 1;
     stroke-dasharray: 5 5;
 }
@@ -923,20 +923,15 @@ body.dark-mode .hourly-toggle.active {
     opacity: 0;
 }
 
-.graph-point-label,
-.trend-value-label {
-    fill: #ffffff;
-    font-size: 13px;
+.graph-point-label {
+    fill: #2d3748;
+    font-size: 12px;
     font-weight: 700;
-    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
-    paint-order: stroke;
-    stroke: rgba(0, 0, 0, 0.35);
-    stroke-width: 1px;
 }
 
 .graph-axis-label {
-    fill: rgba(255, 255, 255, 0.88);
-    font-size: 12px;
+    fill: #718096;
+    font-size: 11px;
     font-weight: 600;
 }
 
@@ -1152,12 +1147,12 @@ body.dark-mode .hourly-toggle.active {
     animation: popIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }
 
-/* .trend-value-label {
+.trend-value-label {
     paint-order: stroke;
     stroke: #f8fbff;
     stroke-width: 5px;
     stroke-linejoin: round;
-} */
+}
 
 .trend-stats {
     display: grid;
@@ -2064,20 +2059,6 @@ body.dark-mode .loading p {
 }
 
 @keyframes spin {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.input-error {
-    border: 1px solid #ff4d4f !important;
-    box-shadow: 0 0 10px rgba(255, 77, 79, 0.35);
-    transition: all 0.2s ease;
-}
-
-#error-message {
-    transition: all 0.2s ease;
-}
     100% { transform: rotate(360deg); }
 }
 

From afad04f1ec01087e351bfa71ee42973161886e7e Mon Sep 17 00:00:00 2001
From: Ashutosh Singh <121851703+ashujsrfox@users.noreply.github.com>
Date: Thu, 14 May 2026 23:39:47 +0530
Subject: [PATCH 07/13] Revert "Feature/hourly weather charts"

---
 public/index.html    |  81 +-----
 public/manifest.json |   1 -
 public/script.js     | 658 +++++--------------------------------------
 public/style.css     | 258 +----------------
 public/sw.js         |   1 -
 server.js            |   3 -
 6 files changed, 86 insertions(+), 916 deletions(-)

diff --git a/public/index.html b/public/index.html
index 26266ef..96ebaf5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,11 +25,11 @@
 
     <!-- Theme -->
     <meta name="theme-color" content="#0ea5e9" />
+    <link rel="manifest" href="/manifest.json">
     <link rel="stylesheet" href="style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
 
@@ -65,29 +65,6 @@ <h1>Weatherify ⛅</h1>
                     <div id="error-message" class="hidden text-red-500 text-sm mt-2">
                         <p>City not found. Please check spelling and try again.</p>
                     </div>
-                    
-
-                    <div id="history-dropdown" class="history-dropdown" aria-label="Recent searches and favorites">
-                        <div class="history-panel-header">
-                            <h2>Saved Cities</h2>
-                            <p>Quickly reopen favorite cities or recent searches.</p>
-                        </div>
-                        <div class="history-dropdown-inner">
-                            <div class="history-section">
-                                <div class="history-section-title">Favorites</div>
-                                <div id="favorite-list" class="history-list"></div>
-                            </div>
-
-                            <div class="history-section">
-                                <div class="history-section-title">Recent</div>
-                                <div id="recent-list" class="history-list"></div>
-                            </div>
-
-                            <div class="history-actions">
-                                <button id="clear-history-btn" type="button" class="clear-history-btn hidden">Clear history</button>
-                            </div>
-                        </div>
-                    </div>
                 </div>
 
             <div id="no-data-message" class="no-data-message">
@@ -114,12 +91,7 @@ <h2>Welcome to Weatherify ⛅</h2>
                 <div class="weather-main">
                     <div class="temperature-section">
                         <div class="location-info">
-                            <div class="city-header-row">
-                                <h2 id="city-name">City Name</h2>
-                                <button id="favorite-btn" class="favorite-btn" type="button" aria-label="Toggle favorite" aria-pressed="false" title="Favorite">
-                                    <span class="favorite-icon" aria-hidden="true">☆</span>
-                                </button>
-                            </div>
+                            <h2 id="city-name">City Name</h2>
                             <p id="date">Date</p>
                         </div>
                         <div class="weather-icon" id="weather-icon"></div>
@@ -196,26 +168,6 @@ <h3>Sun Position</h3>
                             <span class="detail-value" id="visibility">-- km</span>
                         </div>
                     </div>
-
-                    <div class="detail-card" id="aqi-card">
-                        <div class="detail-icon" aria-hidden="true">
-                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M21 16V8a2 2 0 0 0-1-1.73L12 2 4 6.27A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73L12 22l8-4.27a2 2 0 0 0 1-1.73Z"></path>
-                                <path d="M12 22V12"></path>
-                                <path d="M21 8l-9 4-9-4"></path>
-                            </svg>
-                        </div>
-                        <div class="detail-info">
-                            <span class="detail-label">Air Quality (AQI)</span>
-                            <span class="detail-value" style="display:flex; align-items:center; gap:10px;">
-                                <span class="aqi-value" id="aqi-value">--</span>
-                                <span class="aqi-badge" id="aqi-badge">--</span>
-                            </span>
-                            <span class="aqi-pollutants" id="aqi-pollutants">Pollutants --</span>
-                            <span class="aqi-recommendation" id="aqi-recommendation">Recommendation --</span>
-                        </div>
-                    </div>
-
                     <div class="detail-card">
                         <div class="detail-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="9" x2="12" y2="2"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line></svg>
@@ -246,7 +198,6 @@ <h3>Sun Position</h3>
 
                 </div>
 
-
                 <div class="forecast-section">
                     <div class="forecast-graph-card">
                         <div class="graph-header">
@@ -254,37 +205,21 @@ <h3>Sun Position</h3>
                             <span id="graph-range">--</span>
                         </div>
                         <div class="graph-wrapper">
-                            <canvas id="temperature-chart" width="640" height="240" aria-label="Temperature forecast chart"></canvas>
-                        </div>
-                    </div>
-
-                    <div class="forecast-graph-card" style="padding-top: 18px;">
-                        <div class="graph-header">
-                            <span>Humidity & Precip (Next 24 Hours)</span>
-                            <span id="humidity-precip-range">--</span>
-                        </div>
-
-                        <div class="hourly-toggle-row" role="group" aria-label="Hourly humidity and precipitation display">
-                            <button type="button" class="hourly-toggle active" data-hourly-metric="humidity">Humidity</button>
-                            <button type="button" class="hourly-toggle" data-hourly-metric="precip">Precip</button>
-                        </div>
-
-                        <div class="graph-wrapper" style="height: 220px;">
-                            <canvas id="humidity-precip-chart" width="640" height="220" aria-label="Humidity and precipitation forecast chart"></canvas>
+                            <svg id="forecast-graph" viewBox="0 0 640 240" preserveAspectRatio="none" aria-label="Temperature forecast line graph">
+                                <!-- Forecast graph is rendered by JavaScript -->
+                            </svg>
                         </div>
                     </div>
-
                     <div>
-                    <h3 class="forecast-title">24-Hour Forecast</h3>
+                    <h3 class="forecast-title">5-Day Forecast</h3>
                     <p class="forecast-subtitle" id="forecast-summary">Upcoming weather trend will appear here.</p>
                     
                     <div class="forecast-container" id="forecast-container">
-                        <!-- Hourly forecast cards will be inserted here -->
+                        <!-- Forecast cards will be inserted here -->
                     </div>
                     </div>
                 </div>
 
-
                 <section class="weather-trends-section" aria-labelledby="weather-trends-title">
                     <div class="trends-header">
                         <div>
@@ -327,7 +262,7 @@ <h3 class="forecast-title" id="weather-trends-title">Weather Trends</h3>
         </div>
     </div>
 
-    <script src="script.js?v=1"></script>
+    <script src="script.js"></script>
 </body>
 </html>
 
diff --git a/public/manifest.json b/public/manifest.json
index aa09cb0..407ceb6 100644
--- a/public/manifest.json
+++ b/public/manifest.json
@@ -12,7 +12,6 @@
       "sizes": "192x192 512x512",
       "type": "image/svg+xml",
       "purpose": "any maskable"
-      
     }
   ]
 }
diff --git a/public/script.js b/public/script.js
index 7470084..a82ea30 100644
--- a/public/script.js
+++ b/public/script.js
@@ -5,142 +5,9 @@ const DEGREE = '\u00B0';
 const DEFAULT_CITY = 'New Delhi';
 
 let currentUnit = 'C';
-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();
-}
+let rawData = { current: null, forecast: null };
 
+// Initialize unit display after DOM is ready
 function initUnitDisplay() {
     const unitElement = document.querySelector('.unit');
     if (unitElement) {
@@ -213,268 +80,21 @@ 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 temperatureChartCanvas = document.getElementById('temperature-chart');
+const forecastGraph = document.getElementById('forecast-graph');
 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) => `
-        <button type="button" class="history-button favorite-entry" data-query="${item.query}">
-            <span>${item.label}</span>
-            <span class="history-badge">★</span>
-        </button>
-    `).join('');
-
-    const recentMarkup = recentSearches.map((item) => `
-        <button type="button" class="history-button recent-entry" data-query="${item.query}">
-            <span>${item.label}</span>
-        </button>
-    `).join('');
-
-    const hasHistory = favoriteCities.length > 0 || recentSearches.length > 0;
-    const emptyState = !hasHistory ? `
-        <div class="history-empty">
-            <p>No recent searches yet.</p>
-            <small>Search a city and it will appear here for quick access.</small>
-        </div>
-    ` : '';
-
-    const inner = historyDropdown.querySelector('.history-dropdown-inner');
-    if (inner) {
-        inner.innerHTML = `
-            <div class="history-section">
-                <div class="history-section-title">Favorites</div>
-                <div id="favorite-list" class="history-list">${favoriteMarkup}</div>
-            </div>
-            <div class="history-section">
-                <div class="history-section-title">Recent</div>
-                <div id="recent-list" class="history-list">${recentMarkup}</div>
-            </div>
-            ${emptyState}
-            <div class="history-actions">
-                <button id="clear-history-btn" type="button" class="clear-history-btn ${recentSearches.length === 0 ? 'hidden' : ''}">Clear history</button>
-            </div>
-        `;
-    }
-
-    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'));
@@ -528,14 +148,11 @@ clearBtn.addEventListener('click', (e) => {
     cityInput.focus();
 });
 
-// Hide suggestions and history when clicking outside search controls
+// Hide suggestions when clicking outside
 document.addEventListener('click', (e) => {
     if (!e.target.closest('.search-box')) {
         hideSuggestions();
     }
-    if (!e.target.closest('.search-container')) {
-        closeHistoryDropdown();
-    }
 });
 
 if (trendControls) {
@@ -600,8 +217,7 @@ window.addEventListener('DOMContentLoaded', () => {
             console.error('Service Worker registration failed:', err);
         });
     }
-    initHistory();
-    fetchWeatherData(DEFAULT_CITY);
+    showNoDataMessage();
 });
 
 function handleSearch() {
@@ -703,30 +319,10 @@ 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');
@@ -747,9 +343,6 @@ 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();
@@ -778,23 +371,10 @@ 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) {
@@ -848,39 +428,48 @@ function updateForecastUI(forecastData) {
         return;
     }
 
-    const hourlyData = forecastData.list.slice(0, 8); // Next 24 hours (8 * 3 hours)
+    const chartData = forecastData.list.slice(0, 8);
     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 = '';
 
-    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;
+    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;
 
         const card = document.createElement('div');
         card.className = 'forecast-card';
         card.innerHTML = `
-            <div class="forecast-day">${timeString}</div>
+            <div class="forecast-day">${dayName}</div>
             <div class="forecast-icon">
                 <img src="${ICON_URL}/${iconCode}@2x.png" alt="${description}">
             </div>
-            <div class="forecast-temp">${toUnit(hour.main.temp)}</div>
+            <div class="forecast-temp">${toUnit(day.main.temp)}</div>
             <div class="forecast-desc">${description}</div>
         `;
 
         forecastContainer.appendChild(card);
     });
 
-    updateForecastSummary(hourlyData);
-    renderTemperatureChart(hourlyData);
-
-    // Hourly humidity/precip chart
-    const hoursAhead = 24;
-    const hourlyPoints = buildHourlyPoints(forecastData.list, forecastData.city?.timezone || 0, hoursAhead);
-    renderHumidityPrecipChart(hourlyPoints);
-
+    updateForecastSummary(chartData);
+    renderForecastGraph(chartData);
     updateWeatherTrends(dailyTrendData);
 }
 
@@ -1251,161 +840,66 @@ function formatDuration(seconds) {
     return `${hours}h ${minutes}m`;
 }
 
-function renderTemperatureChart(hourlyData) {
-    if (!temperatureChartCanvas) return;
+function renderForecastGraph(chartData) {
+    if (!forecastGraph) return;
 
-    if (!hourlyData.length) {
-        // Clear chart if no data
-        if (window.temperatureChart) {
-            window.temperatureChart.destroy();
-        }
+    if (!chartData.length) {
+        forecastGraph.innerHTML = '';
         return;
     }
 
-    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);
-}
-
-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;
+    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);
 
-    // 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);
+    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;
 
-    // Keep it compact (3-hour steps => ~8 points for 24h)
-    return points.slice(0, 10).map((item) => {
-        const localDate = getShiftedDate(item.dt, timezoneOffsetSeconds);
         return {
-            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
+            x,
+            y,
+            temp: convertedTemp,
+            label: new Date(item.dt * 1000).toLocaleTimeString('en-US', {
+                hour: 'numeric'
+            })
         };
     });
-}
-
-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 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 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 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 yGuides = [0, 0.5, 1].map((step) => {
+        const y = padding.top + innerHeight * step;
+        return `<line x1="${padding.left}" y1="${y}" x2="${width - padding.right}" y2="${y}" class="graph-grid-line"></line>`;
+    }).join('');
 
-    if (window.humidityPrecipChart) {
-        window.humidityPrecipChart.destroy();
-    }
-    window.humidityPrecipChart = new Chart(humidityPrecipChartCanvas, config);
+    const labels = points.map((point) => `
+        <g transform="translate(${point.x}, ${point.y})">
+            <circle r="5" class="graph-point"></circle>
+            <text y="-14" text-anchor="middle" class="graph-point-label">${point.temp}${currentUnit === 'K' ? 'K' : DEGREE}</text>
+            <text y="${height - padding.bottom - point.y + 24}" text-anchor="middle" class="graph-axis-label">${point.label}</text>
+        </g>
+    `).join('');
 
-    // 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})`;
+    forecastGraph.innerHTML = `
+        ${yGuides}
+        <polygon points="${areaPoints}" class="graph-area"></polygon>
+        <polyline points="${polylinePoints}" class="graph-line"></polyline>
+        ${labels}
+    `;
 }
-
 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 f0c35a7..a869734 100644
--- a/public/style.css
+++ b/public/style.css
@@ -158,7 +158,6 @@ h1 {
     width: 100%;
     max-width: none;
     margin-left: 0;
-    position: relative;
 }
 
 .theme-toggle {
@@ -279,167 +278,6 @@ 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;
@@ -726,57 +564,6 @@ 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;
@@ -801,47 +588,6 @@ 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;
@@ -888,9 +634,10 @@ body.dark-mode .hourly-toggle.active {
     height: 240px;
 }
 
-#temperature-chart {
+#forecast-graph {
     width: 100%;
     height: 100%;
+    overflow: visible;
 }
 
 .graph-grid-line {
@@ -1251,7 +998,6 @@ body.dark-mode .hourly-toggle.active {
 @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 6fcf8ac..d8630b7 100644
--- a/public/sw.js
+++ b/public/sw.js
@@ -15,7 +15,6 @@ 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 754e4da..3a623f3 100644
--- a/server.js
+++ b/server.js
@@ -13,7 +13,6 @@ 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
@@ -69,8 +68,6 @@ 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')));
 

From 67450b6810b89ea7384f1dff7c095a911b9bdd51 Mon Sep 17 00:00:00 2001
From: Ashutosh Singh <121851703+ashujsrfox@users.noreply.github.com>
Date: Thu, 14 May 2026 23:41:12 +0530
Subject: [PATCH 08/13] Revert "Add Air Quality Index (AQI) support with health
 indicators"


From f5c2bb5f4948e20d4ea3b4050241d44784f1f27c Mon Sep 17 00:00:00 2001
From: Ashutosh Singh <121851703+ashujsrfox@users.noreply.github.com>
Date: Thu, 14 May 2026 23:42:31 +0530
Subject: [PATCH 09/13] Revert "fix: resolve hardcoded celsius unit in weather
 trends"

---
 public/script.js | 26 ++++++++------------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/public/script.js b/public/script.js
index a82ea30..8edd3c5 100644
--- a/public/script.js
+++ b/public/script.js
@@ -613,9 +613,9 @@ function renderTrendChart(trendData) {
     const padding = { top: 46, right: 42, bottom: 48, left: 54 };
     const innerWidth = width - padding.left - padding.right;
     const innerHeight = height - padding.top - padding.bottom;
-    const values = trendData.map((day) => toUnitNum(day[metric]));
-    const lowValues = trendData.map((day) => toUnitNum(day.low));
-    const highValues = trendData.map((day) => toUnitNum(day.high));
+    const values = trendData.map((day) => day[metric]);
+    const lowValues = trendData.map((day) => day.low);
+    const highValues = trendData.map((day) => day.high);
     const minValue = Math.floor(Math.min(...lowValues) - 1);
     const maxValue = Math.ceil(Math.max(...highValues) + 1);
     const range = Math.max(maxValue - minValue, 1);
@@ -624,15 +624,11 @@ function renderTrendChart(trendData) {
     const getY = (value) => padding.top + ((maxValue - value) / range) * innerHeight;
     const points = trendData.map((day, index) => {
         const x = padding.left + (index * innerWidth) / Math.max(trendData.length - 1, 1);
-        const convertedMetric = toUnitNum(day[metric]);
-        const x = padding.left + xInset + (index * xSpan) / Math.max(trendData.length - 1, 1);
         return {
             ...day,
             x,
-            y: getY(convertedMetric),
-            value: convertedMetric,
-            highConverted: toUnitNum(day.high),
-            lowConverted: toUnitNum(day.low)
+            y: getY(day[metric]),
+            value: day[metric]
         };
     });
 
@@ -642,9 +638,9 @@ function renderTrendChart(trendData) {
         return `
             <g class="trend-bar-group">
                 <rect x="${point.x - barWidth / 2}" y="${point.y}" width="${barWidth}" height="${barHeight}" rx="10" class="trend-bar"></rect>
-                <line x1="${point.x}" y1="${getY(point.lowConverted)}" x2="${point.x}" y2="${getY(point.highConverted)}" class="trend-range-line"></line>
-                <circle cx="${point.x}" cy="${getY(point.highConverted)}" r="4" class="trend-high-dot"></circle>
-                <circle cx="${point.x}" cy="${getY(point.lowConverted)}" r="4" class="trend-low-dot"></circle>
+                <line x1="${point.x}" y1="${getY(point.low)}" x2="${point.x}" y2="${getY(point.high)}" class="trend-range-line"></line>
+                <circle cx="${point.x}" cy="${getY(point.high)}" r="4" class="trend-high-dot"></circle>
+                <circle cx="${point.x}" cy="${getY(point.low)}" r="4" class="trend-low-dot"></circle>
             </g>
         `;
     }).join('');
@@ -654,16 +650,12 @@ function renderTrendChart(trendData) {
         const value = Math.round(maxValue - range * step);
         return `
             <line x1="${padding.left}" y1="${y}" x2="${width - padding.right}" y2="${y}" class="graph-grid-line"></line>
-            <text x="${padding.left - 12}" y="${y + 4}" text-anchor="end" class="graph-axis-label">${value}${currentUnit === 'K' ? 'K' : DEGREE}</text>
-            <text x="${padding.left - 12}" y="${y + 4}" text-anchor="end" class="graph-axis-label">${toUnitNum(value)}${DEGREE}</text>
             <text x="${padding.left - 12}" y="${y + 4}" text-anchor="end" class="graph-axis-label">${value}${DEGREE}</text>
         `;
     }).join('');
     const labels = points.map((point) => `
         <g transform="translate(${point.x}, ${point.y})">
             <circle r="5" class="trend-line-point"></circle>
-            <text y="-18" text-anchor="middle" class="graph-point-label trend-value-label">${Math.round(point.value)}${currentUnit === 'K' ? 'K' : DEGREE}</text>
-            <text y="-18" text-anchor="middle" class="graph-point-label trend-value-label">${toUnitNum(point.value)}${DEGREE}</text>
             <text y="-18" text-anchor="middle" class="graph-point-label trend-value-label">${Math.round(point.value)}${DEGREE}</text>
             <text y="${height - padding.bottom - point.y + 28}" text-anchor="middle" class="graph-axis-label">${point.dayLabel}</text>
         </g>
@@ -682,8 +674,6 @@ function renderTrendChart(trendData) {
     }
 
     if (trendChartRange) {
-        trendChartRange.textContent = `${Math.round(Math.min(...values))}${unitLabel()} - ${Math.round(Math.max(...values))}${unitLabel()}`;
-        trendChartRange.textContent = `${toUnit(Math.min(...values))} — ${toUnit(Math.max(...values))}`;
         trendChartRange.textContent = `${Math.round(Math.min(...values))}${DEGREE}C - ${Math.round(Math.max(...values))}${DEGREE}C`;
     }
 }

From 94afa31f08fc3c27ae8ec5e05ece37d39fb5b954 Mon Sep 17 00:00:00 2001
From: Ashutosh Singh <121851703+ashujsrfox@users.noreply.github.com>
Date: Thu, 14 May 2026 23:46:49 +0530
Subject: [PATCH 10/13] Revert "Revert "Add Air Quality Index (AQI) support
 with health indicators""


From 43b890bb224cf0b6b517e13d4677edab1f523417 Mon Sep 17 00:00:00 2001
From: Ashutosh Singh <121851703+ashujsrfox@users.noreply.github.com>
Date: Thu, 14 May 2026 23:48:49 +0530
Subject: [PATCH 11/13] Revert "Revert "Feature/hourly weather charts""

---
 public/index.html    |  81 +++++-
 public/manifest.json |   1 +
 public/script.js     | 658 ++++++++++++++++++++++++++++++++++++++-----
 public/style.css     | 258 ++++++++++++++++-
 public/sw.js         |   1 +
 server.js            |   3 +
 6 files changed, 916 insertions(+), 86 deletions(-)

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 @@
 
     <!-- Theme -->
     <meta name="theme-color" content="#0ea5e9" />
-    <link rel="manifest" href="/manifest.json">
     <link rel="stylesheet" href="style.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
 </head>
 <body>
 
@@ -65,6 +65,29 @@ <h1>Weatherify ⛅</h1>
                     <div id="error-message" class="hidden text-red-500 text-sm mt-2">
                         <p>City not found. Please check spelling and try again.</p>
                     </div>
+                    
+
+                    <div id="history-dropdown" class="history-dropdown" aria-label="Recent searches and favorites">
+                        <div class="history-panel-header">
+                            <h2>Saved Cities</h2>
+                            <p>Quickly reopen favorite cities or recent searches.</p>
+                        </div>
+                        <div class="history-dropdown-inner">
+                            <div class="history-section">
+                                <div class="history-section-title">Favorites</div>
+                                <div id="favorite-list" class="history-list"></div>
+                            </div>
+
+                            <div class="history-section">
+                                <div class="history-section-title">Recent</div>
+                                <div id="recent-list" class="history-list"></div>
+                            </div>
+
+                            <div class="history-actions">
+                                <button id="clear-history-btn" type="button" class="clear-history-btn hidden">Clear history</button>
+                            </div>
+                        </div>
+                    </div>
                 </div>
 
             <div id="no-data-message" class="no-data-message">
@@ -91,7 +114,12 @@ <h2>Welcome to Weatherify ⛅</h2>
                 <div class="weather-main">
                     <div class="temperature-section">
                         <div class="location-info">
-                            <h2 id="city-name">City Name</h2>
+                            <div class="city-header-row">
+                                <h2 id="city-name">City Name</h2>
+                                <button id="favorite-btn" class="favorite-btn" type="button" aria-label="Toggle favorite" aria-pressed="false" title="Favorite">
+                                    <span class="favorite-icon" aria-hidden="true">☆</span>
+                                </button>
+                            </div>
                             <p id="date">Date</p>
                         </div>
                         <div class="weather-icon" id="weather-icon"></div>
@@ -168,6 +196,26 @@ <h3>Sun Position</h3>
                             <span class="detail-value" id="visibility">-- km</span>
                         </div>
                     </div>
+
+                    <div class="detail-card" id="aqi-card">
+                        <div class="detail-icon" aria-hidden="true">
+                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                                <path d="M21 16V8a2 2 0 0 0-1-1.73L12 2 4 6.27A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73L12 22l8-4.27a2 2 0 0 0 1-1.73Z"></path>
+                                <path d="M12 22V12"></path>
+                                <path d="M21 8l-9 4-9-4"></path>
+                            </svg>
+                        </div>
+                        <div class="detail-info">
+                            <span class="detail-label">Air Quality (AQI)</span>
+                            <span class="detail-value" style="display:flex; align-items:center; gap:10px;">
+                                <span class="aqi-value" id="aqi-value">--</span>
+                                <span class="aqi-badge" id="aqi-badge">--</span>
+                            </span>
+                            <span class="aqi-pollutants" id="aqi-pollutants">Pollutants --</span>
+                            <span class="aqi-recommendation" id="aqi-recommendation">Recommendation --</span>
+                        </div>
+                    </div>
+
                     <div class="detail-card">
                         <div class="detail-icon">
                             <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 18a5 5 0 0 0-10 0"></path><line x1="12" y1="9" x2="12" y2="2"></line><line x1="4.22" y1="10.22" x2="5.64" y2="11.64"></line><line x1="1" y1="18" x2="3" y2="18"></line><line x1="21" y1="18" x2="23" y2="18"></line><line x1="18.36" y1="11.64" x2="19.78" y2="10.22"></line><line x1="23" y1="22" x2="1" y2="22"></line></svg>
@@ -198,6 +246,7 @@ <h3>Sun Position</h3>
 
                 </div>
 
+
                 <div class="forecast-section">
                     <div class="forecast-graph-card">
                         <div class="graph-header">
@@ -205,21 +254,37 @@ <h3>Sun Position</h3>
                             <span id="graph-range">--</span>
                         </div>
                         <div class="graph-wrapper">
-                            <svg id="forecast-graph" viewBox="0 0 640 240" preserveAspectRatio="none" aria-label="Temperature forecast line graph">
-                                <!-- Forecast graph is rendered by JavaScript -->
-                            </svg>
+                            <canvas id="temperature-chart" width="640" height="240" aria-label="Temperature forecast chart"></canvas>
                         </div>
                     </div>
+
+                    <div class="forecast-graph-card" style="padding-top: 18px;">
+                        <div class="graph-header">
+                            <span>Humidity & Precip (Next 24 Hours)</span>
+                            <span id="humidity-precip-range">--</span>
+                        </div>
+
+                        <div class="hourly-toggle-row" role="group" aria-label="Hourly humidity and precipitation display">
+                            <button type="button" class="hourly-toggle active" data-hourly-metric="humidity">Humidity</button>
+                            <button type="button" class="hourly-toggle" data-hourly-metric="precip">Precip</button>
+                        </div>
+
+                        <div class="graph-wrapper" style="height: 220px;">
+                            <canvas id="humidity-precip-chart" width="640" height="220" aria-label="Humidity and precipitation forecast chart"></canvas>
+                        </div>
+                    </div>
+
                     <div>
-                    <h3 class="forecast-title">5-Day Forecast</h3>
+                    <h3 class="forecast-title">24-Hour Forecast</h3>
                     <p class="forecast-subtitle" id="forecast-summary">Upcoming weather trend will appear here.</p>
                     
                     <div class="forecast-container" id="forecast-container">
-                        <!-- Forecast cards will be inserted here -->
+                        <!-- Hourly forecast cards will be inserted here -->
                     </div>
                     </div>
                 </div>
 
+
                 <section class="weather-trends-section" aria-labelledby="weather-trends-title">
                     <div class="trends-header">
                         <div>
@@ -262,7 +327,7 @@ <h3 class="forecast-title" id="weather-trends-title">Weather Trends</h3>
         </div>
     </div>
 
-    <script src="script.js"></script>
+    <script src="script.js?v=1"></script>
 </body>
 </html>
 
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) => `
+        <button type="button" class="history-button favorite-entry" data-query="${item.query}">
+            <span>${item.label}</span>
+            <span class="history-badge">★</span>
+        </button>
+    `).join('');
+
+    const recentMarkup = recentSearches.map((item) => `
+        <button type="button" class="history-button recent-entry" data-query="${item.query}">
+            <span>${item.label}</span>
+        </button>
+    `).join('');
+
+    const hasHistory = favoriteCities.length > 0 || recentSearches.length > 0;
+    const emptyState = !hasHistory ? `
+        <div class="history-empty">
+            <p>No recent searches yet.</p>
+            <small>Search a city and it will appear here for quick access.</small>
+        </div>
+    ` : '';
+
+    const inner = historyDropdown.querySelector('.history-dropdown-inner');
+    if (inner) {
+        inner.innerHTML = `
+            <div class="history-section">
+                <div class="history-section-title">Favorites</div>
+                <div id="favorite-list" class="history-list">${favoriteMarkup}</div>
+            </div>
+            <div class="history-section">
+                <div class="history-section-title">Recent</div>
+                <div id="recent-list" class="history-list">${recentMarkup}</div>
+            </div>
+            ${emptyState}
+            <div class="history-actions">
+                <button id="clear-history-btn" type="button" class="clear-history-btn ${recentSearches.length === 0 ? 'hidden' : ''}">Clear history</button>
+            </div>
+        `;
+    }
+
+    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 = `
-            <div class="forecast-day">${dayName}</div>
+            <div class="forecast-day">${timeString}</div>
             <div class="forecast-icon">
                 <img src="${ICON_URL}/${iconCode}@2x.png" alt="${description}">
             </div>
-            <div class="forecast-temp">${toUnit(day.main.temp)}</div>
+            <div class="forecast-temp">${toUnit(hour.main.temp)}</div>
             <div class="forecast-desc">${description}</div>
         `;
 
         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 `<line x1="${padding.left}" y1="${y}" x2="${width - padding.right}" y2="${y}" class="graph-grid-line"></line>`;
-    }).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) => `
-        <g transform="translate(${point.x}, ${point.y})">
-            <circle r="5" class="graph-point"></circle>
-            <text y="-14" text-anchor="middle" class="graph-point-label">${point.temp}${currentUnit === 'K' ? 'K' : DEGREE}</text>
-            <text y="${height - padding.bottom - point.y + 24}" text-anchor="middle" class="graph-axis-label">${point.label}</text>
-        </g>
-    `).join('');
+    if (window.humidityPrecipChart) {
+        window.humidityPrecipChart.destroy();
+    }
+    window.humidityPrecipChart = new Chart(humidityPrecipChartCanvas, config);
 
-    forecastGraph.innerHTML = `
-        ${yGuides}
-        <polygon points="${areaPoints}" class="graph-area"></polygon>
-        <polyline points="${polylinePoints}" class="graph-line"></polyline>
-        ${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')));
 

From 67939e6dce075c950a65c2a7ff72633c84ccf220 Mon Sep 17 00:00:00 2001
From: Ashutosh Singh <121851703+ashujsrfox@users.noreply.github.com>
Date: Thu, 14 May 2026 23:50:03 +0530
Subject: [PATCH 12/13] Revert "Revert "fix: improve weather dashboard
 validation and graph readability""

---
 public/script.js | 41 ++++++++++++++++++++++++++++++++++++++---
 public/style.css | 35 +++++++++++++++++++++++++++--------
 2 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/public/script.js b/public/script.js
index 6cd5bcb..fba221e 100644
--- a/public/script.js
+++ b/public/script.js
@@ -472,6 +472,11 @@ hourlyMetricControls.forEach((btn) => {
 });
 
 
+function isValidCity(city) {
+    const cityRegex = /^[A-Za-z\s\-'.]{2,}$/;
+    return cityRegex.test(city.trim());
+}
+
 // Unit toggle
 document.querySelectorAll('.unit-btn').forEach(btn => {
 
@@ -489,7 +494,7 @@ document.querySelectorAll('.unit-btn').forEach(btn => {
 // Event Listeners
 searchBtn.addEventListener('click', handleSearch);
 cityInput.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter') {
+    if (e.key === 'Enter' && !searchBtn.disabled) {
         hideSuggestions();
         handleSearch();
     }
@@ -506,12 +511,34 @@ if (locationBtn) {
 let debounceTimer;
 cityInput.addEventListener('input', (e) => {
     hideError();
+
     const query = e.target.value.trim();
     searchBtn.disabled = query.length === 0;
     clearBtn.classList.toggle('hidden', cityInput.value.length === 0);
 
     clearTimeout(debounceTimer);
 
+    // Empty input
+    if (query.length === 0) {
+        searchBtn.disabled = true;
+        cityInput.classList.remove('input-error');
+        hideSuggestions();
+        return;
+    }
+
+    // Invalid city input
+    if (!isValidCity(query)) {
+        searchBtn.disabled = true;
+        cityInput.classList.add('input-error');
+        showError('Please enter a valid city name.');
+        hideSuggestions();
+        return;
+    }
+
+    // Valid input
+    cityInput.classList.remove('input-error');
+    searchBtn.disabled = false;
+
     if (query.length < 2) {
         hideSuggestions();
         return;
@@ -606,10 +633,18 @@ window.addEventListener('DOMContentLoaded', () => {
 
 function handleSearch() {
     const city = cityInput.value.trim();
-    if (city) {
-        fetchWeatherData(city);
+
+    if (!isValidCity(city)) {
+        cityInput.classList.add('input-error');
+        showError('Please enter a valid city name.');
+        return;
     }
+
+    cityInput.classList.remove('input-error');
+    fetchWeatherData(city);
 }
+
+function detectUserLocation() {
 function getLocationErrorMessage(error) {
     if (!error) return 'Unable to get your location.';
 
diff --git a/public/style.css b/public/style.css
index f0c35a7..d18d374 100644
--- a/public/style.css
+++ b/public/style.css
@@ -894,7 +894,7 @@ body.dark-mode .hourly-toggle.active {
 }
 
 .graph-grid-line {
-    stroke: rgba(102, 126, 234, 0.15);
+    stroke: rgba(255, 255, 255, 0.12);
     stroke-width: 1;
     stroke-dasharray: 5 5;
 }
@@ -923,15 +923,20 @@ body.dark-mode .hourly-toggle.active {
     opacity: 0;
 }
 
-.graph-point-label {
-    fill: #2d3748;
-    font-size: 12px;
+.graph-point-label,
+.trend-value-label {
+    fill: #ffffff;
+    font-size: 13px;
     font-weight: 700;
+    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
+    paint-order: stroke;
+    stroke: rgba(0, 0, 0, 0.35);
+    stroke-width: 1px;
 }
 
 .graph-axis-label {
-    fill: #718096;
-    font-size: 11px;
+    fill: rgba(255, 255, 255, 0.88);
+    font-size: 12px;
     font-weight: 600;
 }
 
@@ -1147,12 +1152,12 @@ body.dark-mode .hourly-toggle.active {
     animation: popIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }
 
-.trend-value-label {
+/* .trend-value-label {
     paint-order: stroke;
     stroke: #f8fbff;
     stroke-width: 5px;
     stroke-linejoin: round;
-}
+} */
 
 .trend-stats {
     display: grid;
@@ -2059,6 +2064,20 @@ body.dark-mode .loading p {
 }
 
 @keyframes spin {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+.input-error {
+    border: 1px solid #ff4d4f !important;
+    box-shadow: 0 0 10px rgba(255, 77, 79, 0.35);
+    transition: all 0.2s ease;
+}
+
+#error-message {
+    transition: all 0.2s ease;
+}
     100% { transform: rotate(360deg); }
 }
 

From 7385ca0f0f6a13f01e5282b9cbc6a980c8046818 Mon Sep 17 00:00:00 2001
From: Ashutosh Singh <121851703+ashujsrfox@users.noreply.github.com>
Date: Thu, 14 May 2026 23:52:21 +0530
Subject: [PATCH 13/13] Revert "Revert "Revert "fix: improve weather dashboard
 validation and graph readability"""

---
 public/script.js | 41 +++--------------------------------------
 public/style.css | 35 ++++++++---------------------------
 2 files changed, 11 insertions(+), 65 deletions(-)

diff --git a/public/script.js b/public/script.js
index fba221e..6cd5bcb 100644
--- a/public/script.js
+++ b/public/script.js
@@ -472,11 +472,6 @@ hourlyMetricControls.forEach((btn) => {
 });
 
 
-function isValidCity(city) {
-    const cityRegex = /^[A-Za-z\s\-'.]{2,}$/;
-    return cityRegex.test(city.trim());
-}
-
 // Unit toggle
 document.querySelectorAll('.unit-btn').forEach(btn => {
 
@@ -494,7 +489,7 @@ document.querySelectorAll('.unit-btn').forEach(btn => {
 // Event Listeners
 searchBtn.addEventListener('click', handleSearch);
 cityInput.addEventListener('keypress', (e) => {
-    if (e.key === 'Enter' && !searchBtn.disabled) {
+    if (e.key === 'Enter') {
         hideSuggestions();
         handleSearch();
     }
@@ -511,34 +506,12 @@ if (locationBtn) {
 let debounceTimer;
 cityInput.addEventListener('input', (e) => {
     hideError();
-
     const query = e.target.value.trim();
     searchBtn.disabled = query.length === 0;
     clearBtn.classList.toggle('hidden', cityInput.value.length === 0);
 
     clearTimeout(debounceTimer);
 
-    // Empty input
-    if (query.length === 0) {
-        searchBtn.disabled = true;
-        cityInput.classList.remove('input-error');
-        hideSuggestions();
-        return;
-    }
-
-    // Invalid city input
-    if (!isValidCity(query)) {
-        searchBtn.disabled = true;
-        cityInput.classList.add('input-error');
-        showError('Please enter a valid city name.');
-        hideSuggestions();
-        return;
-    }
-
-    // Valid input
-    cityInput.classList.remove('input-error');
-    searchBtn.disabled = false;
-
     if (query.length < 2) {
         hideSuggestions();
         return;
@@ -633,18 +606,10 @@ window.addEventListener('DOMContentLoaded', () => {
 
 function handleSearch() {
     const city = cityInput.value.trim();
-
-    if (!isValidCity(city)) {
-        cityInput.classList.add('input-error');
-        showError('Please enter a valid city name.');
-        return;
+    if (city) {
+        fetchWeatherData(city);
     }
-
-    cityInput.classList.remove('input-error');
-    fetchWeatherData(city);
 }
-
-function detectUserLocation() {
 function getLocationErrorMessage(error) {
     if (!error) return 'Unable to get your location.';
 
diff --git a/public/style.css b/public/style.css
index d18d374..f0c35a7 100644
--- a/public/style.css
+++ b/public/style.css
@@ -894,7 +894,7 @@ body.dark-mode .hourly-toggle.active {
 }
 
 .graph-grid-line {
-    stroke: rgba(255, 255, 255, 0.12);
+    stroke: rgba(102, 126, 234, 0.15);
     stroke-width: 1;
     stroke-dasharray: 5 5;
 }
@@ -923,20 +923,15 @@ body.dark-mode .hourly-toggle.active {
     opacity: 0;
 }
 
-.graph-point-label,
-.trend-value-label {
-    fill: #ffffff;
-    font-size: 13px;
+.graph-point-label {
+    fill: #2d3748;
+    font-size: 12px;
     font-weight: 700;
-    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.45);
-    paint-order: stroke;
-    stroke: rgba(0, 0, 0, 0.35);
-    stroke-width: 1px;
 }
 
 .graph-axis-label {
-    fill: rgba(255, 255, 255, 0.88);
-    font-size: 12px;
+    fill: #718096;
+    font-size: 11px;
     font-weight: 600;
 }
 
@@ -1152,12 +1147,12 @@ body.dark-mode .hourly-toggle.active {
     animation: popIn 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
 }
 
-/* .trend-value-label {
+.trend-value-label {
     paint-order: stroke;
     stroke: #f8fbff;
     stroke-width: 5px;
     stroke-linejoin: round;
-} */
+}
 
 .trend-stats {
     display: grid;
@@ -2064,20 +2059,6 @@ body.dark-mode .loading p {
 }
 
 @keyframes spin {
-    100% {
-        transform: rotate(360deg);
-    }
-}
-
-.input-error {
-    border: 1px solid #ff4d4f !important;
-    box-shadow: 0 0 10px rgba(255, 77, 79, 0.35);
-    transition: all 0.2s ease;
-}
-
-#error-message {
-    transition: all 0.2s ease;
-}
     100% { transform: rotate(360deg); }
 }