Contenido del curso
Carlos Rodríguez
student•
hace 4 años
Jorge Garcia
student•
hace 4 años
Carlos Rodríguez
student•
hace 4 años
Contenido del curso
Carlos Rodríguez
Jorge Garcia
Carlos Rodríguez
Carlos Rodríguez
Lautaro Strappazzon
Angel David Velasco Bonifaz
Christian Velázquez
Sebastián Andrés Sanhueza Tapia
Cayo Legal
Jose Castillo
Eduardo Rodriguez Yapur
Miguel Angel Hernandez Colombo
Dario Paladines
Luis Donaldo Talavera Covarrubias
Gregory Muñoz
Juan Pablo Vargas Ramirez
Henry Alexander Velásquez Rosas
Cristian Paiva
Ricardo Alfonso Chavez Vilcapoma
Henry Alexander Velásquez Rosas
Juan Castro
Rubén Cuello
Juan Castro
Sebastián Andrés Sanhueza Tapia
Alejandro Laguna
Juan Castro
Santiago Barón Castaño
Juan Castro
Alex Maurice
Juan Castro
Alex Maurice
Andy Simancas
Recuerden que si quieren optimizar aun más el código y no tener que crear un evento por cada película, pueden crear un sólo evento en la sección y con el e.target delegar el evento al nodo que quieren, ¿pero cmo detecto el id o la url de la imagen?, muy sencillo, usar los dataset para guardar esos datos en el html al momento de cargar los items don el módulo navigations.
.
Adjunto mi aporte con mi repositorio en el commit de la clase:
Mi repositorio
interesante tu respuesta y es muy eficiente a la hora de generar el codigo y la carga, pero podria ser mas explicito ya que aca andamos muchos que recien entramos al mundo de JS y la programacion, me interesa para poderlo implementar y entender
@idanygr Te recomiendo este curso si quieres indigar más sobre la manipulación del DOM: Curso de Manipulación del DOM
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 💪
Se ve mejor. con la imagen de fondo.
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.
Sí les aparece así el puntaje de la pelicula
Solución al string vacío en el form
searchFormBtn.addEventListener('click', e => searchFormInput.value !== "" ? location.hash = 'search=' + searchFormInput.value : e.preventDefault())
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 " ".
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', } });
buena clase!
Amable recordatorio que para que les cargue la película correctamente si o si tienen que colocarle los string literals en el style.background
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
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.
Yo viendo un !important en el minuto 17:51 y recordando las enseñanzas de De Granda: La traición, la decepción hermano
Pensé lo mismo 😢
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
¿Llegaron aquí?...enorgullezcanse amigos...son LEYENDA
Todo va bien, pero hay pelis que no tienen imagen, ¿A alguien más le paso?
Pasa 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/
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:
Busca "vscode shortcuts [so]" y cambia [so] por tu sistema operativo para encontrar la lista completa de atajos. :D
alt + click
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.
Revisa 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.
Failed to load resource: the server responded with a status of 403 (Forbidden), ayuda con este error por favor.
A qué endpoint o incluso URL completa hiciste la solicitud? Sigues teniendo el mismo error?
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}
Parece 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?
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); };
Epaaaa! porque el css tiene un "!important" ??? 👀👀