Mostrando y ocultando secciones

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

Edmir Galván Vázquez

student•

Si no quieren que su archivo de nodes.js este lleno de 'document.querySelector()' y verlo un poco mas limpio, les comparto un tip que utilizo mucho.

Creen esta funcion al inicio del archivo nodes.js

const $ = (id) => document.querySelector(id);

Y ahora cada 'document.querySelector()' lo pueden cambiar solamente por:

const headerSection = $('#header');

Es algo parecido a jQuery🥴

Orlando Díaz Torrealva

student•

Me encantó, especialmente porque me gusta tener un código que se vea muy ordenado y que no se vea que algo se repite demasiado. 👌✌️

Jonathan Alfonso

student•

Que bien! Hace unos cursos pregunte si existía alguna forma de hacer esto y no obtuve respuesta. No se me había ocurrido, es muy efectiva.

Orlando Díaz Torrealva

student•

Para no escribir tanto else if en la función navigator podemos usar operadores ternarios de esta manera:

location.hash.startsWith('#trends')    ? trendsPage()       :
location.hash.startsWith('#search=')   ? searchPage()       :
location.hash.startsWith('#movie=')    ? movieDetailsPage() :
location.hash.startsWith('#category=') ? categoriesPage()   :
homePage()

y los addEventListener de los botones SearchformBtn, trendingBtn y arrowBtn pueden escribirse en una sola línea omitiendo las llaves:

arrowBtn.addEventListener('click', () => location.hash = 'home')

Juan Castro

teacher•

Qué elegancia la de francia

Antonio Rafael González Ferrer

student•

No sabía que se podían anidar ternarios! Qué buen aporte!

Juan David Reyes

student•

esta clase me abrio los ojos respecto alo asombroso que es el desarrollo web xd

Alexander Gonzalez

student•

Por si alguien es aún medio nuevo y tomo "robado" el code de JuanDC... este es un comentario para usted.

NO se haga daño haciendo eso, si realmente usted desea mejorar en está habilidad es un error super grande no hacer las cosas por usted mismo.

Mi experiencia es que desde que dejé de hacer eso mi curva de aprendizaje paso de 10% a 100% en retener y mejorar todo tanto como Frontend a como diseñador.

Kengya Moncada

student•

eso es correcto! ♥

Ariel Ezequiel Biazzo Genua

student•

Muy de acuerdo, y si quieren saber mas como aprender esta clase de tecnicas recomiendo 2 cosas.

terminar de ver el video y sin ver nada, hacerlo por su cuenta, eso le permitira ver que realmente no entendio.
leer el libro: a mind for numbers de barbara oakley, el cual le enseña a encontrar su genialidad en carreras de ciencia e ingenieria :)

Juan Fernando Yepes Muñoz

student•

"Si tu tienes tu propio diseño: F" (Juandc, 2022) . Iré a seleccionar mis elementos y ahora vuelvo

Juan Castro

teacher•

:joy:

Carlos Rodríguez

student•

Mi lógica de navegación, no me gustan mucho los if else:

const pages = [
    { name: 'trends', hashstart: '#trends', render: trendsPage },
    { name: 'search', hashstart: '#search=', render: searchPage },
    { name: 'movie', hashstart: '#movie=', render: movieDetailsPage },
    { name: 'category', hashstart: '#category', render: categoriesPage },
];

const navigator = () => {
    const hash = window.location.hash;
    let rendering = hash === '' ? homePage : error404;
    const searchIndexRenderPage = pages.findIndex((page) => hash.startsWith(page.hashstart));
    if (searchIndexRenderPage !== -1) rendering = pages[searchIndexRenderPage].render;
    rendering();
};

window.addEventListener('DOMContentLoaded', () => {
    navigator();
});

window.addEventListener('hashchange', () => {
    navigator();
});

Julian Franco

student•

La ce cedilla o ce caudata, también llamada sencillamente cedilla, es una letra que consiste en una C latina con una pequeña z en forma de virgulilla debajo.

Luis Cubillos

student•

Y C trencada, muy usada en Catalán y Valenciano, para palabras donde la 'c' se pronuncia como una 's' (ça, ce, ci, ço, çu), por ejemplo: barça, cançó, plaça... y no me acuerdo más lo estudié hace tiempo :D

