БЛОГ НА HUSL


почему не рендерится маркап this.#renderQuickWeather(data, this.#parentElPopUp);

Автор вопроса: Дмитрий 

constructor() {
  this.#checkPosition();
  this.#addHandler();

  this.#getQuickWeather('Stambul');
  this.#getQuickWeather('Paris');
  this.#getQuickWeather('Los Angeles');


  this.#addNewCity();

}

async# getQuickWeather(city) {
  try {
    const res = await fetch(`http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}`);
    if (!res.ok) {
      throw new Error(`HTTP error! Status: ${res.status}`);
    }
    const data = await res.json();

    this.#renderQuickWeather(data, this.#parentQuickWeather);
    this.#renderQuickWeather(data, this.#parentElPopUp);

    return data;
  } catch (err) {
    console.error('Error fetching API:', err);
    this.#renderError(err)
  }
}

#
addNewCity() {
  this.#addItemButton.addEventListener('click', () => {
    this.#renderPopUp();
  })
}

#
closePopUp() {
  document.querySelector('.closeModal').addEventListener('click', () => {
    this.#wrapperModal.style.display = 'none';
  });
}

#
renderQuickWeather(data, parentElement) {
  const markup = `<div class="weather-card ${data.current.is_day ? 'day' : 'night'}">
            <div class="line-1">
                <div class="temp-cond-wrapper">
                    <span class="temp">${Math.trunc(data.current.temp_c)}°</span>
                    <p class="cond">${data.current.condition.text}</p>
                </div>
                <img src="https:${data.current.condition.icon}" alt="" class="cond-img">
            </div>
                <div class="line-2">
                    <img src="img/icon.svg" alt="" class="where-city">
                    <span class="city">${data.location.name}</span>
                </div>
        </div>`
  console.log(data);
  parentElement.insertAdjacentHTML('afterbegin', markup);

}

#
renderPopUp() {
  const markup = `
            <div class="header-pop-up">
                <h2 class="addCity">Add a new city</h2>
                <button class="closeModal"><img src="img/closeBtn.svg" alt=""></button>
            </div>
                <div class="search-box">
                    <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                        <path
                        d="M15.9167 15.4165L18.8334 18.3332M18.0001 9.58317C18.0001 5.21092 14.4557 1.6665 10.0834 1.6665C5.71116 1.6665 2.16675 5.21092 2.16675 9.58317C2.16675 13.9554 5.71116 17.4998 10.0834 17.4998C14.4557 17.4998 18.0001 13.9554 18.0001 9.58317Z"
                        stroke="#014170" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <input type="text" placeholder="Search a city" class="pop-up-input">
                </div>
                    <p class="title-section">Popular cities</p>
                <div class="city-list">
                
                </div>
            `
  this.#Modal.innerHTML = markup;
  this.#wrapperModal.style.display = 'flex';

  this.#closePopUp();
}
/* Pop-up */

.pop-up-add-item {
  height: 65rem;
  width: 68rem;
  background: #F8F8F8;
  border-radius: 30px;
  padding: 30px;
  z-index: 1001;
  /* ставим на передний план */
}

.header-pop-up {
  display: flex;
  justify-content: space-between;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  /* полупрозрачный черный фон */
  backdrop-filter: blur(5px);
  /* размытие фона */
  z-index: 1000;
  /* ставим на передний план */
  display: flex;
  /* Добавляем Flexbox для центрирования */
  justify-content: center;
  /* Центрируем по горизонтали */
  align-items: center;
}

.search-box .pop-up-input {
  width: 100%;
  padding: 16px 26px;
  border: none;
  border-radius: 20px;
  background-color: #fff;
  color: #000;
  font-size: 16px;
  outline: none;
  padding-left: 50px;
}

.hidden {
  display: none;
}

.addCity {
  font-size: 3rem;
  font-weight: 500;
}

.closeModal {
  background: transparent;
  border: none;
  cursor: pointer;
}

.city-list {
  display: grid;
  grid-template-columns: repeat(2, 33rem);
  grid-template-rows: repeat(2, 21rem);
  column-gap: 20px;
  row-gap: 10px;
}
<div class="modal hidden">
  <div class="pop-up-add-item">

    <div class="header-pop-up">
      <h2 class="addCity">Add a new city</h2>
      <button class="closeModal"><img src="img/closeBtn.svg" alt=""></button>
    </div>
    <div class="search-box">
      <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                                <path
                                    d="M15.9167 15.4165L18.8334 18.3332M18.0001 9.58317C18.0001 5.21092 14.4557 1.6665 10.0834 1.6665C5.71116 1.6665 2.16675 5.21092 2.16675 9.58317C2.16675 13.9554 5.71116 17.4998 10.0834 17.4998C14.4557 17.4998 18.0001 13.9554 18.0001 9.58317Z"
                                    stroke="#014170" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
      <input type="text" placeholder="Search a city" class="pop-up-input">
    </div>

    <p class="title-section">Popular cities</p>
    <div class="city-list">

    </div>
  </div>
</div>

