what.

what.js

const url = 'http://localhost:3000/toys';

document.addEventListener("DOMContentLoaded", () => {
  const toyCollection = document.querySelector('#toy-collection')

  fetch(url)
    .then(resp => resp.json())
    .then(toys => {
      for(const toy of toys) {
        const toyDiv = document.createElement('div')
        toyDiv.className = 'card'

        toyDiv.innerHTML = `
        <h2>${toy.name}</h2>
        <img src=${toy.image} class="toy-avatar" />
        <p>${toy.likes} Likes </p>
        <button class="like-btn">Like <3</button>
        `
        toyCollection.append(toyDiv)
      }
    })
  
  const likeBtn = document.getElementsByClassName('like-btn')
  console.log(likeBtn) // WHAT. ...?????????????????? "HTMLCollection(21)"
  const likeBtnArray = Array.from(likeBtn)
  console.log(likeBtnArray) // WHAT. .....?????????????????????? "Array(0)"
  for (const btn of likeBtn) {
    btn.addEventListener('click', (event) => {
      console.log(event.target)
      if(event.target.className == 'like-btn'){
        const parent = event.target.parentElement
        const p = parent.querySelector('p')
        const totalNumLikes = parseInt(p.textContent)
        const newNumLikes = totalNumLikes + 1
        p.textContent = newNumLikes
      }
    })
  }

});