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
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
Jonathan Guidi
EstudianteBuen aporte! Gracias!!
Christopher David Erazo Herrera
EstudianteLes comparto por el momento esta de esta forma cargando las categorias y tendencias
oscar Ivan Toro Gonzalez
Estudianteque poder mi bro como lo hiciste?
maximo galarza
Estudiantehola, 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:
Josue Cerron Tuesta
EstudianteGracias!
Carlos Rodríguez
EstudianteMi aporte con el repositoio github:
Mi respositorio
Brandon Argel Verdeja Domínguez
EstudianteAsí va quedando mi proyecto. Este es el repo. Desktop:
Dario Paladines
EstudianteBueno, asi quedo mi versión de categorias, lo realizé inclusive antes de terminar de ver la clase completa y me salió a la primera :)
Juan Castro
Profesor:clap:
Jorge Garcia
Estudianteyo lo llevaba asi pero viendo que son muchas categorias me tocara rediseñar mi menu de categorias...
Jesús Emmanuel Jimenez Brito
EstudianteHardcodear 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
Diego Iberri Ramírez
Estudianteesta 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'); }
Diego Eduardo Téllez Contreras
EstudianteAsí va quedando el mio!
Rigoberto Maldonado
EstudianteVamos genial. Comparto mi avance..
detalles y ya.
Cayo Legal
EstudianteYo creo que es mas eficiente usar textContent o innerText en vez de TextNode
Juan Castro
ProfesorPerfectamente válido :D
Gonzalo Tomas Orlando
Estudiante
Walter Marvin Rodriguez Sanchez
Estudianteexcelente clase
Cristian Paiva
EstudianteQue lindo se esta poniendo este curso. No esperaba menos de JuanDC!!! Gracias maestro :)
Eduardo Rodriguez Yapur
EstudianteOtra 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; }); }
José Luis Encastin Flores
EstudianteAguas con dejar tu API_KEY bro, en openSource no pasa nada, pero en APIs como las de google te pueden endeudar en un rato.
Christian Velázquez
EstudianteLo único que le agregué de más fie en la "API_KEY", el lenguaje ( Español)
David Guerrero Diaz
EstudianteAsi 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;
Christian Velázquez
EstudianteGracias por tu aporte. Me faltaba un "id", para que me salieran los colores.
Jorge Campero
EstudianteUna pregunta, en el codigo de CSS como supo juan que ID llevaria cada categoria, que procedimiento tomo para saber la informacion?
Juan Castro
ProfesorIr 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
Gilbert Ardila
Estudianteme hago un apregunata, me puedes explicar la diferencia de insertar el texto en el h3 usando createTextNode o innerText, gracias
Juan Castro
ProfesorMira esta comparación: https://www.geeksforgeeks.org/difference-between-textcontent-and-innertext/
Gilbert Ardila
Estudianteohhh, entendido!!