Как адаптировать приложение

const dateField = document.querySelector('.weather-info__date')
const monthField = document.querySelector('.weather-info__month')
const cityfield = document.querySelector('.weather-cityname')
const tempField = document.querySelector('.weather-info__temp')
const weatherNameField = document.querySelector('.weather-info__name')
const humidityField = document.querySelector('#humidity span')
const windSpeedField = document.querySelector('#wind-speed span')
const countryImageFlag = document.querySelector('.weather-coutry-flag')
const loader = document.querySelector('.weather-loader')
const changeCityBtn = document.querySelector('.weather-cityname__edit')
const changeCityForm = document.querySelector('.weather-body__form')

class App {
  _country = {
    flag: '',
  }
  _weatherInfo = {
    weatherName: "Cloudy",
    city: 'New York',
    temp: 20,
    humidity: 30,
    wind: 7,
  }
  _date = {
    date: 30,
    month: 12,
  }
  constructor() {
    this.getCurrentDate()
    this.getCoords()

    changeCityBtn.addEventListener('click', () => {
      const parentform = changeCityForm.parentElement
      parentform.classList.remove('weather-body__select--hide')
    })

    changeCityForm.addEventListener('submit', (e) => {
      e.preventDefault()
      const parentform = changeCityForm.parentElement
      const cityInput = changeCityForm.querySelector('.weather-body__city-select')
      if (cityInput.value) {
        this.getWeatherData(cityInput.value)
        parentform.classList.add('weather-body__select--hide')
      }
    })

    this.updateUi()
  }

  getCoords() {
    navigator.geolocation.getCurrentPosition((position) => {
      const { latitude, longitude } = position.coords
      this.reverseGeocoding(latitude, longitude)
    }, (err) => {
      console.error(`Access to geolocation denied! ${err}`);
      this.getWeatherData('London')
    })
  }

  reverseGeocoding(lat, lon) {
    loader.classList.remove('hide')
    const link = `http://api.openweathermap.org/geo/1.0/reverse?lat=${lat.toFixed(2)}&lon=${lon.toFixed(2)}&appid=9b5db5ef440060c150d4c8077f9df4e6`
    fetch(link)
      .then(response => response.json())
      .then(data => {
        const cityName = data[0].name

        this.getWeatherData(cityName)
        loader.classList.add('hide')
      })
      .catch(err => {
        console.error(); (err);
      })
  }

  getWeatherData(cityName) {
    loader.classList.remove('hide')
    const link = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&units=metric&appid=9b5db5ef440060c150d4c8077f9df4e6`
    fetch(link)
      .then(response => response.json())
      .then(data => {
        this._weatherInfo.city = data.name
        this._weatherInfo.temp = Math.round(data.main.temp)
        this._weatherInfo.humidity = data.main.humidity
        this._weatherInfo.wind = data.wind.speed
        this._weatherInfo.weatherName = data.weather[0].main

        document.querySelectorAll('.weather-icon').forEach(img => {
          img.classList.add('hide')
        })

        document.querySelector(`[data-weather="${String(this._weatherInfo.weatherName).toLowerCase()}"]`)
          .classList.remove('hide')

        this.getCoutryData(data.sys.country)
        loader.classList.add('hide')
        this.updateUi()
      })
      .catch(err => {
        this.renderError(`City not found!`)
        setTimeout(() => {
          this.removeErorr()
        }, 2000);
        this.getWeatherData("London")
      })
  }

  renderError(msg) {
    const errorItem = document.createElement('div')
    errorItem.classList.add('error')
    errorItem.textContent = msg

    document.querySelector('.weather-body').append(errorItem)
  }

  removeErorr() {
    document.querySelector('.error').remove()
  }

  getCurrentDate() {
    const date = new Date()

    this._date.date = String(date.getDate()).padStart(2, 0)
    this._date.month = String(date.getMonth() + 1).padStart(2, 0)

    this.updateUi()
  }

  getCoutryData(countryCode) {
    loader.classList.remove('hide')
    fetch(`https://restcountries.com/v3.1/alpha/${countryCode}`)
      .then(response => response.json())
      .then(data => {
        const [countryInfo] = data
        this._country.flag = countryInfo.flags.svg

        loader.classList.add('hide')
        this.updateUi()
      })
  }


