gistfile1.txt

/* eslint-disable no-unused-vars */
/* eslint-disable no-console */

import rickandmorty from './data/rickandmorty/rickandmorty.js';
import { renderCharacters, populateSpeciesFilter } from './view.js';
import { filterBySpecies } from './dataUtils.js';

const data = rickandmorty.results;
const resultsContainer = document.querySelector("#results");

document.querySelector("#speciesFilter").addEventListener('change', (e) => {
  console.log('changed', e);
  const species = e.target.value;
  const filteredData = filterBySpecies(data, species);
  renderCharacters(resultsContainer, filteredData);
});


window.onload = () => {
  console.log("window loaded");
  populateSpeciesFilter(document.querySelector("#speciesFilter"), data);
  renderCharacters(resultsContainer, data);

  // on click + prevent default
  // addEvents();
  resultsContainer.addEventListener('click', (e) => {
    console.log(`el evento pasa por un ${e.target}, pero el listener esta en ${e.currentTarget}`);
  
    if (!e.target.classList.contains('like')) {
      return;
    }
    alert(`I like ${e.target.dataset.charId}`);
  });
}


function addEvents() {
  console.log('adding events');
  // child
  document.querySelectorAll(".image").forEach(el => {
    el.addEventListener("click", onClickImage);
  });

  // parent 1
  document.querySelectorAll("div.bordered").forEach(el => {
    el.addEventListener("click", onClickP);
  });

  // parent 2
  document.querySelectorAll("li").forEach(el => {
    el.addEventListener("click", onClickLi);
  });
}

const onClickImage = (e) => {
  console.log(`click div handler, click happened on ${e.target}`);
  e.currentTarget.classList.add("highlight");
}

const onClickP = (e) => {
  console.log(`click ${e.currentTarget}, click happened on ${e.target}`);
  e.currentTarget.classList.add("highlight");
  e.stopPropagation();
}

const onClickLi = (e) => {
  console.log(`click li, click happened on ${e.target}`);
  e.currentTarget.classList.add("highlight");
}

// document.querySelector("#speciesFilter").addEventListener('change', (e) => {
//   const species = e.target.value;
//   const filteredData = filterBySpecies(data, species);
//   renderCharacters(resultsContainer, filteredData);
// });

// const onLike = (e) => {
//   console.log(`el evento pasa por un ${e.target}, 
//     pero el listener esta en ${e.currentTarget}`);
  
//   if (!e.target.classList.contains('like')) {
//     return;
//   }
//   alert(`I like ${e.target.dataset.charId}`);
// }