I would like to add a search function “filterPokemon();” to my Pokedex. My attempts have all failed so far, as soon as you enter a name in the search, all Pokemon are hidden. In addition, you should be able to delete the search with an “x” and all Pokemons should be displayed.
Can anyone help?
Thanks.
Here is my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" href="img/web.ico">
<link rel="stylesheet" href="style.css">
<!--<link rel="shortcut icon" href="#">-->
<title>Pokedex</title>
</head>
<body>
<header>
<div class="menuBar">
<div class="headerLeft">
<img src="img/International_Pokemon_logo.png">
</div>
<div class="headerRight">
<input type="text" id="search" placeholder="Search Pokemon" onkeydown="filterPokemon()">
</div>
</div>
</header>
<div id="pokeContainer" class="pokeContainer"></div>
<script src="script.js"></script>
<footer>
<div>
<a href="sources.html">Quellen</a>
</div>
</footer>
<button onclick="topFunction()" id="top" title="Go to top"><img src="img/chevron-up-solid.svg" alt=""></button>
<script src="button.js"></script>
</body>
</html>
html {
scroll-behavior: smooth;
}
body {
margin: 0;
font-family: 'Helvetica';
background-color: rgb(244 244 244 / 36%);
}
/*++++++++++++++++++ HEADER ++++++++++++++++++*/
.menuBar {
height: 120px;
display: flex;
justify-content: space-between;
align-items: center;
background-color: white;
}
.headerLeft img {
object-fit: contain;
margin-left: 20px;
height: 80px;
}
.headerRight {
display: flex;
flex: 0.3;
align-items: center;
margin-right: 20px;
margin-top: 16px;
margin-left: 50px;
justify-content: flex-end;
}
.headerRight input {
border: none;
width: 70%;
font-size: medium;
background-color: rgb(244 244 244 / 80%);
padding: 10px;
border-radius: 10px;
outline-color: rgb(244 244 244);
}
#searchBall {
width: 35px;
padding-bottom: 5px;
}
header {
margin-bottom: 20px;
position: fixed;
width: 100%;
z-index: 1;
}
/*++++++++++++++++ TOP BUTTON ++++++++++++++++*/
#top {
position: fixed;
width: 50px;
height: 50px;
bottom: 70px;
right: 30px;
z-index: 99;
outline: none;
border: none;
cursor: pointer;
padding: 9px;
border-radius: 4px;
background-color: #375daa;
border-radius: 50px;
}
#top:hover {
background-color: #555;
}
#top span {
color: white;
}
/*++++++++++++++++++ FOOTER ++++++++++++++++++*/
footer {
background-color: white;
height: 50px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
margin-top: 30px;
margin-bottom: 15px;
}
footer div a {
text-decoration: none;
color: black;
}
/*++++++++++++++++ POKE CONTAINER ++++++++++++++++*/
.pokeContainer {
display: flex;
flex-wrap: wrap;
align-items: space-between;
justify-content: center;
margin: 0 auto;
max-width: 1200px;
padding-top: 150px;
}
.pokemon {
background-color: #eee;
border-radius: 20px;
box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5);
margin: 10px;
padding: 20px;
text-align: center;
display: flex;
width: 250px;
height: 250px;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
}
.pokemon .imgContainer {
border-radius: 50%;
width: 150px;
height: 150px;
text-align: center;
margin-bottom: 10px;
position: relative;
right: 20px;
}
.pokemon .imgContainer img {
padding-top: 10px;
max-width: 100%;
}
.pokemon .pokemonInfo {
margin-top: 5px;
padding-bottom: 15px;
}
.pokemon .pokemonId {
background-color: rgba(0, 0, 0, 0.09);
border-radius: 10px;
font-size: 0.8em;
padding: 7px 12px;
position: relative;
right: 107px;
top: 5px;
color: white;
font-weight: bold;
}
.pokemon .pokemonName {
margin: 15px 7px 12px 7px;
letter-spacing: 1px;
color: white;
}
.pokeball {
position: absolute;
padding-left: 80px;
padding-bottom: 80px;
transform: rotate(5deg);
opacity: 0.5;
}
.pokemonType {
background-color: rgba(0, 0, 0, 0.09);
border-radius: 10px;
font-size: 0.8em;
padding: 7px 12px;
color: rgb(255, 255, 255);
font-weight: 500;
}
const pokeContainer = document.getElementById('pokeContainer');
const pokemonNumber = 150;
const colors = {
fire: '#F75131',
grass: '#7BCE52',
electric: '#FFC532',
water: '#58ABF6',
ground: '#D6B55A',
rock: '#BCA55A',
fairy: '#E4A5E5',
poison: '#B45AA4',
bug: '#ADBD20',
dragon: '#7B62E7',
psychic: '#FF72A5',
flying: '#9CACF5',
fighting: '#A35139',
normal: '#ADA594'
};
const mainTypes = Object.keys(colors);
const fetchPokemons = async () => {
for (let i = 1; i <= pokemonNumber; i++) {
await getPokemon(i);
}
}
const getPokemon = async id => {
const url = `https://pokeapi.co/api/v2/pokemon/${id}`
const res = await fetch(url);
const pokemon = await res.json();
createPokemonCard(pokemon);
}
fetchPokemons();
function createPokemonCard(pokemon) {
const pokemonElement = document.createElement('div');
pokemonElement.classList.add('pokemon');
const pokemonTypes = pokemon.types.map(element => element.type.name);
const type = mainTypes.find(type => pokemonTypes.indexOf(type) > -1);
const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1);
const color = colors[type];
pokemonElement.style.backgroundColor = color;
const pokemonInnerHTML = `
<span class="pokemonId"># ${pokemon.id.toString()
.padStart(3, '0')}</span>
<img class="pokeball" src="img/ball_transparent.png">
<div class="imgContainer">
<img src="https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemon.id}.png">
</div>
<div class="pokemonInfo">
<h3 class="pokemonName">${name}</h3>
<small class="pokemonType">${pokemonTypes.join(', ')}</small>
</div>
`;
pokemonElement.innerHTML = pokemonInnerHTML;
pokeContainer.appendChild(pokemonElement);
}
function filterPokemon() {
let search = document.getElementById('search').value;
search = search.toLowerCase();
let content = document.getElementById('pokeContainer');
content.innerHTML = '';
for (let i = 0; i < pokemon.name.length; i++) {
const name = pokemon.name[i]['name'];
if (name.toLowerCase().includes(search)) {
createPokemonCard(i);
}
}
}