No tienes acceso a esta clase

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

¡Se acaba el precio especial! Aprende Inglés, AI, programación y más.

Antes: $249

Currency
$209
Suscríbete

Termina en:

1 Días
11 Hrs
49 Min
3 Seg

Lista de categorías

6/17
Recursos

Aportes 37

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

Capo Juan!

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…

Así va quedando el mio!

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

Yo creo que es mas eficiente usar textContent o innerText en vez de TextNode

Vamos genial. Comparto mi avance…

detalles y ya.

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

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)

  • &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; 

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

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

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

Templates Literals.-

Hola compañeros les comparto mi avance 😃

Gran clase juan!