digitalinnovationone · Vanderson98 · Feb 6, 2024
diff --git 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;
+    }
 }
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -7,7 +7,7 @@ let offset = 0;
 
 function convertPokemonToLi(pokemon) {
     return `
-        <li class="pokemon ${pokemon.type}">
+        <li class="pokemon ${pokemon.type}" onclick="viewDetails(${pokemon.number})">
             <span class="number">#${pokemon.number}</span>
             <span class="name">${pokemon.name}</span>
 
@@ -44,4 +44,20 @@ loadMoreButton.addEventListener('click', () => {
     } else {
         loadPokemonItens(offset, limit)
     }
-})
+})
+
+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)
+        })
+
+}
diff --git 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 `
+        <section class="modalPoke ${typeColor}">
+            <div class="header">
+                <span class="number">#${pokemon.order}</span>
+                <h1 class="namePoke">${pokemon.name}</h1>
+            </div>
+
+            <div class="image">
+                <img class="imagePoke" src="${pokemon.photo}" alt="${pokemon.name}">
+            </div>
+
+            <div class="deitalsAndPower">
+                <div class="detailsBox">
+                    <h2 class="detailsTitle">
+                        Details
+                    </h2>
+
+                    <div class="detailsWidth">
+                        <span class="detailText ${typeColor}" id="width">
+                            ${pokemon.height} M
+                        </span>
+                        <span class="detailText ${typeColor}" id="height">
+                            ${pokemon.weight} KG
+                        </span>
+                    </div>
+                </div>
+
+                <div class="types">
+                    <h2>
+                        Powers Pokemon
+                    </h2>
+                    <ul class="typesList">
+                        ${viewPower(pokemon.types)}
+                    </ul>
+                </div>
+            </div>
+
+
+            <div class="statusPoke">
+                <h1 class="namePoke">
+                    Status ${pokemon.name}
+                </h1>
+                ${viewStatus(pokemon.status)}
+            </div>
+
+
+            <div class="buttonRemove">
+                <button onclick="removePokeDetails()" class="btnRemove">
+                    Sair
+                </button>
+            </div>
+        </section>
+    `
+}
+
+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 `
+        <div class="statusBox">
+            <h3 class="titleStatus">${nameStatus}</h3>
+            <div class="box ${nameStatus}">${valueStatus}%</div>
+        </div>`
+    }).join('')
+}
+
+let viewPower = (typePokemon) =>{ // View powers poke
+    return typePokemon.map((typePoke) => {
+        const typeName = typePoke.type.name;
+        return `
+        <li class="typeItem ${typeName}">
+            ${typeName}
+        </li>`
+    }).join('')
+}
diff --git 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;
+    }
+}
diff --git a/index.html b/index.html
@@ -36,7 +36,6 @@ <h1>Pokedex</h1>
             </button>
         </div>
     </section>
-
     <!-- Nosso JS -->
     <script src="/assets/js/pokemon-model.js"></script>
     <script src="/assets/js/poke-api.js"></script>