Lista de categorías
Contenido del curso
Configuración inicial y maquetación del proyecto
Consumiendo la API
Navegación
Views
Próximos pasos
Lista de categorías
Contenido del curso
Lista de categorías
Hiram Rodriguez Gomez
Estudiante
Jonathan Guidi
Estudiante
Christopher David Erazo Herrera
Estudiante
oscar Ivan Toro Gonzalez
Estudiante
maximo galarza
Estudiante
Josue Cerron Tuesta
Estudiante
Carlos Rodríguez
Estudiante
Brandon Argel Verdeja Domínguez
Estudiante
Dario Paladines
Estudiante
Juan Castro
Profesor
Jorge Garcia
Estudiante
Jesús Emmanuel Jimenez Brito
Estudiante
Diego Iberri Ramírez
Estudiante
Diego Eduardo Téllez Contreras
Estudiante
Rigoberto Maldonado
Estudiante
Cayo Legal
EstudianteJuan Castro
Profesor
Walter Marvin Rodriguez Sanchez
Estudiante
Cristian Paiva
Estudiante
Eduardo Rodriguez Yapur
Estudiante
José Luis Encastin Flores
Estudiante
Christian Velázquez
Estudiante
David Guerrero Diaz
EstudianteChristian Velázquez
EstudianteGonzalo Tomas Orlando
Estudiante
Jorge Campero
EstudianteJuan Castro
Profesor
Gilbert Ardila
EstudianteJuan Castro
ProfesorGilbert Ardila
EstudiantePor 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
Buen aporte! Gracias!!
Les comparto por el momento esta de esta forma cargando las categorias y tendencias
que poder mi bro como lo hiciste?
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:
Gracias!
Mi aporte con el repositoio github:
Mi respositorio
Así va quedando mi proyecto. Este es el repo. Desktop:
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 :)
:clap:
yo lo llevaba asi pero viendo que son muchas categorias me tocara rediseñar mi menu de categorias...
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
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
Perfectamente válido :D
excelente clase
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}</h4> </div> `; const html = document.querySelector('#categoriesPreview .categoriesPreview-list').innerHTML; document.querySelector('#categoriesPreview .categoriesPreview-list').innerHTML=categoryContainer+html; }); }
Aguas con dejar tu API_KEY bro, en openSource no pasa nada, pero en APIs como las de google te pueden endeudar en un rato.
Lo único que le agregué de más fie en la "API_KEY", el lenguaje ( Español)
Asi lo estoy quedando con vanilla javascript :D
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}</h4> </div>`; }); }; export default CategoriesPreview;
Gracias por tu aporte. Me faltaba un "id", para que me salieran los colores.
Una pregunta, en el codigo de CSS como supo juan que ID llevaria cada categoria, que procedimiento tomo para saber la informacion?
Ir categoría por categoría recolectándolos manualmente No es lo mejor, idealmente debería haber un endpoint para consultar todas las categorías con sus respectivos colores
me hago un apregunata, me puedes explicar la diferencia de insertar el texto en el h3 usando createTextNode o innerText, gracias
Mira esta comparación: https://www.geeksforgeeks.org/difference-between-textcontent-and-innertext/
ohhh, entendido!!