// an array of data we want to render to the DOM
const articles = [
  {
    title: "my nice article",
    summary:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, omnis!",
    image: "https://source.unsplash.com/400x300?0",
  },
  {
    title: "another article",
    summary:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, omnis!",
    image: "https://source.unsplash.com/400x300?1",
  },
  {
    title: "so many articles",
    summary:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, omnis!",
    image: "https://source.unsplash.com/400x300?2",
  },
  {
    title: "my nice article",
    summary:
      "Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus, omnis!",
    image: "https://source.unsplash.com/400x300?3",
  },
];

const containerElement1 = document.querySelector("#container1");

// this function uses standard createElement to do DOM manipulation
// it'll only get longer as we add more stuff to the card element 🙃
function createCard(article) {
  const { title, summary, image } = article;
  
  // create all the elements we need and set their properties based on the data passed in to this function
  const articleElement = document.createElement("article");
  articleElement.classList.add("card");
  
  const bodyElement = document.createElement("div");
  bodyElement.classList.add("card__body");
  
  const titleElement = document.createElement("h2");
  titleElement.textContent = title;
  titleElement.classList.add("card__title");
  
  const imageElement = document.createElement("img");
  imageElement.src = image;
  imageElement.alt = "";
  imageElement.classList.add("card__image")
  
  const summaryElement = document.createElement("p");
  summaryElement.textContent = summary;
  
  
  // put each child element into the parent <article>
  articleElement.appendChild(imageElement);
  bodyElement.appendChild(titleElement);
  bodyElement.appendChild(summaryElement);
  articleElement.appendChild(bodyElement);
  
  // put the <article> onto the page
  containerElement1.appendChild(articleElement);
}

const containerElement2 = document.querySelector("#container2");

// this function uses the <template> defined in the HTML
// it'll only get longer if we need to add more dynamic properties
function createCardUsingTemplate(article) {
  const { title, summary, image } = article;
  // get the template for articles (from the HTML)
  const template = document.querySelector("#articleTemplate");
  // clone the content of the template (returns a DocumentFragment)
  const domFragment = template.content.cloneNode(true);
  // we only need to add the dynamic properties inside the fragment
  // since all the static ones (e.g. styling classNames) are set in the template
  domFragment.querySelector("h3").textContent = title;
  domFragment.querySelector("img").src = image;
  domFragment.querySelector("p").textContent = summary;
  // put the fragment onto the page
  containerElement2.appendChild(domFragment);
}

articles.forEach(createCard);
articles.forEach(createCardUsingTemplate);