-
Notifications
You must be signed in to change notification settings - Fork 62
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
DataLovers POKENDIA GO! #37
base: master
Are you sure you want to change the base?
Changes from 1 commit
1d39a00
5f49205
0936ab1
fc63ed1
f796e8a
4b7ddc8
f631a55
d44060f
6d55e4b
1b15720
84df0b6
d2f2b80
860a734
ace7bc6
55a130e
a2a86d5
dfa1c2e
8b1d6cc
88cc405
7443a4a
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,58 @@ | ||
//Ordenado | ||
const sortData = (data, sortBy, sortOrder) => { | ||
let arrOrdPok = []; //Array Ordenar Pokemones | ||
|
||
/* Orden Alfabetico descendente y ascendente */ | ||
if (sortBy === 'name') { | ||
if (sortOrder === 'A-Z') { | ||
arrOrdPok = data.sort(function(abc, bcd) { | ||
if (abc.name > bcd.name) return 1; | ||
if (abc.name === bcd.name) return 0; | ||
return -1; | ||
}); | ||
|
||
} else { | ||
arrOrdPok = data.sort(function(abc, bcd) { | ||
if (bcd.name > abc.name) return 1; | ||
if (bcd.name === abc.name) return 0; | ||
return -1; | ||
}); | ||
} | ||
|
||
/* Orden por ID */ | ||
} else if (sortBy === 'number') { | ||
if (sortOrder === 'asc') { | ||
arrOrder = data.sort(function(abc, bcd) { | ||
if (abc.id > bcd.id) return 1; | ||
if (abc.id === bcd.id) return 0; | ||
return -1; | ||
}); | ||
} else { | ||
arrOrdPok = data.sort(function(abc, bcd) { | ||
if (bcd.id > abc.id) return 1; | ||
if (bcd.id === abc.id) return 0; | ||
return -1; | ||
}); | ||
} | ||
} | ||
return arrOrdPok; | ||
}; | ||
|
||
//Filtrado | ||
const filterData = (data, condition) => { | ||
let arrType = []; | ||
for (let i = 0; i < data.length; i++) { | ||
for (let x = 0; x < data[i].type.length; x++) { | ||
if (data[i].type[x] === condition) { | ||
arrType.push(data[i]); | ||
} | ||
} | ||
} | ||
return arrType; | ||
}; | ||
|
||
window.poke= { | ||
sortData, | ||
filterData | ||
}; | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Muy buen trabajo! |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,7 +8,6 @@ | |
<meta http-equiv="X-UA-Compatible" content="ie=edge"> | ||
<link rel="stylesheet" href="style.css"> | ||
</head> | ||
|
||
<body> | ||
|
||
<!--Primera pantalla iniciar sesión --> | ||
|
@@ -20,21 +19,17 @@ <h1> INICIAR SESIÓN </h1> | |
<p><input id="Password" class="userData" type="text" name="Contraseña" placeholder="Contraseña"></p> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Es preferible escribir los id y clases en mayúsculas y elegir como hacerlo, si será en camel case todo en camel case o Pascal case, pero elegir solo uno para tener un mejor orden. |
||
<a href="#menu" title="close"><button id="enter" class="button-enter" name="Entra">Ingresar</button></a> | ||
</form> | ||
<a href="https://www.instagram.com/pokemongoapp/?hl=es-la"><img class="socialMedia" | ||
src="./imagenes-pokemon/instagram.svg"></a> | ||
<a href="https://www.instagram.com/pokemongoapp/?hl=es-la"><img class="socialMedia" src="./imagenes-pokemon/instagram.svg"></a> | ||
<a href="https://www.facebook.com/PokemonGO/"><img class="socialMedia" src="./imagenes-pokemon/facebook.svg"></a> | ||
<a href="https://myaccount.google.com/intro"> <img class="socialMedia" src="./imagenes-pokemon/google.svg"></a> | ||
<div class="newUser"> | ||
</p> | ||
<h3>¿Eres usuario nuevo?</h3> | ||
<a href="#sign-in" title="login">Crear Cuenta</a> | ||
</div> | ||
<div class="newUser"></p><h3>¿Eres usuario nuevo?</h3> | ||
<a href="#sign-in" title="login">Crear Cuenta</a></div> | ||
</section> | ||
|
||
|
||
<!-- Segunda pantalla Crear cuenta --> | ||
<section id="sign-in" class="page2"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. La clase del container debería ser más descriptiva y así evitamos añadir comentarios innecesarios. |
||
<a href="#log-in" title="close"><img class="closeIcon" src="./imagenes-pokemon/closeAmarrillo.svg" /></a> | ||
<a href="#log-in" title="close"><img class="closeIcon"src="./imagenes-pokemon/closeAmarrillo.svg" /></a> | ||
<h2> CREAR CUENTA</h2> | ||
<form class="newUserForm"> | ||
<p><input id="User2" class="userData" type="text" name="Usuario" placeholder="Nombre de Usuario"></p> | ||
|
@@ -48,14 +43,14 @@ <h4>Iniciar con </h4> | |
<img class="socialMedia" src="./imagenes-pokemon/instagram.svg"></a> | ||
<a href="https://www.facebook.com/PokemonGO/"> | ||
<img class="socialMedia" src="./imagenes-pokemon/facebook.svg"></a> | ||
<a href="https://myaccount.google.com/intro"> | ||
<a href="https://myaccount.google.com/intro"> | ||
<img class="socialMedia" src="./imagenes-pokemon/google.svg"></a> | ||
</section> | ||
|
||
|
||
<!-- Tercera pantalla. Pantalla principal de Pokendia Go! Menú --> | ||
<section id="menu" class="homepage"> | ||
<p class="titlePokemon">BIENVENIDX</p> | ||
<p class="titlePokemon" >BIENVENIDX</p> | ||
<form> | ||
|
||
<div id="button-red"> | ||
|
@@ -70,17 +65,16 @@ <h4>Iniciar con </h4> | |
|
||
<div class="blueButton"> | ||
OFFLINE </div> | ||
<a href="https://pokemongolive.com/es/" title="close"><button id="download" class="blueButton" | ||
type="button">Descargar versión Lite</button></a> | ||
</form> | ||
<a href="https://pokemongolive.com/es/" title="close"><button id="download" class="blueButton" type="button">Descargar versión Lite</button></a> | ||
</form> | ||
<a href="#homepage" title="close"><button id="close" class="blueButton" type="button">CERRAR SESIÓN</button></a> | ||
<div class="button-blue"> | ||
<p>Offline</p> | ||
<p>Offline</p> | ||
|
||
<label class="switch"> | ||
<input type="checkbox" checked> | ||
<span class="slider round"></span> | ||
</label> | ||
<span class="slider round"></span> | ||
</label> | ||
</div> | ||
</div> | ||
</section> | ||
|
@@ -90,24 +84,27 @@ <h4>Iniciar con </h4> | |
<img class="closeIcon" src="./imagenes-pokemon/closeRojo.svg" /></a> | ||
<h1>POKÉMONES </h1> | ||
<form> | ||
<p><input id="Search" class="space" type="text" name="Buscar" placeholder="Búsqueda"></p> | ||
<p><button id="friend" class="click" type="button">Elegir acompañante</button></p> | ||
<button id="test"></button> | ||
<!-- <p><input id="Search" class="space" type="text" name="Buscar" placeholder="Búsqueda"></p> | ||
<button id="test"></button> --> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Código que no se utilice debemos borrarlo :) |
||
</form> | ||
<div id="listPoke"> | ||
|
||
<!-- Ordenado y filtrado de pokemones --> | ||
|
||
<div id="listdePokemones"> | ||
<div id="listOrderPoke"> | ||
<select id="orderpokemon" class="type-select"> | ||
<option value="00">Ordena por...</option> | ||
<option value="01"> N° Descendente</option> | ||
<option value="02"> N° Ascendente</option> | ||
<option value="03"> A-Z</option> | ||
<option value="04"> Z-A</option> | ||
</select> | ||
<select id="orderpokemon" class="type-select"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Elegir un idioma para nuestro código, de preferencia en inglés :) |
||
<option > Ordenar por ...</option> | ||
<option value="00"> N° Descendente </option> | ||
<option value="01"> N° Ascendente </option> | ||
<option value="02"> A - Z </option> | ||
<option value="03"> Z - A </option> | ||
</select> | ||
</div> | ||
|
||
<div id="listTypePoke" class="fortype"> | ||
<!-- Listado de pokemones por tipo --> | ||
<div id="listTypePoke"> | ||
<select id="typepokemon"> | ||
<option value="00">Por tipo ...</option> | ||
<option value="00">Filtrar...</option> | ||
<option value="01">Agua</option> | ||
<option value="02">Bicho</option> | ||
<option value="03">Dragon</option> | ||
|
@@ -124,42 +121,41 @@ <h1>POKÉMONES </h1> | |
<option value="13">Veneno</option> | ||
<option value="14">Volador</option> | ||
</select> | ||
<!--Aquí se va mostrar imagen, nombre y numero que se esta llamando a partir de main.js --> | ||
<div id="allThePokemones"> </div> | ||
</div> | ||
|
||
<!-- agregado recientemente --> | ||
|
||
<div id="lista"> | ||
</div> | ||
<div id="cardRotada"> | ||
</div> | ||
|
||
|
||
<!-- Tarjeta de información del pokemon --> | ||
<div id="lista"> | ||
</div> | ||
<div id="cardRotada"> | ||
</div> | ||
|
||
<div id="myModal" class="modal"> | ||
<div id="close" class="close">×</div> | ||
<div id="infoPoke"></div> | ||
</div> | ||
<!-- hasta aqui --> | ||
|
||
</section> | ||
<div id="myModal" class="modal"> | ||
<div id="close" class="close">×</div> | ||
<div id="infoPoke"></div> | ||
</div> | ||
|
||
<!-- Tarjeta de información del pokemon --> | ||
<section id="pokemon-file"> | ||
<!-- <section id="pokemon-file"> | ||
<a href="#menu" title="close"><img class="closeIcon" src="./imagenes-pokemon/closeRojo.svg" /></a> | ||
|
||
<h3 id="pokemon-name">Pokémon</h3> | ||
<h4 id="pokemon-type">Tipo</h4> | ||
<div id="pokemon-image">Imagen</div> | ||
</section> | ||
|
||
--> | ||
<!-- Pantalla 4, CENTROS POKEMON --> | ||
<section id="pokemon-centers"> | ||
<a href="#menu" title="close"> | ||
<img class="closeIcon" src="./imagenes-pokemon/closeRojo.svg" /></a> | ||
<img class="closeIcon" src="./imagenes-pokemon/closeRojo.svg" /></a> | ||
<h2>CENTROS POKEMÓN</h2> | ||
<div class="button-blue"> | ||
<p>Offline</p> | ||
<label class="switch"> | ||
<input type="checkbox" checked> | ||
<span class="slider round"></span></p> | ||
<label class="switch"> | ||
<input type="checkbox" checked> | ||
<span class="slider round"></span></p> | ||
</div> | ||
<div class="conteiner"> | ||
<h3>Zonas cercanas de Centros Pokemón</h3> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Just a typo, should be "container" :) |
||
|
@@ -171,10 +167,11 @@ <h3>Votación para nuevos Centros Pokemón</h3> | |
<p>Si quieres sugerir un nuevo Centro Pokemón, ubicate en la zona y da click en el bóton</p> | ||
<p><button id="new" class="click4" type="button">Nuevo Centro Pokémon</button></p> | ||
</section> | ||
<script type="module" src="./pokemon.js"></script> | ||
|
||
<script type="module" src="./data/pokemon/pokemon.js"></script> | ||
<script type="module" src="main.js"></script> | ||
<script type="module" src="data.js"></script> | ||
|
||
<script type="module" src="data.js"></script> | ||
|
||
</body> | ||
|
||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,86 @@ | ||
import data from "./pokemon.js"; | ||
import pokemon from "./pokemon.js"; | ||
//import pokemon from "./pokemon.js"; | ||
|
||
//Devuelve el primer elemento que es #allThePokemones. | ||
let list = document.querySelector ('#allThePokemones') | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Los paréntesis deben estar junto al método: |
||
let catalogue1= data.pokemon; | ||
|
||
//Mostramos en consola los arrays | ||
console.log (catalogue1); | ||
|
||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Los console log solo nos sirven para debuggear, no hay que subirlos a github :) |
||
//Se diseña la tarjeta donde se mostrarán los pokémones | ||
function generatePokeCard(pokemon){ | ||
let div = document.createElement ('div') | ||
div.innerHTML = ` | ||
<div class="card"> | ||
<img src="${pokemon.img}"/> | ||
<p>${pokemon.id}</p> | ||
<p><p>${pokemon.name}</p> | ||
<p>${pokemon.type}</p> | ||
<p>${pokemon.weaknesses}</p> | ||
</div> | ||
` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Cuidar la indentación :) |
||
return div | ||
} | ||
|
||
// 1.- recorrer (for each) | ||
catalogue1.forEach(poke=>{ | ||
//2.- dibujar cada card | ||
//3.- colocar!!!!!! cada card en la lista | ||
list.appendChild(generatePokeCard(poke)) | ||
}); | ||
|
||
//Ordenar los datos | ||
document.getElementById('orderpokemon').addEventListener('click', (evt)=>{ | ||
const selectedIndex = evt.currentTarget.selectedIndex; | ||
if (selectedIndex === 3){ | ||
catalogue1(list.sort(poke, 'name', 'A-Z')); | ||
}else if (selectedIndex === 4) { | ||
catalogue1(list.sort(poke, 'name', 'Z-A')); | ||
} else if (selectedIndex === 2) { | ||
catalogue1(list.sort(poke, 'number', 'asc')); | ||
} else if (selectedIndex === 1) { | ||
catalogue1(list.sort(poke, 'number', 'des')); | ||
} | ||
}); | ||
|
||
document.getElementById('typepokemon').addEventListener('change', (evt) => { | ||
const selectedIndex = evt.currentTarget.selectedIndex; | ||
if (selectedIndex === 1) { | ||
catalogue1(list.filterData(poke, 'Water')); | ||
} else if (selectedIndex === 2) { | ||
catalogue1(list.filterData(poke, 'Bug')); | ||
} else if (selectedIndex === 3) { | ||
catalogue1(list.filterData(poke, 'Dragon')); | ||
} else if (selectedIndex === 4) { | ||
catalogue1(list.filterData(poke, 'Electric')); | ||
} else if (selectedIndex === 5) { | ||
catalogue1(list.filterData(poke, 'Ghost')); | ||
} else if (selectedIndex === 6) { | ||
catalogue1(list.filterData(poke, 'Fire')); | ||
} else if (selectedIndex === 7) { | ||
catalogue1(list.filterData(poke, 'Ice')); | ||
} else if (selectedIndex === 8) { | ||
catalogue1(list.filterData(poke, 'Fighting')); | ||
} else if (selectedIndex === 9) { | ||
catalogue1(list.filterData(poke, 'Normal')); | ||
} else if (selectedIndex === 10) { | ||
catalogue1(list.filterData(poke, 'Grass')); | ||
} else if (selectedIndex === 11) { | ||
catalogue1(list.filterData(poke, 'Psychic')); | ||
} else if (selectedIndex === 12) { | ||
catalogue1(list.filterData(poke, 'Rock')); | ||
} else if (selectedIndex === 13) { | ||
catalogue1(list.filterData(poke, 'Ground')); | ||
} else if (selectedIndex === 14) { | ||
catalogue1(list.filterData(poke, 'Poison')); | ||
} else if (selectedIndex === 15) { | ||
catalogue1(list.filterData(poke, 'Flying')); | ||
} | ||
}); | ||
|
||
//Tarjeta para visualizar más información sobre el pokémon | ||
let lista = document.querySelector('#lista'); | ||
let catalogue = data.pokemon; | ||
|
||
|
@@ -59,4 +139,4 @@ function generateCard(pokemon) { | |
document.querySelector("#cardRotada").appendChild(cardInfo); | ||
console.log(cardInfo); | ||
} | ||
} | ||
} |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pregunta, a qué se refieren los parámetros abc, bcd? Me parece que podrían tener nombres más descriptivos :)