Se puede buscar presionando intro, se añade una pantalla de carga mie…

…ntras busca.
syphire · Sep 24, 2016 · 5ef4f1d · 5ef4f1d
1 parent c9a7ffa
commit 5ef4f1d
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 13 deletions.
diff --git a/img/load.gif b/img/load.gif
diff --git a/index.html b/index.html
@@ -15,9 +15,11 @@
 				<div id="tapa">
 					<div id="pokeball-exterior">
 					</div>
-					<div id="barra-roja">
-					</div>
-					<div id="pokeball-interior">
+					<div id="tapa-interior">
+						<div id="barra-roja">
+						</div>
+						<div id="pokeball-interior">
+						</div>
 					</div>
 				</div>
 				<div id="union">
@@ -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('<h3>No hay ningún Pokémon que coincida con la búsqueda</h3>');
 											}
+											$("#imagen-carga").hide();
 										});
 									}
 
+									var siguientePagina = function() {
+
+									}
+
 									$('#buscar').click(getPokemon);
+									$('#boton-izquierda').click(siguientePagina);
+
+									$('#pokemon').keypress(function(e) {
+										if(e.which == 13) {
+											getPokemon();
+										}
+									});
 								});
 							</script>
 
@@ -88,6 +105,7 @@
 								<button id="buscar">Search</button>
 							</div>
 							<div id="resultado-busqueda">
+								<img id="imagen-carga" src="img/load.gif">
 								<div id="imagen-pokemon">
 								</div>
 								<div id="info-pokemon">

diff --git 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
@@ -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%