No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Buscador de películas

13/17
Recursos

Aportes 21

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

Mi solucion es esta:

En la funcion donde manejamos el evento click de arrowBtn ya no ponemos que nos devuelva a ‘#home’, sino a la URL que estuvimos anteriormente.

Esto se logra mediante window.history que tiene varios metodos y entre ellos ‘back()’ que nos permite ir a la URL anterior que visito el usuario.

arrowBtn.addEventListener('click', () => {
   location.hash = window.history.back();
});

Usando el método trim() se pueden evitar fallas en la búsqueda cuando haya espacios en blanco al principio o al final del string.

searchFormBtn.addEventListener('click', () => {
    location.hash = `#search=${searchFormInput.value.trim()}`;
});

Buscando en la doc de Mozilla modifiqué el evento del arrowBtn:

arrowBtn.onclick = () => window.history.back()

Para evitar errores con búsquedas de 2 o más palabras separadas por un espacio, podemos usar decodeURI para decodificar el hash y obtener el string sin “%20”.

const query = decodeURI(location.hash.split("=")[1]);
getMoviesBySearch(query)

Esta es la forma que encontré 😬

arrowBtn.addEventListener('click', () => {
  history.go(-1)
});

Para solucionar el reto usé “window.history.back()” y además agregué un feature en el que si le das click al titúlo “Platzi Movies” te regresara al home. Para hacerlo solo habilité el título en esa pantalla quitandole la clase “inactive”, y le agregué un addEventListener que redirigiera al home.
Ponemos un “cursor: pointer” en css para que sea algo intuitivo en desktop y listo.

Usando el método “decodeURI()” pude solucionar el problema de los espacios en blanco y el de tildes para realizar la búsqueda.

