Contenido del curso
Configuración inicial y maquetación del proyecto
Consumiendo la API
Navegación
Views
Próximos pasos
Retos: scrollTop y DRY
Edmir Galván Vázquez
student
Federico Ivan Llano
student
Daniel Socorro Castellano
studentContenido del curso
Retos: scrollTop y DRY
Edmir Galván Vázquez
studentFederico Ivan Llano
studentDaniel Socorro Castellano
student
Esteban Charria Muñoz
student
Juan Castro
teacher
Guadalupe Monge Barale
student
Christian García
student
Eliezer Hernandez
student
Ricardo Alfonso Chavez Vilcapoma
student
Ameth Ordoñez Erazo
studentFederico Ivan Llano
student
David Estiven Aragón Andrade
student
LUZ ADRIANA MARTINEZ RAMIREZ
student
Andrés Esteban Rodríguez Jiménez
student
Sebastian Giraldo
student
Lisbeth Quintero
studentSebastian Giraldo
student
Antonio Rafael González Ferrer
student
Lorenzo Peñalver
student
Adriana Beatriz Barrera Estrella
student
Edier Gama
studentEliezer Hernandez
student
Miguel Araya Hervas
studentMiguel Araya Hervas
student
Jesús Ramon
studentRicardo Alfonso Chavez Vilcapoma
student
Camila Ramirez
studentJuan Castro
teacher
marcos martilotta
studentJuan Castro
teacher
Gilbert Ardila
studentJuan Castro
teacher
Valentina Hernández
student
Juan David Santamaria Gomez
student
Julian David Alzate Cuervo
studentYo encontre esta solucion para el scroll. Me parecio sencilla y legible.
window.scrollTo(0, 0);
yo habia encontrado esto window.scrollTo({ top: 0 }); en el navigator.
excelente muchas gracias, probe la del profesor pero no me funciono, busque otras que tampoco me funcionaron, pero probe la tuya y esa si me funcionó
hola!!, yo estuve buscando en stackoverflow formas de hacer el scrollTop y encontré esta función que es similar a lo que mostro el profe pero le agrega una animación bastante agradable :3
function smoothscroll(){ const currentScroll = document.documentElement.scrollTop || document.body.scrollTop; if (currentScroll > 0) { window.requestAnimationFrame(smoothscroll); window.scrollTo (0,currentScroll - (currentScroll/5)); } };
Love it
Me encantó Muchas gracias
Hola!, para los que le aparece %20 en el titulo de las categorías de: TV Movie o Science Fiction. Pueden usar este método que decodifica un componente URI
decodeURIComponent(categoryName)
function categoriesPage(){ genericSection.innerHTML = "" headerSection.classList.remove('header-container--long') headerSection.style.background = '' arrowBtn.classList.remove('inactive') arrowBtn.classList.remove('header-arrow--white') headerTitle.classList.add('inactive') headerCategoryTitle.classList.remove('inactive') searchForm.classList.add('inactive') trendingPreviewSection.classList.add('inactive') categoriesPreviewSection.classList.add('inactive') genericSection.classList.remove('inactive') movieDetailSection.classList.add('inactive') const [urlPage,categoryData] = location.hash.split('=') const [categoryId, categoryName] = categoryData.split('-') headerCategoryTitle.innerHTML = decodeURIComponent(categoryName); getMoviesByCategory(categoryId); }
Gracias, justo lo que buscaba. Buen aporte.
No me funcionó en Chrome :(
Para los que no saben que significa el término DRY:
Hay un principio en la programación llamado DRY, o Don't Repeat Yourself (No lo repitas tú mismo). Por lo general, significa refactorizar el código tomando algo hecho varias veces y convirtiéndolo en un bucle o una función. El código DRY es fácil de cambiar, porque solo tienes que hacer cualquier cambio en un solo lugar. Que fue lo que se hizo con la función createMovies.
Agregue css al arrow con position fixed para las categorias, asi el arrow "nos sigue" 😂
.header-arrow { border-radius: 50px; background-color: gray; width: 50px; height: 50px; text-align: center; position: fixed; background-blend-mode: multiply; opacity: 0.9; z-index: 1; /**/ } h1, h2 { margin-top: 50px; /**/ }
Excelente!!
Gracias por el CSS
Recordando la clase de ECMAScript6+ podemos usar este método para un problema en el código que hay de que los títulos salen con un %20 cuando tienen un espacio en blanco
headerCategoryTitle.innerHTML = categoryName.replaceAll('%20',' ')
Usé el String.replaceAll( ) y nos solo String.replace( ) por si en un futuro hay una categoría que use más de dos palabras (aunque lo dudo pero ahí lo dejo)
es mas facil si usas el decodeURI, te evita esa concatenacion y no tienes que harcodear el cambio necesario, no siempre es %20 como se concatenan
El error del %20, lo quité con "decodeURI":
headerCategoryTitle.innerText = decodeURI(categoryName)
Aquí el link con la info: https://www.geeksforgeeks.org/how-to-encode-and-decode-a-url-in-javascript/
gran aporte, yo lo habia realizado con el clasico split y join, peor luego de leer el articulo entendi el por que de la funcion y es de gran ayuda!!
Yei mi solución del código fue la misma que la del teacher!
😁
Para el scroll simplemente use ScrollTo(Top), no sé cual será la diferencia con la forma de JuanDC, pero me sirvió para todas las vistas sin problemas:
function navigator() { console.log({ location }); if (location.hash.startsWith('#trends')) { trendsPage(); } else if (location.hash.startsWith('#search=')) { searchPage(); } else if (location.hash.startsWith('#movie=')) { movieDetailsPage(); } else if (location.hash.startsWith('#category=')) { categoriesPage(); } else { homePage(); } scrollTo(top) }
probe muchas formas y la tuya finalmente me ayudo, muchisimas gracias 😊
No sé si sea el único, pero a mí el scroll nunca me afectó xd
o sea, cuando cambio de categorías nunca aparece en la parte de abajo, puede que Chrome haya hecho algo por eso?
es necesario poner el scrollTop igualmente?
Creo que si deberías incluirlo. Recuerda que no puedes determinar exactamente desde que navegadores accederán a tu sitio web y ese comportamiento puede resultar impredecible, ya que puede variar entre navegadores.
Yo lo había hecho así el scrollTop
document.querySelector('body').scrollTop;
Vaya, parece que como lo había hecho no funciona siempre, no pude descubrir porque exactamente, así que solo termine usando el código del profesor.
Esta fue mi solucion, esta bien si encapsule el endpoint para entregarlo como parametro cuando llamemos la funcion?
async function getMovies(endpoint, section, id){ genericSection.style.display = “none”; const { data } = await api(endpoint, { params: { with_genres: id } }); const movies = data.results; section.innerHTML = ""; movies.forEach(movie=> { const movieContainer = createFunction('div'); movieContainer.classList.add('movie-container'); const movieImg = createFunction('img'); movieImg.classList.add('movie-img'); movieImg.setAttribute('alt', movie.title); movieImg.setAttribute('src', 'https://image.tmdb.org/t/p/w300' + movie.poster_path); movieContainer.appendChild(movieImg); section.appendChild(movieContainer); }) }
Diferencias de scroll y scrollTo
https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll
Resumen: Son lo mismo
Necesito por favor el codigo src de main.js y navigation.js de esta clase
No se porque pero a mi no me queda abajo el scroll.. Saen porque puede ser?
Con el código por defecto que yo escribí también sucede. Por eso el reto. ¿Intentaste usar el scrollTop?
minuto :10:36 estoy teniendo ese problema al mostrar el nombre de la categoría, ¿más adelante lo resolvemos? 0 ¿Cómo puedo resolverlo?
Te respondí por aquí: https://platzi.com/comentario/3681312/
aqui el primer reto
function createMovies (movies, container) { let billboard=''; movies.forEach(movie => { billboard +=` <div class="movie-container"> <img src="https://image.tmdb.org/t/p/w300/${movie.poster_path}" class="movie-img" alt="${movie.title}" loading="lazy" /> </div> ` }); container.innerHTML=billboard; } async function getTrendingMoviesPreview() { const {data} = await api('trending/movie/day'); const movies = data.results; createMovies(movies, trendingMoviePreviewList); }
Al momento de ver esta clase los navegadores automaticamente visualizan la interfaz en la parte top del navegador
como se puede evitar que precargue la pelicula por defecto antes de cargar las peliculas por categoria? ya que al hacer esto en un desarrollo para un cliente podría ser molesto