From db0aa7abba359b04fc48eac049f4cde19331dc71 Mon Sep 17 00:00:00 2001 From: Robinson Rodriguez <126893454+robert-3r@users.noreply.github> Date: Fri, 7 Apr 2023 16:04:02 -0500 Subject: [PATCH 1/3] agregando una etiqueta h1 en el html --- index.html | 42 +++++++++++++++++++++++------------------- 1 file changed, 23 insertions(+), 19 deletions(-) diff --git a/index.html b/index.html index 6898894..d3c627d 100644 --- a/index.html +++ b/index.html @@ -1,23 +1,27 @@ - - - - - - - - - Sitio de peliculas - - -
+ + + + + + + + + Peliculas API + + +

Peliculas

+
-
- - -
+
+ + +
- - - \ No newline at end of file + + + From 4545e681639ec3f111147584cdad3ebf8987f49b Mon Sep 17 00:00:00 2001 From: Robinson Rodriguez <126893454+robert-3r@users.noreply.github> Date: Fri, 7 Apr 2023 16:20:11 -0500 Subject: [PATCH 2/3] intentando de nuevo papu --- index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/index.html b/index.html index d3c627d..41782f3 100644 --- a/index.html +++ b/index.html @@ -11,7 +11,7 @@ rel="stylesheet" /> - Peliculas API + Peliculas bad

Peliculas

From 8874217150174ee8fc1a840975fd11a367254e85 Mon Sep 17 00:00:00 2001 From: Robinson Rodriguez <126893454+robert-3r@users.noreply.github> Date: Fri, 7 Apr 2023 17:55:31 -0500 Subject: [PATCH 3/3] agregando una transformacion y transcicion al contendenor peliculas --- app.js | 89 ++++++++++++++++++++++++------------------------- estilos.css | 96 +++++++++++++++++++++++++++++------------------------ 2 files changed, 97 insertions(+), 88 deletions(-) diff --git a/app.js b/app.js index ff8d516..d787065 100644 --- a/app.js +++ b/app.js @@ -1,55 +1,54 @@ let pagina = 1; -const btnAnterior = document.getElementById('btnAnterior'); -const btnSiguiente = document.getElementById('btnSiguiente'); - -btnSiguiente.addEventListener('click', () => { - if(pagina < 1000){ - pagina += 1; - cargarPeliculas(); - } +const btnAnterior = document.getElementById("btnAnterior"); +const btnSiguiente = document.getElementById("btnSiguiente"); + +btnSiguiente.addEventListener("click", () => { + if (pagina < 1000) { + pagina += 1; + cargarPeliculas(); + } }); -btnAnterior.addEventListener('click', () => { - if(pagina > 1){ - pagina -= 1; - cargarPeliculas(); - } +btnAnterior.addEventListener("click", () => { + if (pagina > 1) { + pagina -= 1; + cargarPeliculas(); + } }); -const cargarPeliculas = async() => { - try { - const respuesta = await fetch(`https://api.themoviedb.org/3/movie/popular?api_key=192e0b9821564f26f52949758ea3c473&language=es-MX&page=${pagina}`); - - console.log(respuesta); - - // Si la respuesta es correcta - if(respuesta.status === 200){ - const datos = await respuesta.json(); - - let peliculas = ''; - datos.results.forEach(pelicula => { - peliculas += ` +const cargarPeliculas = async () => { + try { + const respuesta = await fetch( + `https://api.themoviedb.org/3/movie/popular?api_key=192e0b9821564f26f52949758ea3c473&language=es-MX&page=${pagina}` + ); + + console.log(respuesta); + + // Si la respuesta es correcta + if (respuesta.status === 200) { + const datos = await respuesta.json(); + + let peliculas = ""; + datos.results.forEach((pelicula) => { + peliculas += `

${pelicula.title}

`; - }); - - document.getElementById('contenedor').innerHTML = peliculas; - - } else if(respuesta.status === 401){ - console.log('Pusiste la llave mal'); - } else if(respuesta.status === 404){ - console.log('La pelicula que buscas no existe'); - } else { - console.log('Hubo un error y no sabemos que paso'); - } - - } catch(error){ - console.log(error); - } - -} - -cargarPeliculas(); \ No newline at end of file + }); + + document.getElementById("contenedor").innerHTML = peliculas; + } else if (respuesta.status === 401) { + console.log("Pusiste la llave mal"); + } else if (respuesta.status === 404) { + console.log("La pelicula que buscas no existe"); + } else { + console.log("Hubo un error y no sabemos que paso"); + } + } catch (error) { + console.log(error); + } +}; + +cargarPeliculas(); diff --git a/estilos.css b/estilos.css index 56c231a..5104f49 100644 --- a/estilos.css +++ b/estilos.css @@ -1,68 +1,78 @@ * { - margin: 0; - padding: 0; - box-sizing: border-box; + margin: 0; + padding: 0; + box-sizing: border-box; +} +h1{ + text-align: center; } - body { - font-family: 'Montserrat', sans-serif; - background: #e0e0e0; - color: #1d1d1d; + font-family: "Montserrat", sans-serif; + background: #e0e0e0; + color: #1d1d1d; } .contenedor { - width: 90%; - max-width: 1000px; - margin: 40px auto 100px auto; + width: 90%; + max-width: 1000px; + margin: 40px auto 100px auto; - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 40px; + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 40px; } .contenedor .pelicula { - text-align: center; + text-align: center; + cursor: pointer; + transition: all .3s ease-in-out; + } +.contenedor .pelicula:hover{ + transform: scale(1.2); + opacity: .8; +} + .contenedor .pelicula .titulo { - font-size: 16px; - font-weight: 600; + font-size: 16px; + font-weight: 600; } .contenedor .pelicula .poster { - width: 100%; - margin-bottom: 10px; - border-radius: 15px; + width: 100%; + margin-bottom: 10px; + border-radius: 15px; } .paginacion { - position: fixed; - bottom: 0; - background: #100a1f; - width: 100%; - display: flex; - justify-content: center; - gap: 20px; - padding: 10px; + position: fixed; + bottom: 0; + background: #100a1f; + width: 100%; + display: flex; + justify-content: center; + gap: 20px; + padding: 10px; } .paginacion button { - cursor: pointer; - border: none; - display: flex; - align-items: center; - justify-content: center; - text-align: center; - height: 50px; - width: 200px; - background: #241744; - color: #fff; - border-radius: 100px; - font-family: 'Montserrat', sans-serif; - font-weight: 600; - transition: .3s ease all; + cursor: pointer; + border: none; + display: flex; + align-items: center; + justify-content: center; + text-align: center; + height: 50px; + width: 200px; + background: #450fd0; + color: #fff; + border-radius: 100px; + font-family: "Montserrat", sans-serif; + font-weight: 600; + transition: 0.3s ease all; } .paginacion button:hover { - background: #137c32; -} \ No newline at end of file + background: #137c32; +}