Angel Hernandez
Para los que quieren generar la API key:
Juan David Reyes
Gracias por el aporte n.n
José Ángel Soriano Soriano
me salvastes la vida, por que nunca lo explica el maestro...
Oscar Fuentes Esteves
Importante perderle el miedo a la documentación, yo sé que abruma de repente ver mucho texto y código.
JD lo hace ver fácil, pero si sabes que buscar, lo demás lo puedes ignorar... claro, hasta que algo falla.
Hiram Rodriguez Gomez
De acuerdo. Desde hace varios cursos, he aprendido que la mejor manera de profundizar en el conocimiento es leyendo tanto la documentación como material adicional a las clases.
Yangetze González
Company_adminDe hecho, pienso que en la mayoría de los casos es la mejor manera de aprender.
John Caballero
Juan Becerra
Hola, tuviste problemas ??
Ricardo Alfonso Chavez Vilcapoma
Lo único malo de hacerlo así es que para eventos no reconoce los elementos de ese HTML 😪.
Fernando Francisco López Mauro
Asi va quedando mi diseño :D
Guadalupe Monge Barale
La url para las imágenes de las pelis. Es así, según la documentación . Para crear una URL de imagen, necesitará 3 datos. El base_url, sizey file_path. Simplemente, combínelos todos y tendrá una URL completamente calificada. Aquí hay una URL de ejemplo:
https://image.tmdb.org/t/p/w500/8uO0gUM8aNqYLs1OsTBQiXu0fEv.jpg
Por eso nuestro código queda así
img.setAttribute('src', `https://image.tmdb.org/t/p/w300/${movie.poster_path}`);
Julian David Alzate Cuervo
gracias por tu ayuda , me funcionó
tiken .
Enorme curso !!! Vamos a darle vida a Disney 💪🏼
Dario Paladines
Le agregue a mi estructura el titulo de la pelicula y la puntuacion 😊
Eric Alvarez
si quieren ocultar la barra de navegacion Horizontal solo apliquen esta propiedad al css
.trendingPreview-movieList::-webkit-scrollbar { display: none; }
Ricardo Alfonso Chavez Vilcapoma
Gracias...pero si hago eso, no podré scrollear 😪
Carlos Rodríguez
El nodo siguiente donde está contenido todas las imagenes debe estar fuera del forEach para que no seleccione dicho nodo cada vez que se pase por un elemento:
const rendingPreviewMoviesContainer = document.querySelector( '#trendingPreview .trendingPreview-movieList', );
. Repositorio del Commit
Juan Castro
ProfesorSpoiler: lo hacemos en algunas clases más adelante. :wink:
Ricardo Alfonso Chavez Vilcapoma
Ahí vamos...yo tomé el diseño del profe a manera de práctica, ya que al entrar a un trabajo, no se comienza un proyecto desde cero sino tenemos que acoplarnos a lo que se tiene hasta el momento.
Así que ya luego lo maquillaré cuando la funcionalidad esté hecha.
Fernando Meneses
¿como enlazo la API key? me dice que sin el acces token no puedo. le agradeceira mucho si me ayudas
Ricardo Alfonso Chavez Vilcapoma
Saludos estimado Diego. Si ya tienes tu API KEY, en la clase 3 del curso el profesor muestra que lo puedes hacer mediante query parameters.
jose zuñiga
Jeaneth Tafur Huaman
Juan DC lo explica tan bien que todo parece tan facil 😁
Jonathan HERNANDEZ
Pueda ser que muchos algunos no tengan una aplicación URL como le pide themoviedb a la hora de crear la API, Aquí. Le dejo lo que tienen que poner en ese campo. SOLO PONGAN: N/A
Orlando Leyva acosta
Yo agrego el html de esta forma.
movies.forEach(movie => { let htmlCode = ` <div class="movie-container"> <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" class="movie-img" alt="Nombre de la película"/> </div> ` trendingListeTemplate.push(htmlCode); }); trendingPreviewMovieList.innerHTML = trendingListeTemplate.join('')
Santiago Lopera Naranjo
Con el fin de probar diversos endpoints, cree la funcion de forma que tuviera los parametros por defecto que usa Juanda, pero dejando con la posibilidad de pasarle otras categorías, y tiempos:
const VERSION = '3' const API_BASE = `https://api.themoviedb.org/${VERSION}` async function getTrendingMoviesPreview(media_type='movie',time_window='day') { const response = await fetch(`${API_BASE}/trending/${media_type}/${time_window}?api_key=${API_KEY}`) const data = await response.json(); }
Edgardo Andres Vargas Saenz
Juan Castro
ProfesorEs otra forma de llegar al mismo resultado. Personalmente también me gusta mucho. :D
Jonathan Alfonso
Edgardo, yo intente hacer algo parecido, pero con innerHTML, pero no pude asignarle la función al hacer click en movie-container. Ya que no se puede seleccionar el elemento de forma directa como si fuese una variable, ni acceder a el creandolo en node, porque aún no existe, y al intentar hacerlo con un onclick(funcion) dentro de la funcion no reconoce la funcion porque aún no se a declarado y colocando la funcón por fuera no reconoce a movie porque esta dentro de la función. ¿Pudiste solucionar esto de alguna forma? Me gustaría saberlo
Andrés Camilo Salgado
asi quedo mi primera funcion para mostar las peliculas en tendencia
Pablo Humberto Arriola Agudelo
Requiero ayuda
Juan Castro
ProfesorPuedes arrastrar la imagen desde tu computadora hasta el editor de comentarios.
Humberto Cruz
asi va mi proyectico de películas despues de un buen tiempo sin programar, estoy haciendo el proyecto con web componets para tratar de asemejarme un poco a lo que haria en react.
tambien hice la parte de los detalles de las peliculas.
De momento uso esta forma para agregar el html.
Despues vere que problemas hay con esa forma.
movies.forEach(movie => { trendingPreviewMoviesContainer.innerHTML += ` <div class="movie-container"> <img src="https://image.tmdb.org/t/p/w300${movie.poster_path}" class="movie-img" alt=${movie.title}/> </div> `; });```
Les dejo mi función solución aplicando el método optimo de agregar varios nodos dado en el curso de manipulación del DOM.
const URL_API = 'https://api.themoviedb.org/3/trending/movie/day?api_key='+Api_key; const URL_IMG = 'https://image.tmdb.org/t/p/w300' async function getTrendingMoviesPreview(URL_API){ const res = await fetch(URL_API); const data = await res.json(); const movies = data.results; // console.log({data, movies}); const nodosMovies = movies.map(movie => { const divMovieContainer = document.createElement('DIV'); divMovieContainer.className = 'movie-container'; const imgMovieContainer = document.createElement('IMG'); imgMovieContainer.className = 'movie-img'; imgMovieContainer.setAttribute('alt', 'original_title'); imgMovieContainer.setAttribute('src', URL_IMG+movie.poster_path); divMovieContainer.appendChild(imgMovieContainer); return divMovieContainer; }); const trendingPreviewMovieList = document.querySelector('#trendingPreview .trendingPreview-movieList'); trendingPreviewMovieList.append(...nodosMovies); } getTrendingMoviesPreview(URL_API)
Qué diferencia hay existe si creo los elementos con insertAdjacentHTML.
movies.forEach(movie => { trendingPreviewMovieList.insertAdjacentHTML('beforeend', ` <div class='movie-container'> <img src='https://image.tmdb.org/t/p/w300/${movie.poster_path}' class='movie-img' alt='${movie.title}' /> </div> `) })
