const app = document.querySelector('.weather.app');
const temp = document.querySelector('.temp');
const dateOutput = document.querySelector('.date');
const timeOutput = document.querySelector('.time');
const conditionOutput = document.querySelector('.condition');
const nameOutput = document.querySelector('.name');
const icon = document.querySelector('.icon');
const cloudOutput = document.querySelector('.cloud');
const humidityOutput = document.querySelector('.humidity');
const windOutput = document.querySelector('.wind');
const form = document.getElementById('locationInput');
const search = document.querySelector('.search');
const btn = document.querySelector('.submit');
const cities = document.querySelector('.city');

//Default location on load
let cityInput = "Tunis";

//Add click event to cities in the panel
cities.forEach((city) => {
  city.addEventListener('click', (e) => {
    cityInput = e.target.textContent;
    fetchWeatherData();
    app.style.opacity = "0";
  });
})

//Add submit event to the form
form.addEventListener('submit', (e) => {
  if (search.value.length == 0) {
    alert('PLease type in a city name');
  } else {
    //Change from default city to the one the user searched
    cityInput = search.value;
    fetchWeatherData();
    //Clear the input field
    search.value = "";
    //Fade out the app
    app.style.opacity = "0";
  }

  //Prevents default beyavior of the form
  e.preventDefault();
})

//Get weekdays
function dayOfTheWeek(day, month, year) {
  const weekday = [
    "Sunday",
    "Monday",
    "Tuesday",
    "Wednesday",
    "Thursday",
    "Friday",
    "Saturday"
  ];
  return weekday[new Date(`${day}/${month}/${year}`).getDay()];
}

//Fetching weather data from weather API
function fetchWeatherData() {
  fetch('http://api.weatherapi.com/v1/current.json?key=edfdd9e1ff7a462f99104631221003&q=${cityInput}')
    .then(response => response.json())
    .then(data => {
      console.log(data);

      temp.textContent = data.current.temp_c + "°";
      conditionOutput.textContent = data.current.condition.text;

      const date = data.location.localtime;
      const y = parseInt(date.substr(0, 4));
      const m = parseInt(date.substr(5, 2));
      const d = parseInt(date.substr(8, 2));
      const time = date.substr(11);

      dateOutput.innerHTML = `${dayOfTheWeek(d, m, y)} ${d}, ${m}, ${y}`;
      timeOutput.innerHTML = time;
      nameOutput.innerHTML = data.location.name;

      const iconId = data.current.condition.icon.substr("//cdn.weatherapi.com/weather/64x64/".length);

      icon.src = "./icons" + iconId;

      //Add weather details
      cloudOutput.textContent = data.current.cloud + "%";
      humidityOutput.textContent = data.current.humidity + "%";
      windOutput.textContent = data.current.wind_kph + "km/h";

      let timeOfDay = "day";
      const code = data.current.condition.code;

      if (!data.current.is_day) {
        timeOfDay = "night";
      }

      if (code == 1000) {
        app.style.backgroundImage = `url(./images/${timeOfDay}/clear.jpg)`;
        btn.style.background = "#e5ba92";
        if (timeOfDay == "night") {
          btn.style.background = "#181e27";
        }
      } else if (
        code == 1003 ||
        code == 1006 ||
        code == 1009 ||
        code == 1030 ||
        code == 1069 ||
        code == 1087 ||
        code == 1135 ||
        code == 1273 ||
        code == 1276 ||
        code == 1279 ||
        code == 1282
      ) {
        app.style.backgroundImage = `url(./images/${timeOfDay}/cloudy.jpg)`;
        btn.style.background = "fa6d1b";
        if (timeOfDay == "night") {
          btn.style.background = "#181e27";
        }
      } else if (
        code == 1063 ||
        code == 1069 ||
        code == 1072 ||
        code == 1150 ||
        code == 1153 ||
        code == 1180 ||
        code == 1183 ||
        code == 1186 ||
        code == 1189 ||
        code == 1192 ||
        code == 1195 ||
        code == 1204 ||
        code == 1207 ||
        code == 1240 ||
        code == 1243 ||
        code == 1246 ||
        code == 1249 ||
        code == 1252
      ) {
        app.style.backgroundImage = `url(./images/${timeOfDay}/rainy.jpg)`;
        btn.style.background = "#647d75";
        if (timeOfDay == "night") {
          btn.style.background = "#325c80";
        }
      } else {
        app.style.backgroundImage = `url(./images/${timeOfDay}/snowy.jpg)`;
        btn.style.background = "#4d72aa";
        if (timeOfDay == "night") {
          btn.style.background = "#1b1b1b";
        }
      }
      app.style.opacity = "1";
    })
    .catch(() => {
      alert("Location don't exist, try something else");
      app.style.opacity = "1";
    });
}

fetchWeatherData();
app.style.opacity = "1";

<body>
  <div class="weather-app">
    <div class="container">
      <h3 class="brand">the weather</h3>
      <div>
        <h1 class="temp">16&#176;</h1>
        <div class="city-time">
          <h1 class="name">Tunis</h1>
          <small>
              <span class="time">00:00</span>
              -
              <span class="date">Monday Mar 16</span>
            </small>
        </div>
        <div class="weather">
          <img src="./icons/day/113.png" alt="icon" class="icon" width="50" height="50" />
          <span class="condition">Clear</span>
        </div>
      </div>
    </div>
    <div class="panel">
      <form id="locationInput">
        <input type="text" class="search" placeholder="Search location" />
        <button class="submit" type="submit">
            <i class="fas fa-search"></i>
          </button>
      </form>

      <ul class="cities">
        <li class="city">Algiers</li>
        <li class="city">Berlin</li>
        <li class="city">Rio</li>
        <li class="city">Moscow</li>
      </ul>
      <ul class="details">
        <h4>Weather Details</h4>
        <li>
          <span>Clear</span>
          <span class="cloud">78%</span>
        </li>
        <li>
          <span>Himidity</span>
          <span class="humidity">42%</span>
        </li>
        <li>
          <span>Wind</span>
          <span class="wind">5km/h</span>
        </li>
      </ul>
    </div>
  </div>
</body>