// API key for OpenWeatherMap
const API_KEY = 'demo123456789';
const BASE_URL = 'https://api.openweathermap.org/data/2.5';
// DOM elements
const cityInput = document.getElementById('city-input');
const searchBtn = document.getElementById('search-btn');
const cityName = document.getElementById('city-name');
const temperature = document.getElementById('temperature');
const weatherIcon = document.getElementById('weather-icon');
const description = document.getElementById('description');
const humidity = document.getElementById('humidity');
const wind = document.getElementById('wind');
const forecastContainer = document.getElementById('forecast-container');
// Event listeners
searchBtn.addEventListener('click', () => {
const city = cityInput.value.trim();
if (city) {
getWeatherData(city);
}
});
cityInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
const city = cityInput.value.trim();
if (city) {
getWeatherData(city);
}
}
});
// Default city on load
document.addEventListener('DOMContentLoaded', () => {
getWeatherData('New York');
});
// Get weather data
async function getWeatherData(city) {
try {
// Get current weather
const currentResponse = await fetch(`${BASE_URL}/weather?q=${city}&units=metric&appid=${API_KEY}`);
const currentData = await currentResponse.json();
// Display current weather
displayCurrentWeather(currentData);
// Get forecast data
const forecastResponse = await fetch(`${BASE_URL}/forecast?q=${city}&units=metric&appid=${API_KEY}`);
const forecastData = await forecastResponse.json();
// Display forecast
displayForecast(forecastData);
// Clear input
cityInput.value = '';
} catch (error) {
console.error('Error fetching weather data:', error);
alert('Could not fetch weather data. Please try again.');
}
}
// Display current weather
function displayCurrentWeather(data) {
cityName.textContent = `${data.name}, ${data.sys.country}`;
temperature.textContent = `${Math.round(data.main.temp)}°C`;
description.textContent = data.weather[0].description;
humidity.textContent = `${data.main.humidity}%`;
wind.textContent = `${data.wind.speed} m/s`;
// Display weather icon
const iconCode = data.weather[0].icon;
weatherIcon.innerHTML = `![${data.weather[0].description}](https://openweathermap.org/img/wn/${iconCode}@2x.png)
`;
}
// Display 5-day forecast
function displayForecast(data) {
// Clear previous forecast
forecastContainer.innerHTML = '';
// Group forecast by day
const dailyForecasts = {};
data.list.forEach(item => {
const date = new Date(item.dt * 1000).toLocaleDateString('en-US', { weekday: 'short' });
if (!dailyForecasts[date]) {
dailyForecasts[date] = item;
}
});
// Create forecast elements
Object.values(dailyForecasts).slice(0, 5).forEach(item => {
const date = new Date(item.dt * 1000).toLocaleDateString('en-US', { weekday: 'short' });
const iconCode = item.weather[0].icon;
const temp = Math.round(item.main.temp);
const forecastItem = document.createElement('div');
forecastItem.className = 'forecast-item';
forecastItem.innerHTML = `
${date}
![${item.weather[0].description}](https://openweathermap.org/img/wn/${iconCode}.png)
${temp}°C
${item.weather[0].description}
`;
forecastContainer.appendChild(forecastItem);
});
}
// Log a message to indicate the app is ready
console.log('Weather Dashboard is ready to use!');