Skip to content
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

Open
wants to merge 20 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions src/data.js
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;
});
Copy link
Contributor

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 :)


} 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
};

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Muy buen trabajo!

Binary file added src/imagenes-pokemon/imagenes-pokemon/logo1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/imagenes-pokemon/imagenes.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
103 changes: 50 additions & 53 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -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 -->
Expand All @@ -20,21 +19,17 @@ <h1> INICIAR SESIÓN </h1>
<p><input id="Password" class="userData" type="text" name="Contraseña" placeholder="Contraseña"></p>
Copy link
Contributor

Choose a reason for hiding this comment

The 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">
Copy link
Contributor

Choose a reason for hiding this comment

The 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>
Expand All @@ -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">
Expand All @@ -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>
Expand All @@ -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> -->
Copy link
Contributor

Choose a reason for hiding this comment

The 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">
Copy link
Contributor

Choose a reason for hiding this comment

The 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>
Expand All @@ -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">&times;</div>
<div id="infoPoke"></div>
</div>
<!-- hasta aqui -->

</section>
<div id="myModal" class="modal">
<div id="close" class="close">&times;</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>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just a typo, should be "container" :)

Expand All @@ -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>

Expand Down
84 changes: 82 additions & 2 deletions src/main.js
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')

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Los paréntesis deben estar junto al método:
...querySelector('');

let catalogue1= data.pokemon;

//Mostramos en consola los arrays
console.log (catalogue1);

Copy link
Contributor

Choose a reason for hiding this comment

The 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>
`
Copy link
Contributor

Choose a reason for hiding this comment

The 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;

Expand Down Expand Up @@ -59,4 +139,4 @@ function generateCard(pokemon) {
document.querySelector("#cardRotada").appendChild(cardInfo);
console.log(cardInfo);
}
}
}
Loading