Lista de películas en tendencia
Contenido del curso
Configuración inicial y maquetación del proyecto
Consumiendo la API
Navegación
Views
Próximos pasos
Lista de películas en tendencia
Contenido del curso
Lista de películas en tendencia
Para los que quieren generar la API key:
Gracias por el aporte n.n
me salvastes la vida, por que nunca lo explica el maestro...
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.
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.
De hecho, pienso que en la mayoría de los casos es la mejor manera de aprender.
La URL base de las imágenes:
https://image.tmdb.org/t/p/w300/
Gracias!
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> `; });```
Hola, tuviste problemas ??
Lo único malo de hacerlo así es que para eventos no reconoce los elementos de ese HTML 😪.
Asi va quedando mi diseño :D
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}`);
gracias por tu ayuda , me funcionó
Enorme curso !!! Vamos a darle vida a Disney 💪🏼
Le agregue a mi estructura el titulo de la pelicula y la puntuacion 😊
si quieren ocultar la barra de navegacion Horizontal solo apliquen esta propiedad al css
.trendingPreview-movieList::-webkit-scrollbar { display: none; }
Gracias...pero si hago eso, no podré scrollear 😪
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
Spoiler: lo hacemos en algunas clases más adelante. :wink:
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.
¿como enlazo la API key? me dice que sin el acces token no puedo. le agradeceira mucho si me ayudas
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.
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)
Juan DC lo explica tan bien que todo parece tan facil 😁
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
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('')
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(); }
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> `) })
Es otra forma de llegar al mismo resultado. Personalmente también me gusta mucho. :D
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
asi quedo mi primera funcion para mostar las peliculas en tendencia
Requiero ayuda
Puedes arrastrar la imagen desde tu computadora hasta el editor de comentarios.
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.