Jonathan Alfonso

student•

¿Por que si se creo el archivo nodes.js con todos los querySelectors de los elementos se les vuelve a asignar el mismo valor en los otros archivos? Si la variable ya esta definida, ¿no es mejor simplemente llamarla?

Jonathan Alfonso

student•

Terminé de ver el vídeo, y en las siguientes ocaciones, con los elementos siguientes a la creación de nodes.js, simplemente los llama. Por lo que supongo que simplemente se le paso borrar esas línea. Yo las borré y sigue funcionando todo correctamente.

Me refiero a estas líneas del main.js:

const trendingMoviesPreviewList = document.querySelector('#trendingPreview .trendingPreview-movieList');

const categoriesPreviewList = document.querySelector('#categoriesPreview .categoriesPreview-list');

LUZ ADRIANA MARTINEZ RAMIREZ

student•

Quizas las olvido, pero es cierto, el codigo sigue funcionando

Elber Liebermen

student•

La Ç ce cedilla o ce caudata, también llamada sencillamente cedilla, es una letra que consiste en una C latina con una pequeña z en forma de virgulilla debajo.

Pol Valle

student•

Os recuerdo que para trabajos tediosos como este podemos usar a GPT para que haga este trabajo por nosotros, esté es el Prompt que usé yo: . <prompt> Estoy creando una app, y tengo que crear el fichero nodes.js, el cual contendrá un queryselector de cada uno de los elementos principales de este código: . <<< aqui pegamos el condigo de index.html>>> . muestrame el código que deberia tener el fichero nodes.js </prompt> El resultado que me ha dado es el siguiente:

const header = document.querySelector('#header');
const arrow = document.querySelector('.header-arrow');
const title = document.querySelectorAll('.header-title');
const searchForm = document.querySelector('#searchForm');
const trendingPreview = document.querySelector('#trendingPreview');
const trendingTitle = document.querySelector('.trendingPreview-title');
const trendingBtn = document.querySelector('.trendingPreview-btn');
const movieList = document.querySelectorAll('.movie-container');
const categoriesPreview = document.querySelector('#categoriesPreview');
const categoriesTitle = document.querySelector('.categoriesPreview-title');
const categoryList = document.querySelectorAll('.category-container');
const genericList = document.querySelector('#genericList');
const movieDetail = document.querySelector('#movieDetail');
const movieTitle = document.querySelector('.movieDetail-title');
const movieScore = document.querySelector('.movieDetail-score');
const movieDescription = document.querySelector('.movieDetail-description');
const categoriesList = document.querySelectorAll('.categories-list .category-container');
const relatedMoviesTitle = document.querySelector('.relatedMovies-title');
const relatedMoviesContainer = document.querySelectorAll('.relatedMovies-scrollContainer .movie-container');

Luego ya seria rematar el output, espero que os sirva, un saludo

Luis Dominguez

student•

Aqui mi aporte, todo el código de navigarion.js

searchFormBtn.addEventListener('click', () => {
  location.hash = "#search=";
});

trendingBtn.addEventListener('click', () => {
  location.hash = "#trends";
});

arrowBtn.addEventListener('click', () => {
  location.hash = "#home";
});

window.addEventListener("DOMContentLoaded", navigator, false)
window.addEventListener("hashchange", navigator, false)

function navigator() {
  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()
  }
}

function homePage() {
  console.log("Home!!")

  headerSection.classList.remove('header-container--long');
  headerSection.style.background = '';
  arrowBtn.classList.add('inactive');
  headerTitle.classList.remove('inactive');
  headerCategoryTitle.classList.add('inactive');
  searchForm.classList.remove('inactive');

  trendingPreviewSection.classList.remove('inactive');
  categoriesPreviewSection.classList.remove('inactive');
  genericSection.classList.add('inactive');
  movieDetailSection.classList.add('inactive');

  getTrendingMoviesPreview()
  getCategoriesPreview()
}

function categoriesPage() {
  console.log("Categories!!")
  
  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');

}

