Mostrando y ocultando secciones
Contenido del curso
Configuración inicial y maquetación del proyecto
Consumiendo la API
Navegación
Views
Próximos pasos
Mostrando y ocultando secciones
Contenido del curso
Mostrando y ocultando secciones
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🥴
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. 👌✌️
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.
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')
Qué elegancia la de francia
No sabía que se podían anidar ternarios! Qué buen aporte!
esta clase me abrio los ojos respecto alo asombroso que es el desarrollo web xd
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.
eso es correcto! ♥
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 :)
"Si tu tienes tu propio diseño: F" (Juandc, 2022) . Iré a seleccionar mis elementos y ahora vuelvo
:joy:
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(); });
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.
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
¿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?
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');
Quizas las olvido, pero es cierto, el codigo sigue funcionando
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
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'); }
Minuto 14.05 pensé que solo a mí me pasaban esas cosas Es animador saber que son errores comunes. :)
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!
Coincido!
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?
¡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:
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.
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 👈👀
grande Juan, ahorrándonos la pereza :v
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".
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
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 💚