  updateUi() {
    dateField.textContent = this._date.date
    monthField.textContent = this._date.month

    cityfield.textContent = this._weatherInfo.city
    tempField.innerHTML = this._weatherInfo.temp + "°"
    humidityField.textContent = this._weatherInfo.humidity + '%'
    windSpeedField.textContent = this._weatherInfo.wind + "km/h"
    weatherNameField.textContent = this._weatherInfo.weatherName
    countryImageFlag.src = this._country.flag

    // const currentImg = document.querySelector(`[data-weather="${String(this._weatherInfo.weatherName).toLowerCase()}"]`)
    // currentImg.classList.remove('hide')
  }

}

const app = new App()

@import url('./reset.css');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;700&display=swap');

:root {
  --index: calc(1vw + 1vh);
  --wihte-color: #fff;
  --app-bg-color: #48aeff;
  --main-transition: .3s;
}

body {
  color: var(--wihte-color);
  font-family: 'Open Sans', sans-serif;
}

.weather {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
}

.weather-body {
  background-color: var(--app-bg-color);
  padding: calc(var(--index) * 0.8);
  border-radius: calc(var(--index) * 0.5);
  position: relative;
  box-shadow: -10px -7px 8px 0px rgba(34, 60, 80, 0.2) inset;
  overflow: hidden;
}

.weather-body__select {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 2;
  border-radius: calc(var(--index) * 0.5);
}

.weather-body__select--hide {
  opacity: 0;
  visibility: hidden;
}



.weather-body__form {
  background-color: var(--app-bg-color);
  border-radius: calc(var(--index) * 0.5);
  padding: calc(var(--index) * 0.8);
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--index) * 0.5);
  align-items: center;
  transform: translateY(-100%);
  transition: var(--main-transition);
}

.weather-body__select .weather-body__form {
  transform: translateY(0);
}

.weather-body__city-select {
  width: 100%;
  font-size: calc(var(--index) * 0.8);
  color: var(--wihte-color);
  border-bottom: 2px solid var(--wihte-color);
}

.weather-body__city-select::placeholder {
  color: var(--wihte-color);
}

.weather-body__form-submit {
  background-color: var(--wihte-color);
  color: var(--app-bg-color);
  font-weight: 700;
  font-size: calc(var(--index) * 0.8);
  border-radius: calc(var(--index) * 0.2);
  padding: calc(var(--index) * 0.1);
}

.weather-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-color: var(--app-bg-color);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: calc(var(--index) * 0.5);

  transition: var(--main-transition);
}

.weather-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
}

.weather-cityname {
  font-size: calc(var(--index) * 0.8);
  font-weight: 700;
}

.weather-setting-btn {
  width: calc(var(--index) * 1.2);
}

.weather-setting-btn img {
  transition: transform var(--main-transition);
  height: 100%;
  width: 100%;
}

.weather-setting-btn:hover img {
  transform: rotate(90deg);
}

.weather-cityname__edit {
  width: calc(var(--index) * 0.8);
  margin-left: calc(var(--index) * 0.3);
}

.weather-icons {
  position: relative;
  width: calc(var(--index) * 8);
  height: calc(var(--index) * 8);
  margin: 0 auto;
  margin-top: calc(var(--index) * 1);
}

.weather-coutry-flag {
  width: calc(var(--index) * 1.2);
  height: calc(var(--index) * 1.2);
  object-fit: cover;
  border-radius: 50%;
  margin-right: auto;
  margin-left: calc(var(--index) * 0.5);
}

.error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  padding: 10px 14px;
  background-color: red;
  z-index: 3;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 700;
  text-align: center;
}