function movieDetailsPage() {
  console.log("Movie!!")
  headerSection.classList.add('header-container--long');
  arrowBtn.classList.remove('inactive');
  arrowBtn.classList.add('header-arrow--white');
  headerTitle.classList.add('inactive');
  headerCategoryTitle.classList.add('inactive');
  searchForm.classList.add('inactive');

  trendingPreviewSection.classList.add('inactive');
  categoriesPreviewSection.classList.add('inactive');
  genericSection.classList.add('inactive');
  movieDetailSection.classList.remove('inactive');
}

function searchPage() {
  console.log("Search!!");

  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.remove('inactive');

  trendingPreviewSection.classList.add('inactive');
  categoriesPreviewSection.classList.add('inactive');
  genericSection.classList.remove('inactive');
  movieDetailSection.classList.add('inactive');

}

function trendsPage() {
  console.log("TRENDS!!");

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

Guadalupe Monge Barale

student•

Minuto 14.05 pensé que solo a mí me pasaban esas cosas Es animador saber que son errores comunes. :)

Jonathan Guidi

student•

Si, resulta tedioso ir añadiendo y quitando, elemento por elemento, clase por clase... Pero valdra la pena.. es importante para interiorizar conocimientos, es lo que ayudara a que mejores tu flujo de trabajo! Animos!

Yangetze González

company_admin•

Coincido!

fabio andres zamora osorio

student•

Tengo entendido que se llama router a un codigo que sirve para navegar entre las paginas de un sitio web, osea, ¿que lo que se creo en esta clase seria un router? y si es asi entonces ¿el router del que se habla en los frameworks react y vue esta creado de forma parecida al visto en esta clase?

Juan Castro

teacher•

¡Correcto! Más o menos. La clase anterior, esta clase y la siguiente son del módulo de routing / navegación. Hay muchas formas de impleementarla: con hashes, con rutas común y corrientes, con memoria (fe based routing básicamente)...

Spoiler: ahorita hay un curso sobre react router dom en https://platzi.com/router, pero próximamente saldrá uno renovado en ese mismo shortcut. :wink:

José Luis Encastin Flores

student•

Al agregar las el evento "click" a los botones y flechas con el addEventListener mi página se rompía. Se debía a que tenía mal el orden de los scripts en el index.html y por eso estaba usando los nodos sin estar declarados previamente en el orden en que lee el código el motor de javascript. Asegúrense de tener el orden correcto de los scripts: secrets, nodes, main, navigation.

Henry Alexander Velásquez Rosas

student•

Código 🔥

Les dejo el código de la clase 9 y 10 para que puedan ver rápidamente cuáles son las cosas que se agregaron y puedan adaptarlo a sus proyectos sin tener que marease mirando el video.

Código en GitHub 👈👀

Juan David Moreno Rodriguez

student•

grande Juan, ahorrándonos la pereza :v

Eliezer Hernandez

student•

En mi caso la página se refrescaba al seleccionar el botón de search. Resulta que ya que el botón se encuentra dentro de un formulario y no se especificó el tipo del botón; por lo que este ejecuta su evento por defecto. Hay varias maneras de solucionarlo, la más sencilla a mi parecer es agregar el tipo "button".

Hugo Orielso Cañas Lozano

student•

Estoy aprovechando el platziDay, pronto comprarè la suscripciòn y lo harè con detenimiento ahora estoy en carrera en ver como es un proyecto real antes de empezar uno para mi universidad

Chema F

student•

const ç = document.querySelector(' Se llama C trencada (o rota, en catalán o valenciano)')
//Es usada en Cataluña o la Comunidad Valenciana y su pronunciación es muy parecida a una _**S**_
//Soy de España, un saludo 💚

location.hash.startsWith('#trends')    ? trendsPage()       :
location.hash.startsWith('#search=')   ? searchPage()       :
location.hash.startsWith('#movie=')    ? movieDetailsPage() :
location.hash.startsWith('#category=') ? categoriesPage()   :
homePage()

const pages = [
    { name: 'trends', hashstart: '#trends', render: trendsPage },
    { name: 'search', hashstart: '#search=', render: searchPage },
    { name: 'movie', hashstart: '#movie=', render: movieDetailsPage },
    { name: 'category', hashstart: '#category', render: categoriesPage },
];

