From 5ef4f1d0502082d9559d6f9c8654cfa840e09170 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Silvia=20Pin=CC=83eiro=20Fernandez?= Date: Sat, 24 Sep 2016 18:57:17 +0200 Subject: [PATCH] =?UTF-8?q?Se=20puede=20buscar=20presionando=20intro,=20se?= =?UTF-8?q?=20a=C3=B1ade=20una=20pantalla=20de=20carga=20mientras=20busca.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- img/load.gif | Bin 0 -> 25957 bytes index.html | 24 +++++++++++++++++++++--- style.css | 18 +++++++++++++----- style.sass | 20 +++++++++++++++----- 4 files changed, 49 insertions(+), 13 deletions(-) create mode 100644 img/load.gif diff --git a/img/load.gif b/img/load.gif new file mode 100644 index 0000000000000000000000000000000000000000..e2ab5e62da73bc539d6529a82f56dcc8f3209a38 GIT binary patch literal 25957 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
-
-
-
+
+
+
+
+
@@ -57,6 +59,9 @@ } var getPokemon = function(){ + $('#imagen-pokemon').html(''); + $('#info-pokemon').html(''); + $("#imagen-carga").show(); var pokemon = $('#pokemon').val().toLowerCase(); $.getJSON("http://pokeapi.co/api/v2/pokemon/" + pokemon + "/" + "?callback=", function(json) { if (json != "Nothing found.") { @@ -75,10 +80,22 @@ } else { $('#resultado-busqueda').html('

No hay ningún Pokémon que coincida con la búsqueda

'); } + $("#imagen-carga").hide(); }); } + var siguientePagina = function() { + + } + $('#buscar').click(getPokemon); + $('#boton-izquierda').click(siguientePagina); + + $('#pokemon').keypress(function(e) { + if(e.which == 13) { + getPokemon(); + } + }); }); @@ -88,6 +105,7 @@
+
diff --git a/style.css b/style.css index 185d9ba..c07a3ba 100644 --- a/style.css +++ b/style.css @@ -38,6 +38,9 @@ margin: 0 auto; border: 50px solid rgba(0, 0, 0, 0.3); } +#tapa-interior { + display: flex; } + #pokeball-interior { width: 60px; height: 60px; @@ -46,14 +49,13 @@ border: 9px solid #870909; position: absolute; z-index: 100; - margin: 85px auto auto 163px; } + margin: 85px auto auto -241px; } #barra-roja { width: 210px; height: 30px; background: #C00D0D; - position: absolute; - margin: 110px auto auto 96px; } + margin: 110px auto auto -307px; } #union { display: flex; @@ -122,8 +124,7 @@ margin: 30px auto auto 0px; } #boton-verde-dos { - margin: 60px auto auto 0px; - position: absolute; } + margin: 60px auto auto -20px; } #boton-azul { width: 60px; @@ -163,6 +164,7 @@ display: flex; flex-wrap: wrap; width: 100%; + height: 190px; margin: 20px; margin-bottom: 28px; border-radius: 3px; @@ -179,6 +181,12 @@ width: 100%; display: flex; } +#imagen-carga { + display: none; + width: 120px; + position: absolute; + margin: -50px auto auto 80px; } + #imagen-pokemon { width: 43%; height: 100%; diff --git a/style.sass b/style.sass index 1a2983f..e460b45 100644 --- a/style.sass +++ b/style.sass @@ -50,6 +50,9 @@ $gris-medio: #B0B0B0 margin: 0 auto border: 50px solid rgba(0, 0, 0, 0.3) +#tapa-interior + display: flex + #pokeball-interior width: 60px height: 60px @@ -58,14 +61,14 @@ $gris-medio: #B0B0B0 border: 9px solid $rojo-claro position: absolute z-index: 100 - margin: 85px auto auto 163px + margin: 85px auto auto -241px #barra-roja width: 210px height: 30px background: $rojo - position: absolute - margin: 110px auto auto 96px + //position: absolute + margin: 110px auto auto -307px #union display: flex @@ -134,8 +137,7 @@ $gris-medio: #B0B0B0 margin: 30px auto auto 0px #boton-verde-dos - margin: 60px auto auto 0px - position: absolute + margin: 60px auto auto -20px #boton-azul width: 60px @@ -175,6 +177,7 @@ $gris-medio: #B0B0B0 display: flex flex-wrap: wrap width: 100% + height: 190px margin: 20px margin-bottom: 28px border-radius: 3px @@ -188,11 +191,18 @@ $gris-medio: #B0B0B0 #caja-busqueda margin: 0 auto margin-top: 10px + //height: 40px #resultado-busqueda width: 100% display: flex +#imagen-carga + display: none + width: 120px + position: absolute + margin: -50px auto auto 80px + #imagen-pokemon width: 43% height: 100%