Lista de categorías

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:

Mi respositorio

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)

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

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!