Untitled

const streamers = [
  { name: "Rubius", age: 32, gameMorePlayed: "Minecraft" },
  { name: "Ibai", age: 25, gameMorePlayed: "League of Legends" },
  { name: "Reven", age: 43, gameMorePlayed: "League of Legends" },
  { name: "AuronPlay", age: 33, gameMorePlayed: "Among Us" },
];

const handleChange = (event) => { //Creamos la función handleChange que lee el evento por parámetro
  /* console.log(event);  Opcionalmente leemos el evento que efectivamente se ejecuta cuando hacemos input */
  const filteredStreamers = streamers.filter((streamer) => 
  //Creo una nueva constante con los streamers filtrados
    streamer.name.toLowerCase().includes(input$$.value.toLowerCase()) //Estos streamers solo van a estar si incluyen el valor que tenga el input, es decir, el input.value
  );

  console.log(filteredStreamers); //Y aquí muestro por consola solo los streamers que he buscado
};

const input$$ = document.querySelector('[data-function="toFilterStreamers"]'); //Aqui capturo en un nodo el elemento de html que tenga el data-function="toFilterStreamers", es decir, el input

input$$.addEventListener("input", handleChange); // Aqui le añado un escuchador de eventos al nodo que al realizar el evento input ejecute la función handleChange