Carlos Rodríguez
Carlos Rodríguez
Lautaro Strappazzon
Angel David Velasco Bonifaz
Se ve mejor. con la imagen de fondo.
Christian Velázquez
Me pasa lo mismo pero, creo que tiene que ver con el "live server" porque, cuando regreso lo vuelvo a cargar...se va la imagen de fondo. Igual y pondré tu solución, en lo que busco una. Gracias por el aporte.
Sebastián Andrés Sanhueza Tapia
Sí les aparece así el puntaje de la pelicula
Cayo Legal
Solución al string vacío en el form
searchFormBtn.addEventListener('click', e => searchFormInput.value !== "" ? location.hash = 'search=' + searchFormInput.value : e.preventDefault())
Jose Castillo
Yo lo hice de esta manera:
searchFormBtn.addEventListener('click', () => { let regex = /\w/g; regex.test(searchFormInput.value) ? location.hash = '#search=' : location.hash && alert('Desbes ingresar algun caracter en la busqueda')
con el regex filtro caracteres validos de busqueda y evito que envien la consulta si esta el campo solo con espacios como " ".
Eduardo Rodriguez Yapur
Para que el detalle y titulo de la pelicula se muestren en español podemos añadir a los parametros que enviamos a la API el lenguage:
api=axios.create({ baseURL: 'https://api.themoviedb.org/3/', headers:{ 'Content-Type': 'application/json;charset=utf-8', }, params:{ 'api_key': 'xxxxxxxxxxxxxxxxxxxxxxxxxx', 'language':'es', } });
Miguel Angel Hernandez Colombo
buena clase!
Dario Paladines
Amable recordatorio que para que les cargue la película correctamente si o si tienen que colocarle los string literals en el style.background
Luis Donaldo Talavera Covarrubias
Dejo mi repositorio, no use axios y algunas cosas las hice un poco diferente ya que las hacia antes de ver la clase, si gustan le pueden echar un ojo: https://github.com/Doni-Metal/Movie-Data-Viewer
Gregory Muñoz
Mi solución al fondo en las otras vistas que no son la de vista detallada de la pelicula:
navigation.js:
arrowBtn.addEventListener('click', () => { headerSection.style = ''; const stateLoad = history.state ? history.state.loadUrl : ''; if (stateLoad.includes('#')) { location.hash = '#home'; } else { history.back(); } });
Basicamente al agregar headerSection.style = ''; se estan eliminando los estilos del headerSection, al cambiar de vista al presionar la flecha de retorno. Así nos ahorramos eliminar la imagen de headerSection por cada vista.
Juan Pablo Vargas Ramirez
Yo viendo un !important en el minuto 17:51 y recordando las enseñanzas de De Granda: La traición, la decepción hermano
Henry Alexander Velásquez Rosas
Pensé lo mismo 😢
Cristian Paiva
jajajaja me hiciste reir con tu cara cuando pusiste batman para ver los detalles y en categorias veias romance. Por otro lado, realmente este curso tiene una calidad increíble de contenido. Gracias
Ricardo Alfonso Chavez Vilcapoma
¿Llegaron aquí?...enorgullezcanse amigos...son LEYENDA
Henry Alexander Velásquez Rosas
Todo va bien, pero hay pelis que no tienen imagen, ¿A alguien más le paso?
Juan Castro
ProfesorPasa en muchas películas. Lo que se puede hacer ahí es poner un fallback (una imagen por defecto que solo cargue cuando falle o no haya imagen de alguna película).
Mira: https://platzi.com/clases/2942-api-profesional/49631-imagenes-por-defecto/
Rubén Cuello
Pregunta de novato porque no me acuerdo. ¿Cómo se hace para seleccionar varios elementos clickeándolos así como hace Juan en 10:20 ? Probé de varias formas y no me sale :smile:
Juan Castro
ProfesorBusca "vscode shortcuts [so]" y cambia [so] por tu sistema operativo para encontrar la lista completa de atajos. :D
Sebastián Andrés Sanhueza Tapia
alt + click
Alejandro Laguna
hola, cuando entro a ver los detalles de una pelicula sale todo bien, pero cuando intento regresar con la flecha me aparece la imagen de deadpool de fondo.
Juan Castro
ProfesorRevisa por fa tu archivo navigation.js: https://platzi.com/clases/2986-api-practico/48454-mostrando-y-ocultando-secciones/
Con el código de esa clase se debería quitar la clase --long del header para que deje de salir el deadpool.
Santiago Barón Castaño
Failed to load resource: the server responded with a status of 403 (Forbidden), ayuda con este error por favor.
Juan Castro
ProfesorA qué endpoint o incluso URL completa hiciste la solicitud? Sigues teniendo el mismo error?
Alex Maurice
Hola gente me gustaría un poco de ayuda, ya que me sale error al intentar ver la descripcion de una peli, pero si pongo un id manualmente aparece todo los datos
.png](https://static.platzi.com/media/user_upload/Captura%20de%20Tela%20%2842%29-396025d7-5e2b-40a0-ac59-1e370f134bb0.jpg){kind=small}
Juan Castro
ProfesorParece que tu función getMovieById no está recibiendo correctamente el parámetro id porque en al consulta lo está convirtiendo a undefined. ¿Nos muestras por fa la sección donde ejecutas esa función?
Alex Maurice
Andy Simancas
Epaaaa! porque el css tiene un "!important" ??? 👀👀
Para los puristas del CSS, recomiendo agregar un reset inicial a las imágenes de estas propiedades:
img { background-position: center; background-repeat: no-repeat; background-size: cover; }
.
Existe también el object-fit: cover; que es más resumido pero no es compatible con IE.
.
El modificador header-container--long siempre al final de todos los estilos de esa sección, y eliminar los estilos que ya javascript los coloca. Además esta tenía una propiedad de background-size: cover !import;, si son muy maniáticos con el no colcoar el !import, pues en este caso era necesario ya que nunca CSS encontrará una especificdad de contenedor de imagen cuando dentro hay otros elementos como h1 o p. La solución es eliminar esa propiedad y agregarla internamente desde el código javascript.
.header-container--long { height: 480px; position: fixed; top: 0; width: 100%; }
. JS
headerSection.style.background = ` linear-gradient( 180deg, rgba(0, 0, 0, 0.35) 19.27%, rgba(0, 0, 0, 0) 29.17% ), url(${movieImgUrl}) `; headerSection.style.backgroundPosition = 'center'; headerSection.style.backgroundRepeat = 'no-repeat'; headerSection.style.backgroundSize = 'cover';
. Mi repositorio en este fix
Si a alguien más le sucedió que al entrar al detalle de una película y luego volver al home, el header le queda con el fondo del detalle como en la imagen:
Esto sucede porque al asignarle el background a headerSection en realidad se lo estamos asignando al header en general, no a la clase .header-container--long, por eso al volver al home el estilo se mantiene.
Sigo buscando la forma de optimizarlo, pero por el momento la solución que encontré fue agregarle a la función homePage del file navigation.js la siguiente línea:
headerSection.style.background = '';
De esta forma, cada vez que regresemos al home le estamos borrando la propiedad. Voy a buscar una mejor solución y les comento si la encuentro. Si alguien más encuentra una solución mejor se los agradecería, o si fue sólo un error mío también.
Saludos y nunca paren de aprender 💪
Sí!
function navigator() { if(location.hash.startsWith('#movie=')) { moviesPages(); } else if(location.hash.startsWith('#search=')) { searchOp(); } else if(location.hash.startsWith('#tvshow=')){ TVPages(); } else if(location.hash.startsWith('#description=')){ movietvDeatailsPage(); } else if (location.hash.startsWith('#category=')){ categorypages_view() } else if(location.hash.startsWith('#Categories')){ categoryPage(); } else{ homePage(); }
async function getMovieById(id) { const { data: movie } = await api('movie/' + id); title_description.textContent = movie.title; overview_description .textContent = movie.overview; average_description.textContent = movie.vote_average; }
function movietvDeatailsPage(){ headerSection.classList.add('active-size'); headerSectionBack.classList.add('inactiveback'); formSection.classList.add('inactive'); homeOp.classList.remove('inactive'); categoryOp.classList.add('inactive'); tvOp.classList.remove('inactive-color'); home_section.classList.add('inactive'); moviePage_section.classList.add('inactive'); tvPage_section.classList.add('inactive'); description_section.classList.remove('inactive'); search_section.classList.add('inactive'); formSection.classList.add('inactive'); headerSection.classList.remove('active-size-search'); categoryNav.classList.add('inactive'); category_section.classList.add('inactive'); moviesCategoriesOp.classList.remove('inactive'); tvsCategoriesOp.classList.remove('inactive'); // ['#movie', 'id] const [_, movieId] = location.hash.split('='); getMovieById(movieId); };