The best comment " Esa película es horrible" jajaja
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
Aún no tienes acceso a esta clase
Crea una cuenta y continúa viendo este curso
Aportes 5
Preguntas 0
The best comment " Esa película es horrible" jajaja
¿Qué opinan de esta solución?
.
No sé si más adelante lo corrige el profe, pero al momento de entrar en una categoría que contiene un espacio en su título nos encontramos esto:
Pero pues lo podemos solucionar con un simple replace:p
Me quise adelantar a la clase y hice el filtro por las peliculas en tendencia jajaja F
const filterCategoriesMovies = async (category) => {
const {data} = await API.get('trending/movie/day')
const movies = data.results
const filterMovies = movies.filter(movie => movie.genre_ids.includes(category))
genericSection.innerHTML = ""
filterMovies.forEach(movie => {
const movieContainer = document.createElement('div')
movieContainer.classList.add('movie-container')
const img = document.createElement('img')
img.src = `https://image.tmdb.org/t/p/w300/${movie.poster_path}`
img.title = movie.original_title
img.alt = movie.original_title
img.classList.add('movie-img')
movieContainer.appendChild(img)
genericSection.appendChild(movieContainer)
})
headerCategoryTitle.style.after = filterMovies.length
}
const getCategories = async () => {
const {data} = await API.get('genre/movie/list')
const categories = data.genres
categoriesPreviewList.innerHTML = ""
categories.forEach(category => {
const categoryName = document.createElement('h3')
categoryName.classList.add('category-title')
categoryName.textContent = category.name
categoryName.id = `id${category.id}`
categoryName.onclick = () => {
location.hash = `category=${category.id}-${category.name}`
headerCategoryTitle.textContent = `Results for ${category.name.toLowerCase()} movies`
filterCategoriesMovies(category.id)
}
categoryContainer.appendChild(categoryName)
categoriesPreviewList.appendChild(categoryContainer)
})
}
La solución del profe en la unión del id con el nombre de la categoría se conoce como un slug
de dos variables, id and name.
.
La solución que yo agregado para tener los id y el name de la categoría en cada nodo es agregando un dataset la adición del atributo ‘data-namedataset’, esto es para hacer que el contenedor agreguemos un solo evento y aplciar la delegación de eventos detectando el target que sería en este caso el h3.
.
Es recomendable hacerlo así para optimizar carga de eventos y no hacerlo en cada loop.
getNode.categoriesPreviewList.addEventListener('click', (e) => {
const target = e.target;
if (target && target.nodeName === 'H3') {
const categoryContainerNode = target.parentNode;
const categoryID = categoryContainerNode.dataset.categoryid;
const categoryName = categoryContainerNode.dataset.categoryname.toLowerCase();
window.location.hash = `category=${categoryID}-${categoryName}`;
}
});
¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.