پروژه دوم: اپ هواشناسی 🌦️

// کلید API خود را اینجا قرار دهید
const apiKey = 'YOUR_OPENWEATHERMAP_API_KEY';

const cityInput = document.getElementById('city-input');
const searchBtn = document.getElementById('search-btn');
const weatherInfo = document.getElementById('weather-info');

async function getWeather(city) {
  if (!city) {
    alert('لطفا اسم شهر را وارد کنید.');
    return;
  }
  
  weatherInfo.innerHTML = '<p>در حال دریافت اطلاعات...</p>';
  weatherInfo.classList.remove('hidden');
  
  const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}&units=metric&lang=fa`;

  try {
    const response = await fetch(apiUrl);
    if (!response.ok) {
      throw new Error('شهر مورد نظر پیدا نشد!');
    }
    const data = await response.json();
    displayWeather(data);
  } catch (error) {
    weatherInfo.innerHTML = `<p class="text-red-500">${error.message}</p>`;
  }
}

function displayWeather(data) {
  const { name, main, weather } = data;
  weatherInfo.innerHTML = `
    <h3 class="text-2xl font-bold">${name}</h3>
    <p class="text-4xl font-bold my-2">${Math.round(main.temp)}°C</p>
    <p class="text-lg text-muted-foreground">${weather[0].description}</p>
  `;
}

searchBtn.addEventListener('click', () => {
  getWeather(cityInput.value);
});

cityInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    getWeather(cityInput.value);
  }
});