Half module 3 project of the Adalab Digital Frontend Development Bootcamp.
This is a responsive save Pokemon on your Pokedex app developed with and
Project URL is available on GitHub Pages.
Instructions to start this project:
- Clone repository:
git clone [repository]
- Install NPM packages and dependencies:
npm install
- Run project on local server:
npm start
- React app
- Components structure
- Render a Pokemon list with information from pokemons.json file
- Render a Pokemon card using props information
- Save favourites Pokemon on Pokedex and change favourites Pokemon background colour
- Reset Pokedex
- Handle app, favourites Pokemon list and reset
function App() {
const [pokedex] = useState(pokemons);
const [favourites, setFavourites] = useState([]);
const handleFavourites = (clickedPokemon) => {
if (!favourites.includes(clickedPokemon)) {
const newFavourites = [...favourites, clickedPokemon];
setFavourites(newFavourites);
} else {
const newFavourites = favourites.filter((favourite) => {
return favourite !== clickedPokemon;
});
setFavourites(newFavourites);
}
};
const handleClick = () => {
setFavourites([]);
};
return (
<div className="page">
<Header />
<main className="main" role="main">
<PokeFavourites favourites={favourites} handleClick={handleClick} />
<PokeList
list={pokedex}
handleFavourites={handleFavourites}
favourites={favourites}
/>
</main>
<Footer />
</div>
);
}
- Render Pokemon list and create Pokemon individual card component
const PokeList = (props) => {
const pokemonItems = props.list.map((pokemonItem) => {
return (
<li key={pokemonItem.id}>
<Pokemon
pokemonItem={pokemonItem}
handleFavourites={props.handleFavourites}
favourites={props.favourites}
/>
</li>
);
});
return (
<>
<ul className="pokemon__list">{pokemonItems}</ul>
</>
);
};
- Render Pokemon individual card and handle favourite Pokemon class and Pokemon types
const Pokemon = (props) => {
const handleFavourites = (ev) => {
const clickedPokemon = parseInt(ev.currentTarget.id);
props.handleFavourites(clickedPokemon);
};
const pokemon = props.pokemonItem.types.map((type, index) => {
return (
<li key={index} className="type">
{type}
</li>
);
});
return (
<div
id={props.pokemonItem.id}
className={`${"pokemon__card"} || ${
props.favourites.includes(parseInt(props.pokemonItem.id))
? "pokemon__card--favourite"
: "pokemon__card"
}`}
onClick={handleFavourites}
>
<img
className="pokemon__image"
src={props.pokemonItem.url}
alt={`Pokemon: ${props.pokemonItem.name} `}
title={`Pokemon: ${props.pokemonItem.name} `}
/>
<div className="pokemon__stripe"></div>
<div className="pokemon__button">
<img
className={`${"pokemon__ball"} || ${
props.favourites.includes(parseInt(props.pokemonItem.id))
? "pokemon__ball--favourite"
: "pokemon__ball"
}`}
onClick={handleFavourites}
src={pokeball}
title="Pokeball"
alt="Pokeball"
/>
</div>
<h2 className="pokemon__name">{props.pokemonItem.name}</h2>
<ul className="pokemon__types">{pokemon}</ul>
</div>
);
};
- Handle number of favourite Pokemons in the Pokedex
const PokeFavourites = (props) => {
return (
<div className="favourites">
<img
className="favourites__pokeball"
src={pokeball}
alt="Pokeball"
title="Pokeball"
/>
<h2 className="favourites__title">
Has añadido {props.favourites.length} Pokemon a tu Pokedex
</h2>
<button className="favourites__reset" onClick={props.handleClick}>
Vaciar
</button>
</div>
);
};
Pokemon
├── docs
├── node_modules
├── public
├── src
│ ├── components
│ │ ├── App.js
│ │ ├── Footer.js
│ │ ├── Header.js
│ │ ├── PokeFavourites.js
│ │ ├── PokeList.js
│ │ └── Pokemon.js
│ ├── data
│ │ └── pokemons.json
│ ├── images
│ │ ├── logo.png
│ │ ├── pokeball.png
│ │ ├── pokemon_desktop.png
│ │ ├── pokemon_mobile.png
│ │ └── pokemon_tablet.png
│ ├── stylesheets
│ │ ├── core
│ │ │ ├── _reset.scss
│ │ │ └── _variables.scss
│ │ ├── layout
│ │ │ ├── _footer.scss
│ │ │ ├── _header.scss
│ │ │ ├── _pokeFavourites.scss
│ │ │ ├── _pokeList.scss
│ │ │ └── _pokemon.scss
│ │ ├── pages
│ │ │ └── index.scss
│ │ └── App.scss
│ └── index.js
├── .gitignore
├── debug.log
├── LICENSE
├── package-lock.json
├── package.json
└── README.md