.weather-icon {
  width: 100%;
  height: 100%;
  position: absolute;
  object-fit: contain;
}

.hide {
  opacity: 0;
  visibility: hidden;
}

.weather-info__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  column-gap: calc(var(--index) * 0.5);
  line-height: 1;
}

.weather-info__temp {
  font-size: calc(var(--index)* 2);
  font-weight: 700;
}

.weather-info__name {
  font-size: calc(var(--index) * 1.2);
  font-weight: 300;
}

.weather-info__time {
  font-size: calc(var(--index) * 0.75);
  font-weight: 500;
  display: flex;
  align-items: center;
}

.weather-info__list {
  margin-top: calc(var(--index) * 0.8);
  display: flex;
  flex-direction: column;
  row-gap: calc(var(--index) * 0.5);
}

.weather-info__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  column-gap: calc(var(--index) * 0.5);
}

.weather-info__item img {
  width: calc(var(--index) * 1.8);
}

.weather-info__item p {
  margin-right: auto;
  font-size: calc(var(--index) * 0.8);
  font-weight: 600;
}

.weather-info__item span {
  font-size: calc(var(--index) * 0.7);
  padding: calc(var(--index) * 0.2) calc(var(--index) * 0.4);
  border: 2px solid var(--wihte-color);
  font-weight: 600;
  border-radius: calc(var(--index) * 0.3);
}

.loader {
  border: 16px solid var(--app-bg-color);
  /* Light grey */
  border-top: 16px solid #f3f3f3;
  border-bottom: 16px solid #f3f3f3;
  /* Blue */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Weather App</title>
  <link rel="stylesheet" href="./css/style.css">
  <script src="./js/app.js" defer></script>
</head>

<body>

  <div class="weather">
    <div class="weather-body">
      <div class="weather-body__select weather-body__select--hide">
        <form class="weather-body__form">
          <input type="text" class="weather-body__city-select" placeholder="Enter city...">
          <button class="weather-body__form-submit">Submit</button>
        </form>
      </div>
      <div class="weather-loader">
        <div class="loader"></div>
      </div>
      <div class="weather-header">
        <span class="weather-cityname">New York</span>
        <button class="weather-cityname__edit">
          <img src="./img/pen.png" alt="pen icon">
        </button>
        <img class="weather-coutry-flag" src="" alt="">
        <button class="weather-setting-btn">
          <img src="./img/settings.png" alt="setting icon">
        </button>
      </div>
      <div class="weather-main">
        <div class="weather-icons">
          <img data-weather="clouds" class="weather-icon" src="./img/clouds.png" alt="clouds icon">
          <img data-weather="clear" class="weather-icon hide" src="./img/clear.png" alt="clear sky icon">
          <img data-weather="snow" class="weather-icon hide" src="./img/snow.png" alt="snow icon">
          <img data-weather="rain" class="weather-icon hide" src="./img/rain.png" alt="rain icon">
          <img data-weather="fog" class="weather-icon hide" src="./img/fog.png" alt="rain icon">
          <img data-weather="mist" class="weather-icon hide" src="./img/fog.png" alt="mist icon">
        </div>
        <div class="weather-info">
          <div class="weather-info__header">
            <span class="weather-info__temp">20&#176;</span>
            <span class="weather-info__name">Cloudy</span>
            <div class="weather-info__time">
              <span class="weather-info__date">20</span>/
              <span class="weather-info__month">12</span>
            </div>
          </div>
        </div>
        <ul class="weather-info__list">
          <li class="weather-info__item" id="humidity">
            <img src="./img/humidity.png" alt="humidity icon">
            <p>Humidity</p>
            <span>20%</span>
          </li>
          <li class="weather-info__item" id="wind-speed">
            <img src="./img/wind.png" alt="humidity icon">
            <p>Wind Speed</p>
            <span>7.7km/h</span>
          </li>
        </ul>
      </div>
    </div>
  </div>

</body>

</html>