No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

No se trata de lo que quieres comprar, sino de quién quieres ser. Invierte en tu educación con el precio especial

Antes: $249

Currency
$209

Paga en 4 cuotas sin intereses

Paga en 4 cuotas sin intereses
Suscríbete

Termina en:

12 Días
0 Hrs
31 Min
20 Seg

Lista de categorías

6/17
Recursos

Aportes 36

Preguntas 4

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

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:

Mi respositorio

Así va quedando mi proyecto.
Este es el repo.
Desktop:

Mobile:

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 😃

yo lo llevaba asi pero viendo que son muchas categorias me tocara rediseñar mi menu de categorias…

esta es la manera correcta de agregar las categorias en idioma español:

async function getCategoriesPreview() {
    const res = await fetch ('https://api.themoviedb.org/3/genre/movie/list?api_key=' + API_KEY + '&language=es');
}

Así va quedando el mio!

Vamos genial. Comparto mi avance…

detalles y ya.

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

Que lindo se esta poniendo este curso. No esperaba menos de JuanDC!!! Gracias maestro 😃

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

Lo único que le agregué de más fie en la “API_KEY”, el lenguaje ( Español)

  • &language=es-Mx

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;

Otra manera de poner el name del titulo en el H3:

categoryTitle.innerText = category.name; 

asi va mi diseño…

Ahí vamos con todo. Excelente clase profe.

Si a alguien no le ha funcionado y le da ‘category is not defined’ la solución simplemente es cambiar el category por categories
Code:

const categoryTile = document.createElement('h3');
        categoryTile.classList.add('category-title');
        categoryTile.setAttribute('id', 'id' + categories.id);
        const categoryTileText = document.createTextNode(categories.name); 

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

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

no deberia crearse tambien el article donde estan todas las categorias adentro ? porque veo que solo creamos el div
Así va quedando mi versión de trending y categorías ![]()![](https://static.platzi.com/media/user_upload/Screenshot%202024-03-06%20at%2015.08.33-3749b09a-a861-4519-9542-ed1f666d4c83.jpg)
hola, tengo una duda, he notado que el profe juan suele manipular el DOM creando los "div", "img", etc... con "document.createElement", pero me parece un poco mas cómodo como lo hace el profe gndx en otros cursos, el cual en un "string" escribe todo el código HTML para luego insertarlo al documento (con innerHTML), mi pregunta es ¿saben si esto ultimo es una mala practica?.
GG ![](https://static.platzi.com/media/user_upload/image-f4b556d8-bb24-46bf-bd58-382376f3fa9f.jpg)

Yo use esta estructura para hacer todo mas facíl

const getCategoriesMoviesPreview = async () => {
    const options = {
        method: 'GET',
        headers: {
            accept: 'application/json',
            Authorization: API_KEY,
        },
    };

    const res = await fetch(
        'https://api.themoviedb.org/3/genre/movie/list?language=es',
        options
    );
    const data = await res.json();

    const categories = data.genres;
    console.log(categories);

    categories?.forEach((category) => {
        const categoriesPreviewMoviesContainer = document.querySelector(
            '#categoriesPreview > article'
        );

        categoriesPreviewMoviesContainer.insertAdjacentHTML(
            'beforeend',
            `

            <div class="category-container">
                <h3 id="${category.name}" class="category-title">${category.name}</h3>
            </div>
            
            `
        );
    });
};

Hola compañeros les comparto mi avance 😃

Gran clase juan!