From fde0c16136045fe2e87b07871722b4627834f0f2 Mon Sep 17 00:00:00 2001 From: Vanderson Souza Date: Tue, 6 Feb 2024 18:15:05 -0300 Subject: [PATCH] Inserindo pagina de detalhes de cada Pokemon --- assets/css/pokedex.css | 201 +++++++++++++++++++++++++++++++++++++ assets/js/main.js | 20 +++- assets/js/poke-api.js | 107 ++++++++++++++++++++ assets/js/pokemon-model.js | 12 +++ index.html | 1 - 5 files changed, 338 insertions(+), 3 deletions(-) diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css index 59eef2bde..e2f1d334b 100644 --- a/assets/css/pokedex.css +++ b/assets/css/pokedex.css @@ -83,6 +83,7 @@ flex-direction: column; margin: .5rem; padding: 1rem; + cursor: pointer; border-radius: 1rem; } @@ -144,6 +145,191 @@ background-color: #6c79db; border: none; border-radius: 1rem; + cursor: pointer; +} + +.modalPoke{ + filter: brightness(1.05); + width: 100%; + margin: 0 auto; + padding: 1rem; + position: absolute; + top: 5%; + left: 50%; + transform: translateX(-50%); + border-radius: .25rem; + max-width: 40rem; +} + +.modalPoke .header{ + display: flex; + flex-direction: column; +} + +.modalPoke .header .namePoke{ + font-size: 1.4rem; + text-transform: capitalize; + color: #f6f6f6; +} + +.modalPoke .header .number{ + font-size: 1rem; + align-self: flex-end !important; + opacity: .5; +} + +.modalPoke .image{ + display: flex; + width: 100%; + justify-content: end; +} + +.modalPoke .image .imagePoke{ + max-width: 10rem; + width: 100%; +} + +.modalPoke .deitalsAndPower{ + display: flex; + width: 100%; + justify-content: space-around; + align-items: center; +} + +.modalPoke .detailsBox{ + width: 100%; + display: flex; + flex-direction: column; + align-items: center; + color: #f6f6f6; +} + +.modalPoke .detailsBox .detailsTitle, .modalPoke .types h2{ + font-size: 1rem; + margin-bottom: 0; +} + +.modalPoke .detailsBox .detailsWidth{ + width: 100%; + margin: 0 auto; + display: flex; + margin-top: .5rem; + justify-content: space-around; +} + +.modalPoke .detailsBox .detailsWidth .detailText{ + color: #f6f6f6; + filter: brightness(1.1); + padding: .25rem 1rem; + padding-top: .35rem; + border-radius: .25rem; +} + +.modalPoke .types{ + width: 100%; + display: flex; + flex-direction: column; + color: #f6f6f6; + align-items: center; +} + +.modalPoke .types .typesList{ + display: flex; + justify-content: space-around; + width: 100%; + padding: 0; + margin: 0 auto; + margin-top: .5rem; +} + +.modalPoke .types .typesList .typeItem{ + color: #f6f6f6; + filter: brightness(1.1); + list-style-type: none; + padding: .25rem .5rem; + border-radius: .25rem; +} + +.modalPoke .statusPoke{ + display: flex; + flex-direction: column; + align-items: center; + margin-top: .5rem; +} + +.modalPoke .statusPoke .namePoke{ + font-size: 1rem; + color: #f6f6f6; + text-transform: capitalize; + letter-spacing: .05rem; +} + +.modalPoke .statusPoke .statusBox{ + display: flex; + align-items: start; + flex-direction: column; + width: 100%; + height: 3.5rem; + justify-content: start; +} + +.modalPoke .statusPoke .statusBox .titleStatus{ + font-size: 1rem; + color: #f6f6f6; + text-transform: capitalize; + letter-spacing: .05rem; +} + +.modalPoke .statusPoke .statusBox .box{ + background-color: #252525; + color: #f6f6f6; + width: 90%; + margin: 0 auto; + margin-top: -.5rem; + padding: .15rem; + border-radius: .25rem; + text-align: center; + filter: brightness(1.1); +} + +.modalPoke .statusPoke .statusBox .hp{ + background-color: #bf3029; +} + +.modalPoke .statusPoke .statusBox .attack{ + background-color: #ee7f30; +} + +.modalPoke .statusPoke .statusBox .defense{ + background-color: #98d5d7; +} + +.modalPoke .statusPoke .statusBox .special-attack{ + background-color: #ee7f50; +} + +.modalPoke .statusPoke .statusBox .special-defense{ + background-color: #98d5d9; +} + +.modalPoke .statusPoke .statusBox .speed{ + background-color: #678fee; +} + +.modalPoke .buttonRemove{ + margin-top: 2rem; + display: flex; + justify-content: center; +} + +.modalPoke .btnRemove{ + cursor: pointer; + background-color: #bf3029; + filter: brightness(1.15); + border: none; + color: #f6f6f6; + padding: .25rem 1rem; + border-radius: .25rem; } @media screen and (min-width: 380px) { @@ -162,4 +348,19 @@ .pokemons { grid-template-columns: 1fr 1fr 1fr 1fr; } +} + +@media(max-width:592px){ + .modalPoke{ + width: 90%; + top: 1%; + } + .modalPoke .detailsBox .detailsWidth, + .modalPoke .types .typesList{ + width: 75%; + justify-content: space-around; + flex-direction: column; + height: 6rem; + text-align: center; + } } \ No newline at end of file diff --git a/assets/js/main.js b/assets/js/main.js index bcaa24508..c34d9bd11 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -7,7 +7,7 @@ let offset = 0; function convertPokemonToLi(pokemon) { return ` -
  • +
  • #${pokemon.number} ${pokemon.name} @@ -44,4 +44,20 @@ loadMoreButton.addEventListener('click', () => { } else { loadPokemonItens(offset, limit) } -}) \ No newline at end of file +}) + +let viewDetails = (idPoke) =>{ + const modalPoke = document.querySelector('.modalPoke') + if(modalPoke){ // Se existir o modal, ele ira tirar quando o usuario clicar no botao novamente + modalPoke.remove() + } + + fetch(`https://pokeapi.co/api/v2/pokemon/${idPoke}`) + .then((response) => response.json()) + .then((responseJson) => pokeApi.convertDetails(responseJson)) + .then((convertPokemon) => { + const bodyDoc = document.querySelector('body') + bodyDoc.innerHTML += pokeApi.viewDetails(convertPokemon) + }) + +} \ No newline at end of file diff --git a/assets/js/poke-api.js b/assets/js/poke-api.js index 38fbfd465..2960e01ea 100644 --- a/assets/js/poke-api.js +++ b/assets/js/poke-api.js @@ -33,3 +33,110 @@ pokeApi.getPokemons = (offset = 0, limit = 5) => { .then((detailRequests) => Promise.all(detailRequests)) .then((pokemonsDetails) => pokemonsDetails) } + +// Convert details pokemon +pokeApi.convertDetails = (pokemon) =>{ + const imagePokemon = pokemon.sprites.front_default + const pokemonDetail = new PokemonDetails( + pokemon.name, + pokemon.order, + pokemon.height, + pokemon.weight, + pokemon.stats, + pokemon.types, + imagePokemon) + + return pokemonDetail +} + +// View details pokemons +pokeApi.viewDetails = (pokemon)=>{ + const typeColor = pokemon.types[0].type.name + + // Formatando peso e altura + pokemon.weight = pokemon.weight / 10 + pokemon.height = pokemon.height / 10 + + + return ` +
    +
    + #${pokemon.order} +

    ${pokemon.name}

    +
    + +
    + ${pokemon.name} +
    + +
    +
    +

    + Details +

    + +
    + + ${pokemon.height} M + + + ${pokemon.weight} KG + +
    +
    + +
    +

    + Powers Pokemon +

    +
      + ${viewPower(pokemon.types)} +
    +
    +
    + + +
    +

    + Status ${pokemon.name} +

    + ${viewStatus(pokemon.status)} +
    + + +
    + +
    +
    + ` +} + +let removePokeDetails = ()=>{ // Remove modal + const modalPoke = document.querySelector('.modalPoke') + modalPoke.remove() +} + +let viewStatus = (statusPoke) =>{ // View status poke + return statusPoke.map((statusI) =>{ + const valueStatus = statusI.base_stat + const nameStatus = statusI.stat.name + + return ` +
    +

    ${nameStatus}

    +
    ${valueStatus}%
    +
    ` + }).join('') +} + +let viewPower = (typePokemon) =>{ // View powers poke + return typePokemon.map((typePoke) => { + const typeName = typePoke.type.name; + return ` +
  • + ${typeName} +
    • ` + }).join('') +} \ No newline at end of file diff --git a/assets/js/pokemon-model.js b/assets/js/pokemon-model.js index b0d17bb90..5ad642cf7 100644 --- a/assets/js/pokemon-model.js +++ b/assets/js/pokemon-model.js @@ -6,3 +6,15 @@ class Pokemon { types = []; photo; } + +class PokemonDetails { + constructor(name, order, height, weight, status = [], types = [], photo){ + this.name = name; + this.order = order; + this.height = height; + this.weight = weight; + this.status = status; + this.types = types; + this.photo = photo; + } +} \ No newline at end of file diff --git a/index.html b/index.html index 1a017821d..7daa8c94c 100644 --- a/index.html +++ b/index.html @@ -36,7 +36,6 @@

    Pokedex

    -