почему не рендерится маркап this.#renderQuickWeather(data, this.#parentElPopUp) ошибок в консоли нет. сам popUp работает, но в месте где должны быть карточки с погодой - их нет Вот эта строчка работает, с ней все ок this.#renderQuickWeather(data, this.#parentQuickWeather);

     constructor() {
        this.#checkPosition();
        this.#addHandler();

        this.#getQuickWeather('Stambul');
        this.#getQuickWeather('Paris');
        this.#getQuickWeather('Los Angeles');


        this.#addNewCity();

    }

    async #getQuickWeather(city) {
        try {
            const res = await fetch(`http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=${city}`);
            if (!res.ok) {
                throw new Error(`HTTP error! Status: ${res.status}`);
            }
            const data = await res.json();

            this.#renderQuickWeather(data, this.#parentQuickWeather);
            this.#renderQuickWeather(data, this.#parentElPopUp);

            return data;
        }
        catch (err) {
            console.error('Error fetching API:', err);
            this.#renderError(err)
        }
    }

    #addNewCity() {
        this.#addItemButton.addEventListener('click', () => {
            this.#renderPopUp();
        })
    }

    #closePopUp() {
        document.querySelector('.closeModal').addEventListener('click', () => {
            this.#wrapperModal.style.display = 'none';
        });
    }

    #renderQuickWeather(data, parentElement) {
        const markup = `<div class="weather-card ${data.current.is_day ? 'day' : 'night'}">
            <div class="line-1">
                <div class="temp-cond-wrapper">
                    <span class="temp">${Math.trunc(data.current.temp_c)}°</span>
                    <p class="cond">${data.current.condition.text}</p>
                </div>
                <img src="https:${data.current.condition.icon}" alt="" class="cond-img">
            </div>
                <div class="line-2">
                    <img src="img/icon.svg" alt="" class="where-city">
                    <span class="city">${data.location.name}</span>
                </div>
        </div>`
        console.log(data);
        parentElement.insertAdjacentHTML('afterbegin', markup);
   
    }

    #renderPopUp() {
        const markup = `
            <div class="header-pop-up">
                <h2 class="addCity">Add a new city</h2>
                <button class="closeModal"><img src="img/closeBtn.svg" alt=""></button>
            </div>
                <div class="search-box">
                    <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20" fill="none">
                        <path
                        d="M15.9167 15.4165L18.8334 18.3332M18.0001 9.58317C18.0001 5.21092 14.4557 1.6665 10.0834 1.6665C5.71116 1.6665 2.16675 5.21092 2.16675 9.58317C2.16675 13.9554 5.71116 17.4998 10.0834 17.4998C14.4557 17.4998 18.0001 13.9554 18.0001 9.58317Z"
                        stroke="#014170" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
                    </svg>
                    <input type="text" placeholder="Search a city" class="pop-up-input">
                </div>
                    <p class="title-section">Popular cities</p>
                <div class="city-list">
                
                </div>
            `
        this.#Modal.innerHTML = markup;
        this.#wrapperModal.style.display = 'flex';

        this.#closePopUp();
    }
/* Pop-up */

.pop-up-add-item {
    height: 65rem;
    width: 68rem;
    background: #F8F8F8;
    border-radius: 30px;
    padding: 30px;
    z-index: 1001; /* ставим на передний план */
}

.header-pop-up {
    display: flex;
    justify-content: space-between;
}

.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* полупрозрачный черный фон */
    backdrop-filter: blur(5px); /* размытие фона */
    z-index: 1000; /* ставим на передний план */

    display: flex; /* Добавляем Flexbox для центрирования */
    justify-content: center; /* Центрируем по горизонтали */
    align-items: center; 

}

.search-box .pop-up-input {
    width: 100%;
    padding: 16px 26px;
    border: none;
    border-radius: 20px;
    background-color: #fff;
    color: #000;
    font-size: 16px;
    outline: none;
    padding-left: 50px;
}

.hidden {
    display: none;
}

.addCity {
    font-size: 3rem;
    font-weight: 500;
}

.closeModal {
    background: transparent;
    border: none;
    cursor: pointer;
}

.city-list {
    display: grid;
    grid-template-columns: repeat(2, 33rem);
    grid-template-rows: repeat(2, 21rem);
    column-gap: 20px;
    row-gap: 10px;
}
<div class="modal hidden">
                <div class="pop-up-add-item">
                 
                        <div class="header-pop-up">
                            <h2 class="addCity">Add a new city</h2>
                            <button class="closeModal"><img src="img/closeBtn.svg" alt=""></button>
                        </div>
                        <div class="search-box">
                            <svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20"
                                fill="none">
                                <path
                                    d="M15.9167 15.4165L18.8334 18.3332M18.0001 9.58317C18.0001 5.21092 14.4557 1.6665 10.0834 1.6665C5.71116 1.6665 2.16675 5.21092 2.16675 9.58317C2.16675 13.9554 5.71116 17.4998 10.0834 17.4998C14.4557 17.4998 18.0001 13.9554 18.0001 9.58317Z"
                                    stroke="#014170" stroke-width="1.5" stroke-linecap="round"
                                    stroke-linejoin="round" />
                            </svg>
                            <input type="text" placeholder="Search a city" class="pop-up-input">
                        </div>
                  
                    <p class="title-section">Popular cities</p>
                    <div class="city-list">
                         
                    </div>
                </div>
            </div>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.