how to implement the creation and addition of a card in JS [closed]

I am making a project according to which I should have the functions of creating a card (createCard), deleting (clickDelete) and adding (render) cards to dom-elements. Also, the func createCard must accept a click listener to delete the card. I have such a code, which outputs an error – ReferenceError: the carddata is not defined(in the render function) and the cards are not displayed. please help the beginner figure it out.

const cardTemplate = document.querySelector('#card-template').content;
const cardList = document.querySelector('.places__list');



// func createCard

function createCard(cardData, deleteCard) { 
  const cardElement = cardTemplate.cloneNode(true);
  const cardTitle = cardElement.querySelector('.card__title');
  const cardImage = cardElement.querySelector('.card__image');
  cardTitle.textContent = cardData.name;
  cardImage.alt = cardData.name;
  cardImage.src =  cardData.link;
  cardData.querySelector.querySelector('.card__delete-button').addEventListener('click', () =>{
    deleteCard(cardElement);
  });
  
  return cardElement;
  
};


//delete card
function clickDelete (event){
  const currentCard = event.target.closest('.card');
  currentCard.remove();
}

// render 
function render() {
  initialCards.forEach(createCard);
  const cardElement = createCard(cardData, deleteCard);
  cardList.append(cardElement);
}

render();

I want to create cards that I can delete with a button and display on the page.