Lista de categorías

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

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!