No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Buscador de pel铆culas

13/17
Recursos

Aportes 17

Preguntas 7

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥榖ack()鈥 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茅 鈥渨indow.history.back()鈥 y adem谩s agregu茅 un feature en el que si le das click al tit煤lo 鈥淧latzi Movies鈥 te regresara al home. Para hacerlo solo habilit茅 el t铆tulo en esa pantalla quitandole la clase 鈥渋nactive鈥, y le agregu茅 un addEventListener que redirigiera al home.
Ponemos un 鈥渃ursor: pointer鈥 en css para que sea algo intuitivo en desktop y listo.

Usando el m茅todo 鈥渄ecodeURI()鈥 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);

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/

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("")}`

PUUMMM!!!

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);

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: 鈥渟tar%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

    })();

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 = " ";
  }
}

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');

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()
});

Yo utilic茅 el m茅todo 鈥渉istory.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
});