Retos: scrollTop y DRY
Contenido del curso
Configuración inicial y maquetación del proyecto
Consumiendo la API
Navegación
Views
Próximos pasos
Retos: scrollTop y DRY
Contenido del curso
Retos: scrollTop y DRY
Edmir Galván Vázquez
Estudiante
Federico Ivan Llano
Estudiante
Daniel Socorro Castellano
Estudiante
Esteban Charria Muñoz
Estudiante
Juan Castro
Profesor
Guadalupe Monge Barale
Estudiante
Christian García
Estudiante
Eliezer Hernandez
Estudiante
Ricardo Alfonso Chavez Vilcapoma
Estudiante
Ameth Ordoñez Erazo
EstudianteFederico Ivan Llano
Estudiante
David Estiven Aragón Andrade
Estudiante
LUZ ADRIANA MARTINEZ RAMIREZ
Estudiante
Andrés Esteban Rodríguez Jiménez
Estudiante
Sebastian Giraldo
Estudiante
Lisbeth Quintero
EstudianteSebastian Giraldo
Estudiante
Antonio Rafael González Ferrer
Estudiante
Lorenzo Peñalver
Estudiante
Adriana Beatriz Barrera Estrella
Estudiante
Edier Gama
EstudianteEliezer Hernandez
Estudiante
Miguel Araya Hervas
EstudianteMiguel Araya Hervas
Estudiante
Jesús Ramon
EstudianteRicardo Alfonso Chavez Vilcapoma
Estudiante
Camila Ramirez
EstudianteJuan Castro
Profesor
marcos martilotta
EstudianteJuan Castro
Profesor
Gilbert Ardila
EstudianteJuan Castro
Profesor
Valentina Hernández
Estudiante
Juan David Santamaria Gomez
Estudiante
Julian David Alzate Cuervo
EstudianteYo 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