const navigator = () => {
    const hash = window.location.hash;
    let rendering = hash === '' ? homePage : error404;
    const searchIndexRenderPage = pages.findIndex((page) => hash.startsWith(page.hashstart));
    if (searchIndexRenderPage !== -1) rendering = pages[searchIndexRenderPage].render;
    rendering();
};

window.addEventListener('DOMContentLoaded', () => {
    navigator();
});

window.addEventListener('hashchange', () => {
    navigator();
});

const trendingMoviesPreviewList = document.querySelector('#trendingPreview .trendingPreview-movieList');

const categoriesPreviewList = document.querySelector('#categoriesPreview .categoriesPreview-list');

const header = document.querySelector('#header');
const arrow = document.querySelector('.header-arrow');
const title = document.querySelectorAll('.header-title');
const searchForm = document.querySelector('#searchForm');
const trendingPreview = document.querySelector('#trendingPreview');
const trendingTitle = document.querySelector('.trendingPreview-title');
const trendingBtn = document.querySelector('.trendingPreview-btn');
const movieList = document.querySelectorAll('.movie-container');
const categoriesPreview = document.querySelector('#categoriesPreview');
const categoriesTitle = document.querySelector('.categoriesPreview-title');
const categoryList = document.querySelectorAll('.category-container');
const genericList = document.querySelector('#genericList');
const movieDetail = document.querySelector('#movieDetail');
const movieTitle = document.querySelector('.movieDetail-title');
const movieScore = document.querySelector('.movieDetail-score');
const movieDescription = document.querySelector('.movieDetail-description');
const categoriesList = document.querySelectorAll('.categories-list .category-container');
const relatedMoviesTitle = document.querySelector('.relatedMovies-title');
const relatedMoviesContainer = document.querySelectorAll('.relatedMovies-scrollContainer .movie-container');

searchFormBtn.addEventListener('click', () => {
  location.hash = "#search=";
});

trendingBtn.addEventListener('click', () => {
  location.hash = "#trends";
});

arrowBtn.addEventListener('click', () => {
  location.hash = "#home";
});

window.addEventListener("DOMContentLoaded", navigator, false)
window.addEventListener("hashchange", navigator, false)

function navigator() {
  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()
  }
}

function homePage() {
  console.log("Home!!")

  headerSection.classList.remove('header-container--long');
  headerSection.style.background = '';
  arrowBtn.classList.add('inactive');
  headerTitle.classList.remove('inactive');
  headerCategoryTitle.classList.add('inactive');
  searchForm.classList.remove('inactive');

  trendingPreviewSection.classList.remove('inactive');
  categoriesPreviewSection.classList.remove('inactive');
  genericSection.classList.add('inactive');
  movieDetailSection.classList.add('inactive');

  getTrendingMoviesPreview()
  getCategoriesPreview()
}

function categoriesPage() {
  console.log("Categories!!")
  
  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');

}

function movieDetailsPage() {
  console.log("Movie!!")
  headerSection.classList.add('header-container--long');
  arrowBtn.classList.remove('inactive');
  arrowBtn.classList.add('header-arrow--white');
  headerTitle.classList.add('inactive');
  headerCategoryTitle.classList.add('inactive');
  searchForm.classList.add('inactive');

  trendingPreviewSection.classList.add('inactive');
  categoriesPreviewSection.classList.add('inactive');
  genericSection.classList.add('inactive');
  movieDetailSection.classList.remove('inactive');
}

function searchPage() {
  console.log("Search!!");

  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.remove('inactive');

  trendingPreviewSection.classList.add('inactive');
  categoriesPreviewSection.classList.add('inactive');
  genericSection.classList.remove('inactive');
  movieDetailSection.classList.add('inactive');

}

function trendsPage() {
  console.log("TRENDS!!");

  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 ç = document.querySelector(' Se llama C trencada (o rota, en catalán o valenciano)')
//Es usada en Cataluña o la Comunidad Valenciana y su pronunciación es muy parecida a una _**S**_
//Soy de España, un saludo 💚

Mostrando y ocultando secciones

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