No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Aprende todo un fin de semana sin pagar una suscripci贸n 馃敟

Reg铆strate

Comienza en:

1D
4H
38M
51S

Lista de categor铆as

6/17
Recursos

Aportes 26

Preguntas 3

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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 鈥淎PI_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!