app.js

const api = {
  key: "b84be598b7ca04f0f84efa8c8c8ba92d",
  base: "https://api.openweathermap.org/data/2.5/",
};

const searchForm = document.querySelector(".search-form");
const searchBox = document.querySelector(".search-box");

searchForm.addEventListener("submit", function (e) {
  e.preventDefault();
  getResults(searchBox.value);
});

function getResults(query) {
  const mainGlass = document.querySelector(".main-glass");
  mainGlass.classList.add("weather-animating");
  setTimeout(() => {
    fetch(
      `${api.base}weather?q=${encodeURIComponent(query)}&units=metric&appid=${
        api.key
      }`
    )
      .then((res) => res.json())
      .then((weather) => {
        if (weather.cod === 200) {
          displayResults(weather);
        } else {
          showError();
        }
        setTimeout(() => {
          mainGlass.classList.remove("weather-animating");
        }, 100);
      });
  }, 350);
}

function displayResults(weather) {
  document.querySelector(
    ".city"
  ).textContent = `${weather.name}, ${weather.sys.country}`;
  document.querySelector(".date").textContent = dateBuilder(new Date());

  const iconCode = weather.weather[0].icon;
  const iconMap = {
    "01d": "clear-day.svg",
    "01n": "clear-night.svg",
    "02d": "partly-cloudy-day.svg",
    "02n": "partly-cloudy-night.svg",
    "03d": "cloudy.svg",
    "03n": "cloudy.svg",
    "04d": "cloudy.svg",
    "04n": "cloudy.svg",
    "09d": "rain.svg",
    "09n": "rain.svg",
    "10d": "rain.svg",
    "10n": "rain.svg",
    "11d": "thunderstorm.svg",
    "11n": "thunderstorm.svg",
    "13d": "snow.svg",
    "13n": "snow.svg",
    "50d": "fog.svg",
    "50n": "fog.svg",
  };
  const iconFile = iconMap[iconCode] || "cloudy.svg";
  const iconUrl = `img/weather-icons/${iconFile}`;
  const weatherIcon = document.querySelector(".weather-icon");
  weatherIcon.innerHTML = `<img src=\"${iconUrl}\" alt=\"${weather.weather[0].description}\" style=\"width:100px;height:100px;\">`;

  document.querySelector(".temp").innerHTML = `${Math.round(
    weather.main.temp
  )}<span style='font-size:1.2rem;'>°C</span>`;
  document.querySelector(".weather-desc").textContent =
    weather.weather[0].description;
  document.querySelector(".feels-like").textContent = `${Math.round(
    weather.main.feels_like
  )}°C`;
  document.querySelector(".hi-low-temp").textContent = `${Math.round(
    weather.main.temp_max
  )}° / ${Math.round(weather.main.temp_min)}°C`;
  document.querySelector(".humidity").textContent = `${weather.main.humidity}%`;
  document.querySelector(".wind").textContent = `${Math.round(
    weather.wind.speed
  )} m/s ${degToCompass(weather.wind.deg)}`;
  document.querySelector(
    ".pressure"
  ).textContent = `${weather.main.pressure} hPa`;
  document.querySelector(".visibility").textContent = weather.visibility
    ? `${(weather.visibility / 1000).toFixed(1)} km`
    : "-";
  document.querySelector(".sunrise").textContent = timeBuilder(
    new Date(weather.sys.sunrise * 1000)
  );
  document.querySelector(".sunset").textContent = timeBuilder(
    new Date(weather.sys.sunset * 1000)
  );

  setWeatherBackground(weather.weather[0].main);
}

function showError() {
  const funnyMessages = [
    "Oops! This city is hiding in the clouds ☁️",
    "Can't find it... maybe it's on Mars? 🚀",
    "Mysterious city! Try again, secret agent 🕵️‍♂️",
    "Even Siri doesn't know this one! 😅",
    "Maybe it's in Wonderland 🐇",
    "404: City not found, but the sun is still shining! 🌞",
    "Did you type with your elbows? Try again! 🤗",
    "This city is rarer than a unicorn 🦄",
    "Not found, but here's a virtual hug! 🤗",
    "Maybe it's underwater with SpongeBob 🧽",
  ];
  const msg = funnyMessages[Math.floor(Math.random() * funnyMessages.length)];
  document.querySelector(".city").textContent = msg;
  document.querySelector(".date").textContent = "";
  document.querySelector(".weather-icon").innerHTML = "";
  document.querySelector(".temp").textContent = "";
  document.querySelector(".weather-desc").textContent = "";
  document.querySelector(".feels-like").textContent = "";
  document.querySelector(".hi-low-temp").textContent = "";
  document.querySelector(".humidity").textContent = "";
  document.querySelector(".wind").textContent = "";
  document.querySelector(".pressure").textContent = "";
  document.querySelector(".visibility").textContent = "";
  document.querySelector(".sunrise").textContent = "";
  document.querySelector(".sunset").textContent = "";
}

