├── README.md
├── app.js
├── estilos.css
├── img
    └── thumb.png
└── index.html


/README.md:
--------------------------------------------------------------------------------
1 | # Como Conectarse a una API con Javascript usando Async, Await y Fetch
2 | ### [Tutorial: https://youtu.be/PNr8-JDMinU](https://youtu.be/PNr8-JDMinU)
3 | 
4 | ![Como Conectarse a una API con Javascript usando Async, Await y Fetch](https://raw.githubusercontent.com/falconmasters/como-conectarse-a-una-api-javascript/master/img/thumb.png)
5 | 
6 | Por: [FalconMasters](http://www.falconmasters.com)


--------------------------------------------------------------------------------
/app.js:
--------------------------------------------------------------------------------
 1 | let pagina = 1;
 2 | const btnAnterior = document.getElementById('btnAnterior');
 3 | const btnSiguiente = document.getElementById('btnSiguiente');
 4 | 
 5 | btnSiguiente.addEventListener('click', () => {
 6 | 	if(pagina < 1000){
 7 | 		pagina += 1;
 8 | 		cargarPeliculas();
 9 | 	}
10 | });
11 | 
12 | btnAnterior.addEventListener('click', () => {
13 | 	if(pagina > 1){
14 | 		pagina -= 1;
15 | 		cargarPeliculas();
16 | 	}
17 | });
18 | 
19 | const cargarPeliculas = async() => {
20 | 	try {
21 | 		const respuesta = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=192e0b9821564f26f52949758ea3c473&language=es-MX&page=${pagina}`);
22 | 	
23 | 		console.log(respuesta);
24 | 
25 | 		// Si la respuesta es correcta
26 | 		if(respuesta.status === 200){
27 | 			const datos = await respuesta.json();
28 | 			
29 | 			let peliculas = '';
30 | 			datos.results.forEach(pelicula => {
31 | 				peliculas += `
32 | 					<div class="pelicula">
33 | 						<img class="poster" src="https://image.tmdb.org/t/p/w500/${pelicula.poster_path}">
34 | 						<h3 class="titulo">${pelicula.title}</h3>
35 | 					</div>
36 | 				`;
37 | 			});
38 | 
39 | 			document.getElementById('contenedor').innerHTML = peliculas;
40 | 
41 | 		} else if(respuesta.status === 401){
42 | 			console.log('Pusiste la llave mal');
43 | 		} else if(respuesta.status === 404){
44 | 			console.log('La pelicula que buscas no existe');
45 | 		} else {
46 | 			console.log('Hubo un error y no sabemos que paso');
47 | 		}
48 | 
49 | 	} catch(error){
50 | 		console.log(error);
51 | 	}
52 | 
53 | }
54 | 
55 | cargarPeliculas();


--------------------------------------------------------------------------------
/estilos.css:
--------------------------------------------------------------------------------
 1 | * {
 2 | 	margin: 0;
 3 | 	padding: 0;
 4 | 	box-sizing: border-box;
 5 | }
 6 | 
 7 | body {
 8 | 	font-family: 'Montserrat', sans-serif;
 9 | 	background: #e0e0e0;
10 | 	color: #1d1d1d;
11 | }
12 | 
13 | .contenedor {
14 | 	width: 90%;
15 | 	max-width: 1000px;
16 | 	margin: 40px auto 100px auto;
17 | 
18 | 	display: grid;
19 | 	grid-template-columns: repeat(4, 1fr);
20 | 	gap: 40px;
21 | }
22 | 
23 | .contenedor .pelicula {
24 | 	text-align: center;
25 | }
26 | 
27 | .contenedor .pelicula .titulo {
28 | 	font-size: 16px;
29 | 	font-weight: 600;
30 | }
31 | 
32 | .contenedor .pelicula .poster {
33 | 	width: 100%;
34 | 	margin-bottom: 10px;
35 | 	border-radius: 15px;
36 | }
37 | 
38 | .paginacion {
39 | 	position: fixed;
40 | 	bottom: 0;
41 | 	background: #100a1f;
42 | 	width: 100%;
43 | 	display: flex;
44 | 	justify-content: center;
45 | 	gap: 20px;
46 | 	padding: 10px;
47 | }
48 | 
49 | .paginacion button {
50 | 	cursor: pointer;
51 | 	border: none;
52 | 	display: flex;
53 | 	align-items: center;
54 | 	justify-content: center;
55 | 	text-align: center;
56 | 	height: 50px;
57 | 	width: 200px;
58 | 	background: #241744;
59 | 	color: #fff;
60 | 	border-radius: 100px;
61 | 	font-family: 'Montserrat', sans-serif;
62 | 	font-weight: 600;
63 | 	transition: .3s ease all;
64 | }
65 | 
66 | .paginacion button:hover {
67 | 	background: #137c32;
68 | }


--------------------------------------------------------------------------------
/img/thumb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/falconmasters/como-conectarse-a-una-api-javascript/bc82adbedbd6334dd5d1236dc87719597c40d233/img/thumb.png


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | <head>
 4 | 	<meta charset="UTF-8">
 5 | 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 | 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
 7 | 	<link rel="preconnect" href="https://fonts.googleapis.com">
 8 | 	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
 9 | 	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@600&display=swap" rel="stylesheet">
10 | 	<link rel="stylesheet" href="estilos.css">
11 | 	<title>Sitio de peliculas</title>
12 | </head>
13 | <body>
14 | 	<div class="contenedor" id="contenedor"></div>
15 | 
16 | 	<div class="paginacion">
17 | 		<button id="btnAnterior">Anterior</button>
18 | 		<button id="btnSiguiente">Siguiente</button>
19 | 	</div>
20 | 
21 | 	<script src="app.js"></script>
22 | </body>
23 | </html>


--------------------------------------------------------------------------------