Edmir Galván Vázquez
Orlando Díaz Torrealva
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
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
Juan Castro
ProfesorQué elegancia la de francia
Antonio Rafael González Ferrer
No sabía que se podían anidar ternarios! Qué buen aporte!
Alexander Gonzalez
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
eso es correcto! ♥
Ariel Ezequiel Biazzo Genua
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
Carlos Rodríguez
Julian Franco
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
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
¿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
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
Quizas las olvido, pero es cierto, el codigo sigue funcionando
Elber Liebermen
Pol Valle
Luis Dominguez
Guadalupe Monge Barale
Minuto 14.05 pensé que solo a mí me pasaban esas cosas Es animador saber que son errores comunes. :)
Jonathan Guidi
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_adminCoincido!
fabio andres zamora osorio
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
Profesor¡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
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
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
grande Juan, ahorrándonos la pereza :v
Eliezer Hernandez
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
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
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 💚
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🥴
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')
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(); });
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'); }
