Retos: scrollTop y DRY

Clase 12 de 17 • Curso de API REST con Javascript: Ejemplos con APIs reales

Edmir Galván Vázquez

student•

Yo encontre esta solucion para el scroll. Me parecio sencilla y legible.

window.scrollTo(0, 0);

Federico Ivan Llano

student•

yo habia encontrado esto window.scrollTo({ top: 0 }); en el navigator.

Daniel Socorro Castellano

student•

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ó

Esteban Charria Muñoz

student•

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));
    }
};

Juan Castro

teacher•

Love it

Guadalupe Monge Barale

student•

Me encantó Muchas gracias

Christian García

student•

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);
}

Eliezer Hernandez

student•

Gracias, justo lo que buscaba. Buen aporte.

Ricardo Alfonso Chavez Vilcapoma

student•

No me funcionó en Chrome :(

Ameth Ordoñez Erazo

student•

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.

Federico Ivan Llano

student•

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;
    /**/
  }

David Estiven Aragón Andrade

student•

Excelente!!

LUZ ADRIANA MARTINEZ RAMIREZ

student•

Gracias por el CSS

Andrés Esteban Rodríguez Jiménez

student•

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)

Sebastian Giraldo

student•

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

Lisbeth Quintero

student•

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/

Sebastian Giraldo

student•

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!!

Antonio Rafael González Ferrer

student•

Yei mi solución del código fue la misma que la del teacher!

😁

Lorenzo Peñalver

student•

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)
  }

Adriana Beatriz Barrera Estrella

student•

probe muchas formas y la tuya finalmente me ayudo, muchisimas gracias 😊

Edier Gama

student•

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?

Eliezer Hernandez

student•

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.

Miguel Araya Hervas

student•

Yo lo había hecho así el scrollTop

document.querySelector('body').scrollTop;

Miguel Araya Hervas

student•

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.

Jesús Ramon

student•

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);
})
}

Ricardo Alfonso Chavez Vilcapoma

student•

Diferencias de scroll y scrollTo

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll

Resumen: Son lo mismo

Camila Ramirez

student•

Necesito por favor el codigo src de main.js y navigation.js de esta clase

Juan Castro

teacher•

Aquí lo tienes: https://github.com/platzi/curso-api-rest-javascript-practico/tree/f6e15de9c01144993f852717184e7b6a5c8236e8

marcos martilotta

student•

No se porque pero a mi no me queda abajo el scroll.. Saen porque puede ser?

Juan Castro

teacher•

Con el código por defecto que yo escribí también sucede. Por eso el reto. ¿Intentaste usar el scrollTop?

Gilbert Ardila

student•

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?

Juan Castro

teacher•

Te respondí por aquí: https://platzi.com/comentario/3681312/

Valentina Hernández

student•

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);
}

Juan David Santamaria Gomez

student•

Al momento de ver esta clase los navegadores automaticamente visualizan la interfaz en la parte top del navegador

Julian David Alzate Cuervo

student•

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

function smoothscroll(){
    const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
    if (currentScroll > 0) {
         window.requestAnimationFrame(smoothscroll);
         window.scrollTo (0,currentScroll - (currentScroll/5));
    }
};

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);
}

.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;
    /**/
  }

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)
  }

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);
})
}

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);
}

Retos: scrollTop y DRY

Presentación del proyecto: PlatziMovies

TheMovieDB: análisis de su API

Bocetos en papel y diseño en Figma

Configuración inicial y maquetación del proyecto

Configuración del entorno de desarrollo

Maquetación del proyecto: HTML y CSS

Consumiendo la API

Lista de películas en tendencia

Lista de categorías

Migración a Axios

Navegación

Location y hash navigation

Mostrando y ocultando secciones

Error: carga duplicada de datos

Views

Filtrando películas por categoría

Retos: scrollTop y DRY

Buscador de películas

Retos: historial de navegación y página de tendencias

Endpoint de detalles de una película

Lista de películas recomendadas

Próximos pasos

Toma el Curso Profesional de Consumo de API REST con JavaScript