main.js

import api from "./api";
import MovieCover, {buildEvents} from './components/movieCover';
import "./styles.css";

class App {
  constructor() {
    this.appElement = document.getElementById("app");
    this.render()
      .then((res) => this.appElement.innerHTML = res)
      .then(() => {
        buildEvents()
      });
  }

  async render() {

    const getListMovies = async () => {
      const key = 'api_key=bebe980497ad33ca4d679dc13577d180&language=en-US&page=1'
      const response = await api.get(`movie/popular?${key}`);
      const {data} = response;
      console.log(data);

      return data;

    }

    const res = await getListMovies();
    const results = res.results;

    return `
      <ul>
       <li>${MovieCover({data: results[0]})}</li>
       <li>${MovieCover({data: results[1]})}</li>
       <li>${MovieCover({data: results[2]})}</li>
       <li>${MovieCover({data: results[3]})}</li>
      </ul>
    `;
  }
}

const app = new App();

movieCover.js

const $ = (selector, callback) => {
  const list = document.querySelectorAll(selector);
  Array.prototype.forEach.call(list, callback);
}

const MovieCover = ({data}) => {

  return (
    `
      <div>
        <div class="heartIcon">
          <a href="" data-id="${data.id}"  data-qualquercoisa="Erik|Elaine|Radisol">heart</a>
        </div>
        <div class="cover">
          <a href=""><img src="https://image.tmdb.org/t/p/w780${data.poster_path}" /></a>
        </div>
      </div>
    `
  );
}

const events = [
  () => {
    $('.heartIcon a', (item) => {
      item.addEventListener('click', (e) => {
        e.preventDefault();
    
        console.log(e.target.dataset);
      });
    })
  }
];

export const buildEvents = () => {
  events.forEach((event) => event());
}

export default MovieCover;