From e4fdaa7654efb6e989cbdb1fa905214a202d70d2 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Mon, 19 Oct 2020 13:31:51 -0400 Subject: [PATCH] Pokedex --- pokedex/index.html | 16 +++++++++++ pokedex/script.js | 64 +++++++++++++++++++++++++++++++++++++++++++ pokedex/style.css | 67 ++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 147 insertions(+) create mode 100644 pokedex/index.html create mode 100644 pokedex/script.js create mode 100644 pokedex/style.css diff --git a/pokedex/index.html b/pokedex/index.html new file mode 100644 index 0000000..4fb798c --- /dev/null +++ b/pokedex/index.html @@ -0,0 +1,16 @@ + + + + + + + Pokedex + + +

Pokedex

+
+ + + + + diff --git a/pokedex/script.js b/pokedex/script.js new file mode 100644 index 0000000..a11e9e1 --- /dev/null +++ b/pokedex/script.js @@ -0,0 +1,64 @@ +const poke_container = document.getElementById('poke-container') +const pokemon_count = 150 +const colors = { + fire: '#FDDFDF', + grass: '#DEFDE0', + electric: '#FCF7DE', + water: '#DEF3FD', + ground: '#f4e7da', + rock: '#d5d5d4', + fairy: '#fceaff', + poison: '#98d7a5', + bug: '#f8d5a3', + dragon: '#97b3e6', + psychic: '#eaeda1', + flying: '#F5F5F5', + fighting: '#E6E0D4', + normal: '#F5F5F5' +} + +const main_types = Object.keys(colors) + +const fetchPokemons = async () => { + for(let i = 1; i <= pokemon_count; i++) { + await getPokemon(i) + } +} + +const getPokemon = async (id) => { + const url = `https://pokeapi.co/api/v2/pokemon/${id}` + const res = await fetch(url) + const data = await res.json() + createPokemonCard(data) +} + +const createPokemonCard = (pokemon) => { + const pokemonEl = document.createElement('div') + pokemonEl.classList.add('pokemon') + + const name = pokemon.name[0].toUpperCase() + pokemon.name.slice(1) + const id = pokemon.id.toString().padStart(3, '0') + + const poke_types = pokemon.types.map(type => type.type.name) + const type = main_types.find(type => poke_types.indexOf(type) > -1) + const color = colors[type] + + pokemonEl.style.backgroundColor = color + + const pokemonInnerHTML = ` +
+ +
+
+ #${id} +

${name}

+ Type: ${type} +
+ ` + + pokemonEl.innerHTML = pokemonInnerHTML + + poke_container.appendChild(pokemonEl) +} + +fetchPokemons() \ No newline at end of file diff --git a/pokedex/style.css b/pokedex/style.css new file mode 100644 index 0000000..fc5ca34 --- /dev/null +++ b/pokedex/style.css @@ -0,0 +1,67 @@ +@import url('https://fonts.googleapis.com/css?family=Lato:300,400&display=swap'); + +* { + box-sizing: border-box; +} + +body { + background: #efefbb; + background: linear-gradient(to right, #d4d3dd, #efefbb); + font-family: 'Lato', sans-serif; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + margin: 0; +} + +h1 { + letter-spacing: 3px; +} + +.poke-container { + display: flex; + flex-wrap: wrap; + align-items: space-between; + justify-content: center; + margin: 0 auto; + max-width: 1200px; +} + +.pokemon { + background-color: #eee; + border-radius: 10px; + box-shadow: 0 3px 15px rgba(100, 100, 100, 0.5); + margin: 10px; + padding: 20px; + text-align: center; +} + +.pokemon .img-container { + background-color: rgba(255, 255, 255, 0.6); + border-radius: 50%; + width: 120px; + height: 120px; + text-align: center; +} + +.pokemon .img-container img { + max-width: 90%; + margin-top: 20px; +} + +.pokemon .info { + margin-top: 20px; +} + +.pokemon .info .number { + background-color: rgba(0, 0, 0, 0.1); + padding: 5px 10px; + border-radius: 10px; + font-size: 0.8em; +} + +.pokemon .info .name { + margin: 15px 0 7px; + letter-spacing: 1px; +}