async function getMoviesBySearch(query) {                                                               query = decodeURI(query);                                                                             const { data } = await api(`search/movie`, {                                                      
    params: {                                                                                         
      query,                                                                                             
		},
  });         
  
 const movies = data.results;                                                                        
 genericSection.innerHTML = ""; 
 createMovies(movies, genericSection);

Amo ♥ éstas clases , la verdad he sentido mas confianza, me ha ayudado a reflexionar sobre mis proyectos anteriores. GRACIAS!!!

El método solo funciona para quitar los espacios de un Sting al final y al comienzo.
Estos métodos cumplen con la finalidad: espero los sirva

location.hash = location.hash = `#search=${searchFormInput.value.replace(/\s+/g, '')}`


location.hash = `#search=${searchFormInput.value.split(" ").join("")}`

location.hash = `#search=${searchFormInput.value.split(" ").join("")}`

Para eliminar los espacios en blanco, a los extremos y en el centro, podemos aplicar los siguientes métodos .split() y .join()

searchFormBtn.addEventListener('click', ()=>{
  location.hash='#search=' + searchFormInput.value.split(" ").join('');
  console.log(searchFormInput.value.split(" ").join(''));
});

Dejo la documentación y un ejemplo
https://pixonauta.com/eliminar-espacios-en-blanco-de-un-string-con-javascript/

en la función getMoviesBySearch, pueden agregar este string para que les salga el nombre de lo que buscaron,

headerCategoryTitle.innerHTML = 'Results for: ' + query;

y en searchPage()

headerCategoryTitle.classList.remove('inactive');

Debo decir que mi código es diferente, he manejado de otra manera la navegabilidad y no tiene sentido para mi:
1- escuchar al icono de búsqueda para luego
2- leer el value del imput y
3-pasarlo al hash para luego volver a
4-leer el hash teniendo que aplicar métodos para separar el hash del valor y luego
5- realizar la solicitud
6- renderizar resultado

Así que yo preferí hacerlo menos enredado, se aparta de la lógica que veníamos manejando con los hash pero no me parece eficiente enredar todo mas solo por seguir el patrón…
Lo que hice fue básicamente escuchar el evento de click sobre el icono y el evento de enter en el input y llamar a mi función render que lee el valor del input, hace una validacion sencilla para confirmar que no esta vacío el input y procede a quitar los espacios del query (la gente no siempre busca solo una palabra) para luego usarlo en el hash, mientras se hace la solicitud a la api y se crea la interfaz con el resultado, al final limpio el input para que este vacío

export async function renderSearchModal() {
  const searchForm = document.querySelector(".search__input");
  if (searchForm.value.lenght > 0) {
    const searchedValue = searchForm.value;
    const arraySearch = searchedValue.split(" ");
    location.hash = `search=${arraySearch.join("_")}`;
    const searchList = await getSearchedMovie(searchedValue);

    const searchModal = createSearchModal(searchList, searchedValue);

    body.append(searchModal);

    searchForm.value = " ";
  }
}

Holaa!

No se si probaron en buscar con una separcion ej:_ star wars_

Pues si lo hacen, la API no les devolvera nada ya que cuando tomamos el valor de la busqueda desde el hash, la palabra star wars se ve asi: “star%20wars”

Soluciones:

  • Cambiar el codigo y en vez de tomar star wars de la url, pueden hacerlo tomando el valor del input.value, es lo mismo, solo deben pasarle a una nueva funcion como parametro el valor del input.

  • (MUCHO MAS FACIL) Hacer un codigo similar que trabaje con estos errores, asi:


//funcion anonima que se llama inmediatamente para trabajar con la url
(function getUrlParams() {

        const [_, query] = location.hash.split("=")
        let arrayStr, newQuery;

        if(query.includes("%20")) {
            arrayStr = query.split("%20")
            newQuery = arrayStr.join(" ")
        }
        console.log(newQuery)
        
        showMoviesSearched(newQuery)

        //headerCategoryTitle.innerHTML = name

    })();

Mi solución usando métodos al alcance la mano 😄

arrowBtn.addEventListener("click",()=>{
    location.hash = window.history.back(); //para guardar las URL que visita el usuario se usa window.history y par regresar al anterior el método back()
});
Como opcion a lo que propone el profe se puede agregar una variable que escuche el evento de click en el boton de search y capture el value de input en una variable que después pasamos como parametro a la función ```js searchFormBtn.addEventListener('click', () => { let value = searchFormInput.value getSearchMovis(value) location.hash = `search=${value}` }) ```

Para el tema de buscar con espacios usé el siguiente codigo en el searchPage():

const [searc, query] = location.hash.split('=');
    const busqueda = decodeURIComponent(query);
    console.log(busqueda);
    headerCategoryTitle.innerHTML= `Resultados: ${busqueda}`
    getMoviesBySearch(busqueda);

PUUMMM!!!

suponiendo que quisiera subir un proyecto en el que consumo una api a github pages, como deberia hacerlo teniendo en cuenta la privacidad de las api key. pero que el proyecto siga pudiendo acceder al contenido de la api? creo que tener las llaves en un archivo añadido a git ignore aca ya no seria util.
Solucion para retroceder la pagina ```js arrowBtn.addEventListener('click', () =>{ window.history.go(-2); }); ```lleva -2 ya que si le pones -1 te hace un refresh de la pagina y al segundo click te regresa a la pagina, o almenos eso me paso. Espero les funcione
Por si alguien más tiene problema con los espacios y las tildes en la barra de búsqueda aquí dejo una función recursiva para que pasen el texto que se quiere mostrar: ```js function fixQueries(query) { let queryFixed = query; if(queryFixed.includes('%20')) { queryFixed = queryFixed.replace('%20', ' '); return fixQueries(queryFixed); } if(queryFixed.includes('%C3%A1')) { queryFixed = queryFixed.replace('%C3%A1', 'á'); return fixQueries(queryFixed); } if(queryFixed.includes('%C3%A9')) { queryFixed = queryFixed.replace('%C3%A9','é'); return fixQueries(queryFixed); } if(queryFixed.includes('%C3%AD')) { queryFixed = queryFixed.replace('%C3%AD','í'); return fixQueries(queryFixed); } if(queryFixed.includes('%C3%B3')) { queryFixed = queryFixed.replace('%C3%B3', 'ó'); return fixQueries(queryFixed); } if(queryFixed.includes('%C3%BA')) { queryFixed = queryFixed.replace('%C3%BA','ú'); return fixQueries(queryFixed); } return queryFixed }; ```

Yo utilicé el método “history.back()”.
aquí pueden revisar la documentación:

arrowBtn.addEventListener('click', () => {                                  
  history.back();                                                             // Este método hace que el navegador vuelva atrásuna página en la sesión
});