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/
Edmir Galván Vázquez
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(); });
CHRISTIAN OLIVER SOLANO NUÑEZ
solución muy funcional
Christian Velázquez
Gracias! Buen tip!!
Ricardo Andres Ojeda Silva
Diego Alejandro Presiga
Que buen aporte!! Sin duda los detalles valen mucho!
Leal Brigitte
Detalles importantes. Graciaaas
Antonio Rafael González Ferrer
Buscando en la doc de Mozilla modifiqué el evento del arrowBtn:
arrowBtn.onclick = () => window.history.back()
Amauri Guillén
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)
Orangel Gonzalez
Esta es la forma que encontré 😬
arrowBtn.addEventListener('click', () => { history.go(-1) });
Christian Velázquez
También, interesante solución. Gracias.
JOSE RANGEL
Esta solución me ayudó. El window.history.back() hace un refresh de la página.
Alan Cabrera
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.
Matias Diaz
Excelente! Yo termine removiendo la clase de 'inactive' para el titulo en la sección de 'categorías' y la de 'trends' porque use un poco por la app y me pareció incomodo no poder volver al home.
Fernando Orozco Velasquez
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);
Kengya Moncada
Amo ♥ éstas clases , la verdad he sentido mas confianza, me ha ayudado a reflexionar sobre mis proyectos anteriores. GRACIAS!!!
Humberto Delgado
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("")}`
Misael Gomez
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/
Manuel Cabos
Henry Alexander Velásquez Rosas
Me sirvió, gracias.
Alirio Isea
Me funciono esta solución, gracias!! también llevaba rato probando y nada funcionaba jaja
Eliezer Hernandez
¿Esta forma de ocultar componentes y mostrarlos dependiendo de la navegación es la forma actual de desarrollar páginas webs? Tenía entendido que para cada página existía un correspondiente archivo HTML con la estructura correspondiente a esa página, la manera de desarrollar ha cambiado o solo es una alternativa con sus ventajas.
Juan Castro
ProfesorSí y no. En este curso estamos desarrollando una Single Page Application, una aplicación que funciona en una sola página. Pero ¿cómo añadimos navegación en aplicaciones de una sola página? Hay muchas formas. Literalmente cada quien lo implementa como mejor funcione para su proyecto (o siguiendo las convenciones de su framework de preferencia). En este caso durante el curso implementamos nuestro propio router con JS vanilla. :D
Cristian Zapata
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');
Kevin Daniel Hincapie Lumbaque
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 = " "; } }
Ariel Ezequiel Biazzo Genua
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 })();
Luis Miguel Rojas Franco
El buscador solo puede funcionar sin espacios? o se podría realizar algo como que si en el buscador coloco por ejemplo: “The Batman” pueda mostrarme los resultados sin mostrar la página sin resultados? intente usando decodeURI() para quitar los espacios pero no se pudo siempre muestra en el navegador en los espacios el %20 :(
Juan Castro
ProfesorYep, la URL traduce carácteres "especiales" (como los espacios) de esta forma. Habría que "traducirlos" manualmente. :thinking:
Federico Maidana
Resulta que realice un buscador, funciona bárbaro en la versión de escritorio. Pero cuando intento utilizarlo en la versión móvil, directamente no funciona. Acá les dejo el repositorio, para que puedan ver el código. repositorio
Juan Castro
Profesor¿Qué parte no funciona, Fede? Lo único que encontré fue que no funciona el viewport para tener el zoom. Pero la funcionalidad del buscador sí corre.
Federico Maidana
Había un pequeño error (que me consumió toda la tarde LOL). Resulta que si entrabas al sitio desde el celular y utilizas el buscador, no funcionaba. Y esto se debe a que el teclado de los celulares siempre ponen a la primera letra en mayúsculas, de esta forma JAMAS iba a funcionar el buscador en el celular. Así que simplemente puse el valor del input en minúscula Y YA TODO funciono correctamente.
Así que ya está resuelto. Gracias Juan por la ayuda.
Ricardo Alfonso Chavez Vilcapoma
Mi solución usando métodos al alcance la mano :D
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() });
Hernan Dandreis
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
searchFormBtn.addEventListener('click', () => { let value = searchFormInput.value getSearchMovis(value) location.hash = `search=${value}` })
Donovan RM
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);
Henry Alexander Velásquez Rosas
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()}`; });
🚧 Problemas con el history.back(), tengo que retroceder 2 veces
Si a alguien más le pasa que cuando hace una búsqueda o cuando le da al botón de search, y luego intenta retroceder ++tiene que hacerlo 2 veces++, ya sea con el botón de la flecha o con el buscador, esta es la solución que encontré agregando como parámetro el evento e y la función e.preventDefault(); :
searchFormBtn.addEventListener('click', (e) => { if (searchFormInput.value.length > 0) { location.hash = `${SEARCH_HASH}=${searchFormInput.value}`; } e.preventDefault(); // Fix para que funcione correctamente el history.back() });
. Estuve repasando mi código varias horas, debuggeando y regresando a commits anteriores, pero no encontré el problema, me pasa desde que creé el evento click para el botón del buscador, si alguien más sabe porque pasa, si estoy haciendo algo mal conoce otra solución, me avisa, dejo mi repo por si acaso 👀
Con expresiones regulares sería algo así:
.
Dentro de la función searchPage:
const [_, query] = location.hash.split("="); // %20%20%20fury%20%20 const [name] = query.match(/[A-Za-z]+/g); showSearch(query);
Igualmente en el addEventListener:
searchFormBtn.addEventListener("click", () => { const [name] = searchFormInput.value.match(/[A-Za-z]+/g); location.hash = `#search=${name}`; });