<button type="button" class="profile__add-button" title="Добавить карточку">
       
    <!-- Grid-element -->
    <section class="grid-element">
      <div class="elements">
      </div>
    </section>
    <!-- /Grid-element -->
  


  <template id="element">
    <div class="element">
      <img type="button" class="element__image"></img>
      <div class="element__info">
        <button type="button" class="element__delete"></button>
        <h2 class="element__title"></h2>
        <buttvon type="button" class="element__like "></buttvon>
      </div>
    </div>
  </template>

  <!-- Popup_add-->
  <div class="popup" id="popup-add">
    <div class="popup__container" id="form-add">
      <button class="popup__container-close popup__container-close_add" title="Закрыть"></button>
      <h3 class="popup__container-info">Новое место</h3>
      <form class="popup__form">
        <input type="text" placeholder="Название" class="popup__form-input popup__form-input_title" required>
        <input type="text" placeholder="Ссылка на картинку" class="popup__form-input  popup__form-input_link" required>
        <button type="submit" title="сохранить" class="popup__form-submit popup__form-submit_add"
          value="Сохранить">Сохранить</button>
      </form>
    </div>
  </div>
  <!-- /Popup_add -->

  <!--popup_img -->
  <div class="popup " id="popup_photo">
    <div class="popup__images">
      <img alt="#" class="popup__image">
      <p class="popup__photo-text"></p>
      <button class="popup__container-close popup__container-close_photo" title="Закрыть"></button>
    </div>
  </div>

const initialCards = [{
  name: 'Архыз',
  link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/arkhyz.jpg'
}, {
  name: 'Челябинская область',
  link: 'https://pictures.s3.yandex.net/frontend-developer/cards-compressed/chelyabinsk-oblast.jpg'
}]

// Открытие и закрытие блока popup add
const popEmt = document.querySelector('#popup-add');
const btnAdd = document.querySelector('.profile__add-button');
const popLockAdd = document.querySelector('.popup__container-close_add');
btnAdd.addEventListener('click', function(){popEmt.classList.add('popup_opened')});
popLockAdd.addEventListener('click', function () { popEmt.classList.remove('popup_opened')});

const container = document.querySelector('.page');
const elems = container.querySelector(".elements");
const Template = document.querySelector("#element").content;
const cardElems = initialCards.map(function (item) {
  return {
    name: item.name,
    link: item.link
  };
});
function Cards() {
  cardElems.forEach(renderCard);
}

function renderCard({ name, link }) {
  const Element = Template.querySelector(".element").cloneNode(true);
  Element.querySelector(".element__title").textContent = name;
  Element.querySelector(".element__image").src = link;
  elems.prepend(Element);
}
Cards();  
const addButton = container.querySelector('.popup__form-submit_add');
function addCard(titleValue, linkValue) {
  if(titleValue && linkValue) {
        const inpTemplate = document.querySelector("#element").content;
        const inpElement = inpTemplate.querySelector(".element").cloneNode(true);
        elems.prepend(inpElement);
        inpElement.querySelector(".element__title").textContent = titleValue;
        inpElement.querySelector(".element__image").src = linkValue;
  }
}
addButton.addEventListener('click', function (evt)
 {evt.preventDefault();
  const title = document.querySelector('.popup__form-input_title');
  const link = document.querySelector('.popup__form-input_link');
  addCard(title.value, link.value);
popEmt.classList.remove('popup_opened');
title.value = '';
link.value = '';
});
formElement.addEventListener('submit', addButton);

document.addEventListener('click', ({ target: x }) => {
  if (x.classList.contains('element__image')) {
    const y = [...document.querySelectorAll('.element__image')].indexOf(x);
    popImg.classList.add('popup_opened')
    console.log(y)
  }
});
const popImg= document.querySelector('#popup_photo'); 
const Img= document.querySelector('.popup__image'); 
const Disc = document.querySelector('.popup__title');
const closeImg = document.querySelector('.popup__container-close_photo')
function openPopupImage(e) {
  Img.src = e.target.src;
  Img.alt = e.target.alt; 
  Disc.textContent = e.target.alt;
  openPopup(popImg);
};

function openPopup(popup) { 
  popImg.classList.add("popup_opened");
}
closeImg.addEventListener('click',function(){
  popImg.classList.remove('popup_opened');
})