Capo Juan!
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
No tienes acceso a esta clase
¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera
Aportes 26
Preguntas 3
Capo Juan!
Por defecto, el idioma en que nos devuelve las categorías es en inglés. Para mostrar las categorías en español, después de la API Key es necesario agregar
&language=es
para que los nombres de las categorías aparezcan en español. La URL completa debe quedar similar a esto:
https://api.themoviedb.org/3//genre/movie/list?api_key=<TU_API_KEY>&language=es
Les comparto por el momento esta de esta forma cargando las categorias y tendencias
hola, tuve un problema con lo que pasaba era esto:
este era el código:
y encontré esta solución con css grid:
y este es el codigo:
Mi aporte con el repositoio github:
Bueno, asi quedo mi versión de categorias, lo realizé inclusive antes de terminar de ver la clase completa y me salió a la primera 😃
Así va quedando mi proyecto.
Este es el repo.
Desktop:
Mobile:
yo lo llevaba asi pero viendo que son muchas categorias me tocara rediseñar mi menu de categorias…
Así va quedando el mio!
Otra forma de realizar la funcion getMoviesCategories:
async function getMoviesCategories(){
const res =await fetch(`https://api.themoviedb.org/3/genre/movie/list?api_key=8usda933asdahhreew33423`);
const data=await res.json();
console.log(data);
categories=data.genres;
console.log(categories);
categories.forEach(category => {
const categoryContainer=`
<div class="category-container">
<h3 id="id${category.id}" class="category-title">${category.name}</h3>
</div>
`;
const html = document.querySelector('#categoriesPreview .categoriesPreview-list').innerHTML;
document.querySelector('#categoriesPreview .categoriesPreview-list').innerHTML=categoryContainer+html;
});
}
Yo creo que es mas eficiente usar textContent o innerText en vez de TextNode
Hardcodear es escribir código que deberia ser automatizado o código que debería ser obtenido por el usuario final y no por el desarrollador
Lo único que le agregué de más fie en la “API_KEY”, el lenguaje ( Español)
Asi lo estoy quedando con vanilla javascript 😄
import getCategories from "../utils/getCategories";
const CategoriesPreview = async () => {
const categoriesMovies = await getCategories();
const categories = categoriesMovies.genres;
categories.forEach((category) => {
const categoriesPreviewContainer = document.querySelector(
"#categoriesPreview .categoriesPreview-list"
);
categoriesPreviewContainer.innerHTML += `
<div class="category-container">
<h3 id="id${category.id}" class="category-title">${category.name}</h3>
</div>`;
});
};
export default CategoriesPreview;
categories.forEach(category => {
const categoryContainer = `<div class ='category-container'>
<h3 class='category-title' id='id${category.id}'>${category.name}</h3>`
PreviewCategoriesContainer.innerHTML += categoryContainer;
});
}
excelente clase
Vamos genial. Comparto mi avance…
detalles y ya.
async function getCategoriesPreview(){
const res = await fetch('https://api.themoviedb.org/3/genre/movie/list?api_key='+API_KEY);
const data = await res.json();
const categories = data.genres;
console.log(data, categories);
categories.forEach(category =>{
const categoriesPreviewContainer = document.querySelector('#categoriesPreview .categoriesPreview-list');
const categoryContainer = document.createElement('div');
categoryContainer.classList.add('category-container');
const categoryTitle = document.createElement('h3');
categoryTitle.classList.add('category-title');
categoryTitle.setAttribute('id', 'id'+category.id);
const categoryTitleText = document.createTextNode(category.name);
categoryTitle.appendChild(categoryTitleText);
categoryContainer.appendChild(categoryTitle);
categoriesPreviewContainer.appendChild(categoryContainer);
});
}
Joder esto si es cine 🚬
Si tan solo huebiera una categoria menos se veria perfecto jajaja
Comparto el código con comentarios, si lo ocupas en texto dime
Asi va quedando mi proyecto, debo de adaptarlo a manera de desktop despues
Yo hice una concatenación diferente al momento de crear todas las etiquetas HTML. No sé si sea más óptimo, menos óptimo o de igual pero me parece mucho más amigable de leer y comprender, además que solamente fue copiar y pegar las etiquetas-modelo y cambiarles dos valores nada más:
const genres = data.genres;
console.log(genres);
genres.forEach(genre => {
const movieGenres = document.querySelector('#categoriesPreview .categoriesPreview-list');
movieGenres.innerHTML += `
<div class="category-container">
<h3 id="id${genre.id}" class="category-title">${genre.name}</h3>
</div>
`;
Es buenísimo este curso
Otra manera de poner el name del titulo en el H3:
categoryTitle.innerText = category.name;
Gran clase juan!
¿Quieres ver más aportes, preguntas y respuestas de la comunidad?
o inicia sesión.