change link placeholder error and write coments in js

src/js/main.js

@@ -16,6 +16,7 @@ let favorites = [];
 
 /* Eventos */
 
+//Evento botón de búsqueda que hace fetch tomando el témino que se incluya en la barra de búsqueda.
 searchBtn.addEventListener("click", () => {
     const searchTerm = searchBox.value.trim().toLowerCase();
 
@@ -26,12 +27,15 @@ searchBtn.addEventListener("click", () => {
     }
   });
 
+//Evento barra de búsqueda que hace fetch de todo el JSON si la barra está vacía.  
 searchBox.addEventListener("input", () => {
   if (searchBox.value.trim() === "") {
     fetchAllCharacters();
   }
 });
 
+/*Evento botón de borrado que elimina el onjeto del localstorage en el que almacenamos favoritos, 
+renderiza de nuevo el array vacío y elimina el sombreado de tarjetas characters.*/
 cleanBtn.addEventListener("click", () => {
   event.preventDefault();
   localStorage.removeItem("favorites");
@@ -45,7 +49,7 @@ cleanBtn.addEventListener("click", () => {
 /*Función renderiza una tarjeta */
 
 function renderOneCharacterCard(objCharacter) {
-  const placeholderImage = "https://via.placeholder.com/210x295/ffffff/555555/?text=Disney";
+  const placeholderImage = "https://placehold.co/210x295/ffffff/555555/?text=Disney";
 
   return `<li class="js_cardBox cards__box" data-id="${objCharacter._id}">
             <img src="${objCharacter.imageUrl || placeholderImage}" 
@@ -54,7 +58,7 @@ function renderOneCharacterCard(objCharacter) {
           </li>`;
 };
 
-/*Función renderiza todas las tarjetas*/
+/*Función renderiza todas las tarjetas e incorpora en cada elemento <li> el evento click */
 
 function renderAllCharactersCards(arrayOfCharacter) {
     let html = "";
@@ -65,7 +69,8 @@ function renderAllCharactersCards(arrayOfCharacter) {
     attachClickEventsToCards();
 };
 
-/*Añade evento click a cada <li>*/
+/*Añade evento click a cada <li> y almacena el obj seleccionado en la array favorites a través del _id. 
+incorpora la clase que resalta la tarjeta*/
 
 function attachClickEventsToCards() {
     const cardBox = document.querySelectorAll(".js_cardBox");
@@ -100,21 +105,17 @@ function attachClickEventsToCards() {
 
 function attachClickEventsToEraserCards() {
   const cardsEraser = document.querySelectorAll(".js_cardsEraser");
-  console.log(cardsEraser); // Verifica si selecciona los elementos correctamente
-
-  if (cardsEraser.length === 0) {
-    console.error("No se encontraron elementos con la clase .js_cardsEraser");
-    return;
-  }
-
+  /*Añade evento click a cada <span>*/
   for (const eraser of cardsEraser) {
     eraser.addEventListener("click", (ev) => {
-      console.log("Click detectado en un elemento .js_cardsEraser"); // Depuración
-      ev.preventDefault();
+    ev.preventDefault();
+
 
+      /*Coge el atributo nuevo data-id como ancla para coger el objeto del array favorites y eliminarlo del array favorites */
       const idCharacter = ev.currentTarget.getAttribute("data-id");
       const index = favorites.findIndex((char) => char._id === parseInt(idCharacter));
 
+      /*Si el índice es distinto de -1, significa que el objeto se encontró en el array favorites y lo eliminamos */
       if (index !== -1) {
         favorites.splice(index, 1);
         localStorage.setItem("favorites", JSON.stringify(favorites));
@@ -128,14 +129,14 @@ function attachClickEventsToEraserCards() {
 
 function renderFavoritesCards() {
 
-
+/*Con un bucle iteramos por cada objeto de favoritos y pintamos una tarjeta */    
     let html = "";
     for(const objCharacter of favorites){
 
         html+= renderOneCharacterCard(objCharacter);
     }
     cardsFavorites.innerHTML=html;
-
+//Cambiamos las clases de favoritos y aplicamos evento click de borrado a cada tarjeta.     
     changeClassForFavorites();
 
     attachClickEventsToEraserCards();
@@ -149,7 +150,8 @@ const handleFavourite = (ev) => {
   ev.currentTarget.classList.add('cards__favorite');
 };
 
-
+/*Cambia con un bucle la clase del li para que no le afecte attachClickEventsToCards e incluimos con el DOM el input que nos permite 
+eliminar cada tarjeta favorita por separado*/
 
 function changeClassForFavorites() {
   for (const child of cardsFavorites.children) {
@@ -171,12 +173,15 @@ function changeClassForFavorites() {
 
 };
 
+/* cambia con un bucle la clase de cada una de las tarjetas para quitar el 
+resaltado favorito de las tarjetas de charaters a través del DOM */ 
 function changeClassForcharacters() {
   for (const child of cardsCharacteres.children) {
     child.classList.remove("cards__favorite");
   }
 };
 
+/*Función que se ejecuta cuando se carga la página, hace fetch de todo el JSON y renderiza las tarjetas de characters */
 function fetchAllCharacters(){
     fetch('https://api.disneyapi.dev/character?pageSize=50').
     then(response => response.json())
@@ -187,20 +192,22 @@ function fetchAllCharacters(){
     });
 };
 
-
+/*Función que se ejecuta cuando se carga la página, hace get de toda la información guardada en localStorage
+y renderiza las tarjetas de favorites. Si no hay nada en el localStorage, inicia de nuevo el array favorites vacío*/    
 function getFavoritesLocalstorage() {
   const savedFavorites = JSON.parse(localStorage.getItem('favorites'));
 
-  // Si savedFavorites no existe o no es un array, inicializa favorites como un array vacío
   if (Array.isArray(savedFavorites)) {
     favorites = savedFavorites;
   } else {
-    favorites = []; // Si no hay datos válidos, inicializa favorites como un array vacío
+    favorites = []; 
   }
 
   renderFavoritesCards();
 }
 
+/*Función que se ejecuta cuando se hace click en un botón de búsqueda, hace fetch de los personajes que coinciden con el término de búsqueda. 
+Si no hay coincidencias, renderiza todas las tarjetas de characters.*/
 function fetchSearchedCharacters(searchTerm) {
     fetch("https://api.disneyapi.dev/character?pageSize=50")
       .then((response) => response.json())
@@ -213,5 +220,6 @@ function fetchSearchedCharacters(searchTerm) {
 
   }
 
+//Inicializa la página cargando las tarjetas de characters y favorites.
 fetchAllCharacters();
 getFavoritesLocalstorage();