Bits of .NET

🌤️ Weather App = Fetch API

Real-time data is everywhere. Step-by-step guide to build a weather app using Fetch API.

📝 Step 1-4: Setup and API

// Step 1: HTML Structure
<div class="weather-app">
    <input type="text" id="city" placeholder="Enter city name...">
    <button id="search-btn">Search</button>
    <div id="weather-data"></div>
</div>

// Step 2: API Configuration
const API_KEY = 'your-api-key';
const API_URL = 'https://api.openweathermap.org/data/2.5/weather';

// Step 3: Fetch Weather Function
async function getWeather(city) {
    const url = `${API_URL}?q=${city}&appid=${API_KEY}&units=metric`;
    
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        return data;
    } catch (error) {
        console.error('Error fetching weather:', error);
        throw error;
    }
}

// Step 4: Display Weather Data
function displayWeather(data) {
    const container = document.getElementById('weather-data');
    const weatherHtml = `
        <div class="weather-card">
            <h2>${data.name}, ${data.sys.country}</h2>
            <div class="temperature">${Math.round(data.main.temp)}°C</div>
            <div class="condition">${data.weather[0].description}</div>
            <div class="details">
                <div>Humidity: ${data.main.humidity}%</div>
                <div>Wind: ${data.wind.speed} m/s</div>
                <div>Pressure: ${data.main.pressure} hPa</div>
            </div>
        </div>
    `;
    container.innerHTML = weatherHtml;
}

📝 Step 5-8: Error Handling

// Step 5: Error Handling
function displayError(message) {
    const container = document.getElementById('weather-data');
    container.innerHTML = `
        <div class="error">
            <p>${message}</p>
            <button onclick="retrySearch()">Try Again</button>
        </div>
    `;
}

// Step 6: Search Handler
document.getElementById('search-btn').addEventListener('click', async () => {
    const city = document.getElementById('city').value.trim();
    if (!city) {
        displayError('Please enter a city name');
        return;
    }

    try {
        const data = await getWeather(city);
        displayWeather(data);
    } catch (error) {
        if (error.message.includes('404')) {
            displayError('City not found. Please check the spelling.');
        } else {
            displayError('Unable to fetch weather data. Please try again.');
        }
    }
});

// Step 7: Enter Key Support
document.getElementById('city').addEventListener('keypress', (e) => {
    if (e.key === 'Enter') {
        document.getElementById('search-btn').click();
    }
});

// Step 8: Auto-detect Location
if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(async (position) => {
        const { latitude, longitude } = position.coords;
        const url = `${API_URL}?lat=${latitude}&lon=${longitude}&appid=${API_KEY}&units=metric`;
        try {
            const response = await fetch(url);
            const data = await response.json();
            displayWeather(data);
            document.getElementById('city').value = data.name;
        } catch (error) {
            console.error('Auto-detection failed:', error);
        }
    });
}

✅ Weather App Features

• ✓ Search by city
• ✓ Auto-detect location
• ✓ Error handling
• ✓ Responsive design
• ✓ Clean UI