Proyecto HTML, CSS y JavaScript en Español – Crea tu Propia Pokédex
¿Quieres mejorar tus habilidades de desarrollo web mientras te diviertes creando algo genial? En este tutorial, te mostraré cómo construir tu propia Pokédex usando HTML, CSS, JavaScript y la PokéAPI. Al final, tendrás un sitio web interactivo que muestra información y estadísticas sobre tus Pokémon favoritos.
Construir proyectos como este es una excelente manera de practicar y solidificar tus conocimientos de programación. Te permite aplicar lo que has aprendido de una manera práctica y ver resultados tangibles. Además, te da algo impresionante que añadir a tu portafolio para mostrar a posibles empleadores.
Lo que necesitas saber antes de empezar
Antes de sumergirnos en la codificación, hay algunas cosas que deberías saber:
- Familiaridad con HTML y CSS para estructurar y diseñar páginas web
- Conocimientos básicos de JavaScript para añadir interactividad y trabajar con APIs
- Entendimiento general de cómo funcionan las APIs y cómo realizar solicitudes HTTP
Si eres nuevo en el desarrollo web, te recomiendo que primero aprendas los conceptos básicos de HTML, CSS y JS. Hay muchos recursos gratuitos disponibles en línea, incluyendo el plan de estudios y los tutoriales de freeCodeCamp. Una vez que te sientas cómodo con los fundamentos, estarás listo para empezar a construir este proyecto Pokédex.
Paso 1: Configuración del proyecto y conexión a la API
Lo primero que necesitamos hacer es crear la estructura de archivos para nuestro proyecto y conectarnos a la PokéAPI para obtener los datos.
Crea una nueva carpeta para tu proyecto y dentro de ella crea tres archivos:
- index.html
- styles.css
- script.js
Luego, abre el archivo index.html y configura la estructura básica de HTML:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pokédex</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="pokedex">
<!-- Los Pokémon se añadirán dinámicamente aquí -->
</div>
<script src="script.js"></script>
</body>
</html>A continuación, vamos a escribir código JavaScript para obtener los datos de la PokéAPI. Abre el archivo script.js y añade lo siguiente:
const pokedex = document.getElementById(‘pokedex‘);
const fetchPokemon = async () => {
const url = `https://pokeapi.co/api/v2/pokemon?limit=150`;
const res = await fetch(url);
const data = await res.json();
const pokemon = data.results.map((result, index) => ({
...result,
id: index + 1,
image: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${index + 1}.png`
}));
displayPokemon(pokemon);
};
const displayPokemon = (pokemon) => {
console.log(pokemon);
const pokemonHTMLString = pokemon
.map(
(pokeman) => `
<li class="card">
<img class="card-image" src="${pokeman.image}"/>
<h2 class="card-title">${pokeman.id}. ${pokeman.name}</h2>
</li>
`
)
.join(‘‘);
pokedex.innerHTML = pokemonHTMLString;
};
fetchPokemon();Este código hace una solicitud a la API para obtener datos de los primeros 150 Pokémon. Luego asigna ese Pokémon a la variable pokemon, que añade los campos id e image a los resultados devueltos.
Finalmente, llama a la función displayPokemon() que genera un string HTML para cada Pokémon y lo inserta en la página.
Paso 2: Dando estilo a la Pokédex con CSS
Ahora que tenemos los datos de nuestro Pokémon y los estamos mostrando en la página, vamos a diseñar la apariencia de nuestra Pokédex. Abre el archivo styles.css y añade lo siguiente:
body {
background-color: orangered;
color: white;
margin: 0;
font-family: rubik;
}
.container {
padding: 40px;
margin: 0 auto;
}
h1 {
text-transform: uppercase;
text-align: center;
font-size: 54px;
}
#pokedex {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
grid-gap: 20px;
padding-inline-start: 0;
}
.card {
list-style: none;
padding: 40px;
background-color: #f4f4f4;
color: #222;
text-align: center;
}
.card:hover {
animation: bounce 0.5s linear;
}
.card-title {
text-transform: capitalize;
margin-bottom: 0px;
font-size: 32px;
font-weight: normal;
}
.card-subtitle {
margin-top: 5px;
color: #666;
font-weight: lighter;
}
.card-image {
height: 180px;
}
@keyframes bounce {
20% {
transform: translateY(-6px);
}
40% {
transform: translateY(0px);
}
80% {
transform: translateY(-2px);
}
100% {
transform: translateY(0);
}
}Este CSS establece la fuente, los colores, el espaciado y el diseño de nuestra Pokédex. Utiliza CSS Grid para crear un diseño sensible que funciona bien en pantallas de todos los tamaños. También añade una animación de rebote a cada tarjeta de Pokémon cuando pasas el ratón por encima.
Paso 3: Añadiendo interactividad con JavaScript
Nuestra Pokédex está empezando a tomar forma, pero añadamos más funcionalidad con JavaScript. Vamos a implementar la capacidad de hacer clic en un Pokémon para ver más detalles.
En tu archivo script.js, modifica la función displayPokemon() de la siguiente manera:
const displayPokemon = (pokemon) => {
console.log(pokemon);
const pokemonHTMLString = pokemon
.map(
(pokeman) => `
<li class="card" onclick="selectPokemon(${pokeman.id})">
<img class="card-image" src="${pokeman.image}"/>
<h2 class="card-title">${pokeman.id}. ${pokeman.name}</h2>
</li>
`
)
.join(‘‘);
pokedex.innerHTML = pokemonHTMLString;
};
const selectPokemon = async (id) => {
const url = `https://pokeapi.co/api/v2/pokemon/${id}`;
const res = await fetch(url);
const pokeman = await res.json();
displayPopup(pokeman);
};
const displayPopup = (pokeman) => {
const type = pokeman.types.map((type) => type.type.name).join(‘, ‘);
const htmlString = `
<div class="popup">
<button id="closeBtn" onclick="closePopup()">Cerrar</button>
<div class="card">
<img class="card-image" src="${pokeman.sprites[‘front_default‘]}"/>
<h2 class="card-title">${pokeman.name}</h2>
<p><small>Altura: </small>${pokeman.height} | <small>Peso: </small>${pokeman.weight} | <small>Tipo: </small>${type}</p>
</div>
</div>
`;
pokedex.innerHTML = htmlString + pokedex.innerHTML;
};
const closePopup = () => {
const popup = document.querySelector(‘.popup‘);
popup.parentElement.removeChild(popup);
};Aquí, hemos añadido un controlador de eventos onclick a cada tarjeta de Pokémon que llama a la función selectPokemon() con la ID de ese Pokémon. Esta función hace una nueva petición a la API para obtener más detalles sobre el Pokémon seleccionado.
Luego, la función displayPopup() muestra una ventana emergente con la imagen, el nombre, la altura, el peso y el tipo del Pokémon. La ventana emergente también tiene un botón de cierre que la elimina cuando se hace clic.
Para hacer que se vea bien, añade lo siguiente a tu archivo styles.css:
.popup {
position: fixed;
top: 0;
left: 0;
height: 100vh;
width: 100vw;
background: #00000090;
display: flex;
justify-content: center;
align-items: center;
}
#closeBtn {
position: absolute;
top: 20px;
right: 20px;
}
button {
background-color: orangered;
padding: 10px 20px;
border: none;
color: white;
border-radius: 3px;
transition: transform 100ms;
cursor: pointer;
}
button:hover {
transform: translateY(-1px);
box-shadow: 0px 1px 2px darkred;
}Esto da estilo a la ventana emergente, oscureciendo el fondo y mostrando el contenido centrado. También añade un estilo agradable al botón de cierre.
Paso 4: Añadiendo filtros de búsqueda
Por último, vamos a permitir a los usuarios filtrar los Pokémon por nombre o tipo. Actualiza tu HTML para incluir un formulario de búsqueda:
<form>
<input id="search" type="text" placeholder="Buscar Pokémon...">
<select id="type">
<option value="">Todos los tipos</option>
</select>
</form>Esto añade un campo de entrada de texto para buscar por nombre y un menú desplegable para filtrar por tipo. Llenaremos dinámicamente las opciones del menú de tipos más adelante.
En tu JavaScript, añade el siguiente código:
const typeSelect = document.getElementById(‘type‘);
const searchInput = document.getElementById(‘search‘);
// Populate type dropdown
const fetchTypes = async () => {
const url = ‘https://pokeapi.co/api/v2/type‘;
const res = await fetch(url);
const types = await res.json();
populateTypeDropdown(types.results);
};
const populateTypeDropdown = (types) => {
typeSelect.innerHTML += types
.map((type) => `<option value="${type.name}">${type.name}</option>`)
.join(‘‘);
};
fetchTypes();
// Search and filter
searchInput.addEventListener(‘input‘, () => {
const searchTerm = searchInput.value;
const filteredPokemon = pokemon.filter((pokeman) =>
pokeman.name.toLowerCase().includes(searchTerm.toLowerCase())
);
displayPokemon(filteredPokemon);
});
typeSelect.addEventListener(‘change‘, () => {
const selectedType = typeSelect.value;
if(selectedType === ‘‘) {
displayPokemon(pokemon);
} else {
fetch(`https://pokeapi.co/api/v2/type/${selectedType}`)
.then((res) => res.json())
.then((data) => {
const typePokemon = data.pokemon.map((pokeman) => pokeman.pokemon);
displayPokemon(typePokemon);
});
}
});La función fetchTypes() obtiene la lista de todos los tipos de Pokémon de la API y los utiliza para llenar las opciones del menú desplegable de tipos.
Los oyentes de eventos en los campos de búsqueda y tipo ejecutan funciones de filtro siempre que cambia su valor. Al buscar por nombre, filtra la matriz pokemon para incluir sólo aquellos cuyo nombre coincida con el término de búsqueda. Al filtrar por tipo, hace una petición a un nuevo punto final de la API para obtener todos los Pokémon de ese tipo y los muestra.
Y eso es todo, ¡has creado tu propia Pokédex! Ahora puedes buscar y filtrar a través de los primeros 150 Pokémon e incluso hacer clic para ver más detalles. Puedes ver la versión final en vivo aquí.
Este proyecto es un buen punto de partida, pero hay muchas maneras de expandirlo más. Podrías añadir la capacidad de navegar a través de todas las diferentes "páginas" de los resultados que devuelve la API, mostrar más información detallada sobre cada Pokémon, o añadir la búsqueda por otros criterios como la generación.
La construcción de proyectos como éste es vital para desarrollar tus habilidades de codificación. Espero que este tutorial te haya dado algunas ideas y conocimientos sobre cómo utilizar HTML, CSS, JavaScript y APIs en el mundo real. Si todavía no lo has hecho, te animo a codificar la Pokédex tú mismo, experimentando y añadiendo tus propias características.
Para obtener más información sobre las tecnologías utilizadas aquí, consulte estos recursos:
- HTML
- CSS
- JavaScript
- APIs RESTful
- PokéAPI
Y para obtener más ideas de proyectos e instrucciones, consulte:
- El catálogo de proyectos de construcción de freeCodeCamp
- 40+ proyectos de JavaScript para principiantes
- El curso de proyectos 100 días de código
No puedo esperar a ver lo que construyes a continuación. ¡Feliz codificación!