diff --git a/README.md b/README.md deleted file mode 100644 index 0c237c1c3..000000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -# Trilha JS Developer - Pokedex diff --git a/assets/css/global.css b/assets/css/global.css index 980e87861..74b3357cd 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -4,7 +4,8 @@ } body { - background-color: #f6f8fc; + background: linear-gradient(10deg, rgba(0, 72, 255, 0.695), rgba(255, 1, 1, 0.695), rgba(245, 221, 1, 0.695)); + background-repeat: no-repeat; } .content { diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css index 59eef2bde..d63e3b50f 100644 --- a/assets/css/pokedex.css +++ b/assets/css/pokedex.css @@ -84,18 +84,21 @@ margin: .5rem; padding: 1rem; border-radius: 1rem; + cursor: pointer; } .pokemon .number { color: #000; opacity: .3; text-align: right; - font-size: .625rem; + font-size: 1rem; } .pokemon .name { text-transform: capitalize; color: #fff; + font-size: 1.3rem; + font-weight: 600; margin-bottom: .25rem; } @@ -116,7 +119,9 @@ color: #fff; padding: .25rem .5rem; margin: .25rem 0; - font-size: .625rem; + font-size: .825rem; + font-weight: 400; + text-transform: capitalize; border-radius: 1rem; filter: brightness(1.1); text-align: center; @@ -137,13 +142,14 @@ } .pagination button { - padding: .25rem .5rem; + padding: .5rem 1rem; margin: .25rem 0; - font-size: .625rem; + font-size: 1rem; color: #fff; background-color: #6c79db; border: none; border-radius: 1rem; + cursor: pointer; } @media screen and (min-width: 380px) { diff --git a/assets/js/main.js b/assets/js/main.js index bcaa24508..62906bc50 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -2,7 +2,7 @@ const pokemonList = document.getElementById('pokemonList') const loadMoreButton = document.getElementById('loadMoreButton') const maxRecords = 151 -const limit = 10 +const limit = 12 let offset = 0; function convertPokemonToLi(pokemon) { @@ -10,7 +10,7 @@ function convertPokemonToLi(pokemon) {
  • #${pokemon.number} ${pokemon.name} - +
      ${pokemon.types.map((type) => `
    1. ${type}
      2. `).join('')} diff --git a/assets/js/poke-api.js b/assets/js/poke-api.js index 38fbfd465..54a32e126 100644 --- a/assets/js/poke-api.js +++ b/assets/js/poke-api.js @@ -32,4 +32,4 @@ pokeApi.getPokemons = (offset = 0, limit = 5) => { .then((pokemons) => pokemons.map(pokeApi.getPokemonDetail)) .then((detailRequests) => Promise.all(detailRequests)) .then((pokemonsDetails) => pokemonsDetails) -} +} \ No newline at end of file diff --git a/assets/js/pokemon-model.js b/assets/js/pokemon-model.js index b0d17bb90..66d749929 100644 --- a/assets/js/pokemon-model.js +++ b/assets/js/pokemon-model.js @@ -5,4 +5,4 @@ class Pokemon { type; types = []; photo; -} +} \ No newline at end of file diff --git a/index.html b/index.html index 1a017821d..0b2b1e70c 100644 --- a/index.html +++ b/index.html @@ -17,30 +17,33 @@ - - - + + + +
      -

      Pokedex

      - +

      Pokédex - 1ª Geração

      +
        - +
      + +
      - - - - + + + + \ No newline at end of file