script.js

// api keys, base url, and other variable with nuance value

const key = "92d6e5bcc79fe1ff7f4e642716c2134a";
const base_url = "https://api.openweathermap.org/data/2.5/weather?";
const search = document.querySelector(".search-icon-border");
let city;
let api_url;

// click function to dynamically changing the url

search.addEventListener("click", () => {
  city = document.querySelector("#search_input").value.trim();
  if (city) {
    api_url = `${base_url}q=${city}&appid=${key}`;
    // click function to dynamically changing the url
    api_fetch();
  } else {
    alert("please enter the city name");
  }
});

const search_input = document.getElementById("search_input");
search_input.addEventListener("keydown", (event) => {
  city = document.querySelector("#search_input").value.trim();

  if (event.key === "Enter") {
    api_url = `${base_url}q=${city}&appid=${key}`;
    if (city) {
      api_fetch();
      console.log("tha's it");
    } else {
      alert("enter city name");
    }
  }
});

const api_fetch = () => {
  fetch(api_url)
    .then((res) => res.json())
    .then((data) => {
      //   city name
      document.querySelector(".cityName").innerText = data.name;
      // icon
      const icon_code = data.weather[0].icon;
      const icon_url = `http://openweathermap.org/img/wn/${icon_code}@2x.png`;
      document.querySelector("#img").src = icon_url;
      // temperature
      document.querySelector(".weather-logo p").innerText =
        data.weather[0].description;
      const temp = Math.trunc(data.main.temp - 273.15);
      document.querySelector(".weather-logo h1").innerText = `${temp} C`;

      // weather details
      document.querySelector(
        "#humidity"
      ).innerText = `Humidity: ${data.main.humidity}`;

      document.querySelector(
        "#pressure"
      ).innerText = `Pressure: ${data.main.pressure}`;

      document.querySelector("#wind").innerText = `Wind: ${data.wind.speed}`;
    })
    .catch((error) => {
      console.log("not able to fetch data");
    });
};