Weather

tsc script.ts

type WeatherData = {
  temperature: string;
  humidity: string;
  windSpeed: string;
};

const mockWeatherData: Record<string, WeatherData> = {
  "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: string): string {
  return city
    .toLowerCase()
    .split(" ")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}

let previousSearch: string[] = [];

const searchButton = document.getElementById(
  "searchButton",
) as HTMLButtonElement;
const citySearchInput = document.getElementById(
  "citySearch",
) as HTMLInputElement;
const weatherDataDiv = document.getElementById("WeatherData") as HTMLDivElement;
const searchListDiv = document.getElementById("searchList") as HTMLDivElement;

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

function handleSearch(selectedCity: string | null = null) {
  const city = selectedCity || citySearchInput.value;
  const formattedCity = formatCityName(city);
  const weatherData = mockWeatherData[formattedCity];

  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() {
  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

type WeatherData = {
  main: {
    temp: number;
    humidity: number;
  };
  wind: {
    speed: number;
  };
};

const API_KEY = "API_KEY"; // Замените на ваш API ключ
const BASE_URL = "https://api.openweathermap.org/data/2.5/weather";

let previousSearch: string[] = [];

const searchButton = document.getElementById(
  "searchButton",
) as HTMLButtonElement;
const citySearchInput = document.getElementById(
  "citySearch",
) as HTMLInputElement;
const weatherDataDiv = document.getElementById("WeatherData") as HTMLDivElement;
const searchListDiv = document.getElementById("searchList") as HTMLDivElement;

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

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

async function fetchWeatherData(cityName: string): Promise<void> {
  const formattedCity = formatCityName(cityName);
  try {
    const response = await fetch(
      `${BASE_URL}?q=${formattedCity}&appid=${API_KEY}&units=metric`,
    );
    weatherDataDiv.innerHTML = "";

    if (response.ok) {
      const data: WeatherData = 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);
    weatherDataDiv.innerHTML = "<div>Error fetching data.</div>";
  }
}

function updatePreviousSearches(): void {
  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