Thuta Learning
ProjectsProgrammingbeginner

Weather App

Relax. We'll talk through this in plain words โ€” no textbook voice.

๐ŸŒค๏ธ Weather App - Fetch and display weather data from API. Advanced beginner to intermediate!

๐Ÿ“š Concepts Covered:

โ€ข Fetch API / Async/Await

โ€ข JSON parsing

โ€ข Error handling

โ€ข Template literals

โ€ข Object destructuring

โœจ Features:

โ€ข Get weather by city

โ€ข Display temperature

โ€ข Show conditions

โ€ข Error handling

โ€ข Format output

javascript
// Weather App (Simulated API)

class WeatherApp {
    constructor() {
        // Simulated weather database
        this.weatherData = {
            "Yangon": { temp: 32, condition: "Sunny", humidity: 70, wind: 15 },
            "Mandalay": { temp: 35, condition: "Hot", humidity: 50, wind: 10 },
            "Naypyidaw": { temp: 30, condition: "Cloudy", humidity: 65, wind: 12 }
        };
    }
    
    async getWeather(city) {
        // Simulate API delay
        await new Promise(resolve => setTimeout(resolve, 100));
        
        const data = this.weatherData[city];
        if (!data) {
            throw new Error(`Weather data for "${city}" not found`);
        }
        
        return {
            city: city,
            temperature: data.temp,
            tempFahrenheit: this.celsiusToFahrenheit(data.temp),
            condition: data.condition,
            humidity: data.humidity,
            wind: data.wind
        };
    }
    
    celsiusToFahrenheit(celsius) {
        return Math.round((celsius * 9/5) + 32);
    }
    
    formatWeather(weather) {
        return `
๐ŸŒค๏ธ  Weather in ${weather.city}
โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”
๐ŸŒก๏ธ  Temperature: ${weather.temperature}ยฐC (${weather.tempFahrenheit}ยฐF)
โ˜๏ธ  Condition: ${weather.condition}
๐Ÿ’ง Humidity: ${weather.humidity}%
๐Ÿ’จ Wind: ${weather.wind} km/h
`;
    }
}

// Demo usage with async/await
const app = new WeatherApp();

async function displayWeather() {
    try {
        const weather1 = await app.getWeather("Yangon");
        console.log(app.formatWeather(weather1));
        
        const weather2 = await app.getWeather("Mandalay");
        console.log(app.formatWeather(weather2));
        
        // This will throw an error
        await app.getWeather("Tokyo");
    } catch (error) {
        console.log(`โŒ Error: ${error.message}`);
    }
}

displayWeather();
You should see
๐ŸŒค๏ธ Weather in Yangon โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ” ๐ŸŒก๏ธ Temperature: 32ยฐC (90ยฐF) โ˜๏ธ Condition: Sunny ๐Ÿ’ง Humidity: 70% ๐Ÿ’จ Wind: 15 km/h ๐ŸŒค๏ธ Weather in Mandalay โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ”โ” ๐ŸŒก๏ธ Temperature: 35ยฐC (95ยฐF) โ˜๏ธ Condition: Hot ๐Ÿ’ง Humidity: 50% ๐Ÿ’จ Wind: 10 km/h โŒ Error: Weather data for "Tokyo" not found