function dateBuilder(d) {
  const months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  const days = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday",
  ];
  return `${days[d.getDay()]} ${d.getDate()} ${
    months[d.getMonth()]
  } ${d.getFullYear()}`;
}

function timeBuilder(d) {
  return d.toLocaleTimeString([], { hour: "2-digit", minute: "2-digit" });
}

function degToCompass(num) {
  const val = Math.floor(num / 22.5 + 0.5);
  const arr = [
    "N",
    "NNE",
    "NE",
    "ENE",
    "E",
    "ESE",
    "SE",
    "SSE",
    "S",
    "SSW",
    "SW",
    "WSW",
    "W",
    "WNW",
    "NW",
    "NNW",
  ];
  return arr[val % 16];
}

function setWeatherBackground(main) {
  const body = document.body;
  let bg = "";
  let blur = "";
  switch (main.toLowerCase()) {
    case "clear":
      bg = "linear-gradient(135deg, #f8fafc 0%, #ffe082 100%)";
      blur = "blur(8px)";
      break;
    case "clouds":
      bg = "linear-gradient(135deg, #dbeafe 0%, #a7bfe8 100%)";
      blur = "blur(10px)";
      break;
    case "rain":
    case "drizzle":
      bg = "linear-gradient(135deg, #b6c6e5 0%, #6e7fa3 100%)";
      blur = "blur(14px)";
      break;
    case "thunderstorm":
      bg = "linear-gradient(135deg, #616161 0%, #9bc5c3 100%)";
      blur = "blur(16px)";
      break;
    case "snow":
      bg = "linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%)";
      blur = "blur(12px)";
      break;
    case "mist":
    case "fog":
      bg = "linear-gradient(135deg, #cfd9df 0%, #e2ebf0 100%)";
      blur = "blur(18px)";
      break;
    default:
      bg = "linear-gradient(135deg, #e0e7ef 0%, #cfd9df 100%)";
      blur = "blur(8px)";
  }
  // Smooth background transition
  body.style.transition =
    "background 0.9s cubic-bezier(.4,0,.2,1), backdrop-filter 0.7s cubic-bezier(.4,0,.2,1)";
  body.style.background = bg;
  body.style.backdropFilter = blur;
}

getResults("Milan");

// Mobile: show inline submit button in input
function isMobile() {
  return window.innerWidth <= 600;
}

function createMobileInput() {
  const form = document.querySelector(".search-form");
  form.innerHTML = "";
  const inputWrap = document.createElement("div");
  inputWrap.className = "input-wrap";
  const input = document.createElement("input");
  input.type = "text";
  input.placeholder = "Cerca città...";
  input.className = "search-box";
  input.setAttribute("aria-label", "City name");
  input.autocomplete = "off";
  inputWrap.appendChild(input);
  const btn = document.createElement("button");
  btn.type = "submit";
  btn.className = "input-btn";
  btn.innerHTML =
    '<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg"><circle cx="14" cy="14" r="14" fill="#007aff"/><path d="M9 14H19" stroke="white" stroke-width="2.5" stroke-linecap="round"/></svg>';
  inputWrap.appendChild(btn);
  form.appendChild(inputWrap);
}

function createDesktopInput() {
  const form = document.querySelector(".search-form");
  form.innerHTML = "";
  const input = document.createElement("input");
  input.type = "text";
  input.placeholder = "Enter city...";
  input.className = "search-box";
  input.setAttribute("aria-label", "City name");
  input.autocomplete = "off";
  form.appendChild(input);
  const btn = document.createElement("button");
  btn.type = "submit";
  btn.className = "search-btn-desktop";
  btn.innerHTML = "Search";
  form.appendChild(btn);
}

function updateInputUI() {
  if (isMobile()) {
    createMobileInput();
  } else {
    createDesktopInput();
  }
}

window.addEventListener("resize", updateInputUI);
document.addEventListener("DOMContentLoaded", updateInputUI);

// Re-bind search event after input UI changes
function bindSearchEvent() {
  const form = document.querySelector(".search-form");
  const input = form.querySelector(".search-box");
  form.onsubmit = function (e) {
    e.preventDefault();
    getResults(input.value);
  };
}
window.addEventListener("resize", bindSearchEvent);
document.addEventListener("DOMContentLoaded", bindSearchEvent);