Как разделить функционал, вынеся добавление карточки в отдельную функцию?

//Дом элемент
const elementsList = document.querySelector(".elements__list"); 

// Добавление новых карточек. 
const createCard = (name, link) => { 
  const card = document.querySelector("#card").content.cloneNode(true); 
  const elementsImage = card.querySelector(".elements__image"); 
  elementsImage.src = `${link}`; 
  const elementsItemTitle = card.querySelector(".elements__item-title"); 
  elementsItemTitle.textContent = name; 
  elementsImage.alt = `Фотография места под названием ${name}`; 
  return card; 
}; 


// Отправка форм карт. 
const submitFormCard = (e) => { 
  e.preventDefault(); 
  const formInputNameCard = document.querySelector(".form__input_name-card"); 
  const formInputLinkCard = document.querySelector(".form__input_link-card"); 

  elementsList.prepend( 
    createCard(formInputNameCard.value, formInputLinkCard.value) 
  ); 
  formInputNameCard.value = ""; 
  formInputLinkCard.value = ""; 
  popUp.classList.remove("pop-up_opened"); 
}; 

// Полезно будет закрепить логику разделения функционала в const submitFormCard, вынеся добавление карточки в отдельную функцию. Например, renderCard, в качестве аргументов которой передавать уже созданную карточку и контейнер, в который эту карточку добавляем (elementsList в данном случае).
// Тогда эту функцию можно будет переиспользовать и в цикле добавления начальных карточек на страницу.`

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