🌤️ 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