Weather

Fake data

const mockWeatherData = {
  "New York": {
    temperature: "22°C",
    humidity: "56%",
    windSpeed: "15 km/h",
  },
  "Los Angeles": {
    temperature: "27°C",
    humidity: "45%",
    windSpeed: "10 km/h",
  },
  London: {
    temperature: "15°C",
    humidity: "70%",
    windSpeed: "20 km/h",
  },
};

function formatCityName(city) {
  return city
    .toLowerCase()
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}

let previousSearch = [];

document.getElementById("searchButton").addEventListener("click", () => {
  handleSearch();
});

function handleSearch(selectedCity = null) {
  const city = selectedCity || document.getElementById("citySearch").value;
  const formattedCity = formatCityName(city);
  const weatherData = mockWeatherData[formattedCity];

  const weatherDataDiv = document.getElementById("WeatherData");
  weatherDataDiv.innerHTML = "";

  if (weatherData) {
    weatherDataDiv.innerHTML = `
            <div>Temperature: ${weatherData.temperature}</div>
            <div>Humidity: ${weatherData.humidity}</div>
            <div>Wind Speed: ${weatherData.windSpeed}</div>
        `;
    if (!selectedCity && !previousSearch.includes(formattedCity)) {
      previousSearch.push(formattedCity);
      updatePreviousSearches();
    }
  } else {
    weatherDataDiv.innerHTML = "<div>City not found.</div>";
  }
}

function updatePreviousSearches() {
  const searchListDiv = document.getElementById("searchList");
  searchListDiv.innerHTML = "";
  previousSearch.forEach((city) => {
    const button = document.createElement("button");
    button.className = "city-button";
    button.innerText = city;
    button.addEventListener("click", () => handleSearch(city));
    searchListDiv.appendChild(button);
  });
}

HTML WeatherCSS WeatherTS Weather

Real fetching

const API_KEY = "API_KEY";
const BASE_URL = "https://api.openweathermap.org/data/2.5/weather";

let previousSearch = [];

document.getElementById("searchButton").addEventListener("click", () => {
  const city = document.getElementById("citySearch").value;
  fetchWeatherData(city);
});

function formatCityName(city) {
  return city
    .toLowerCase()
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}

async function fetchWeatherData(cityName) {
  const formattedCity = formatCityName(cityName);
  try {
    const response = await fetch(
      `${BASE_URL}?q=${formattedCity}&appid=${API_KEY}&units=metric`,
    );
    const weatherDataDiv = document.getElementById("WeatherData");
    weatherDataDiv.innerHTML = "";

    if (response.ok) {
      const data = await response.json();
      weatherDataDiv.innerHTML = `
                <div>Temperature: ${data.main.temp}°C</div>
                <div>Humidity: ${data.main.humidity}%</div>
                <div>Wind Speed: ${data.wind.speed} m/s</div>
            `;
      if (!previousSearch.includes(formattedCity)) {
        previousSearch.push(formattedCity);
        updatePreviousSearches();
      }
    } else {
      weatherDataDiv.innerHTML = "<div>City not found.</div>";
    }
  } catch (error) {
    console.error("Error fetching weather data:", error);
    document.getElementById("WeatherData").innerHTML =
      "<div>Error fetching data.</div>";
  }
}

function updatePreviousSearches() {
  const searchListDiv = document.getElementById("searchList");
  searchListDiv.innerHTML = "";
  previousSearch.forEach((city) => {
    const button = document.createElement("button");
    button.className = "city-button";
    button.innerText = city;
    button.addEventListener("click", () => fetchWeatherData(city));
    searchListDiv.appendChild(button);
  });
}

HTML WeatherCSS WeatherTS Weather