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