Projeto da Pokedex by MaOtg

README.md

@@ -1 +1,10 @@
 # Trilha JS Developer - Pokedex
+
+Neste projeto adicionei um botão aos cards de pokemon em que ao passar o mouse por cima você pode ver as habilidades daquele pokemon. De resto estilizei o projeto.
+Print da tela inicial:
+
+![Imagem do WhatsApp de 2024-01-24 à(s) 15 03 01_a0e246f1](https://github.com/MaOtg/js-developer-pokedex/assets/79218443/50aed44e-8164-40a7-86b0-f643be66c416)
+
+Print passando o mouse por cima de um pokemon:
+
+![Imagem do WhatsApp de 2024-01-24 à(s) 15 03 53_bd7e4ff1](https://github.com/MaOtg/js-developer-pokedex/assets/79218443/4b424724-2e57-45bf-a784-2ddf2e85b0cd)

assets/css/card.css

@@ -0,0 +1,43 @@
+.card {
+    background: none;
+    border: none;
+    border-radius: 1rem;
+    position:relative;
+}
+
+.card:hover {
+    top: -3px;
+    border: outset;
+    box-shadow: 0 20px 10px #666;
+    background-image: url("https://cdn.dribbble.com/users/1122023/screenshots/2850044/media/c602dfdd96b1918b58de9be6c495daa7.png?resize=400x0");
+}
+
+.card:hover .hiddenDetails {
+    display: contents;
+    color: white;
+    text-align: center;
+    margin-top: .25rem;
+    padding: .625rem;
+    visibility: visible;
+}
+
+h5 {
+    display: block;
+    font-size: 0.83em;
+    margin-block-start: .5em;
+    margin-block-end: .5em;
+    margin-inline-start: 0px;
+    margin-inline-end: 0px;
+    font-weight: bold;
+}
+
+.card .hiddenDetails {
+    display: none;
+    visibility: hidden;
+}
+
+.abilities {
+    font-size: 0.70em;
+    text-align: left;
+    text-transform: capitalize;
+}

assets/css/global.css

@@ -5,6 +5,7 @@
 
 body {
     background-color: #f6f8fc;
+    background-image: url("https://cdn.dribbble.com/users/1122023/screenshots/2850044/media/c602dfdd96b1918b58de9be6c495daa7.png?resize=400x0");
 }
 
 .content {
@@ -14,6 +15,12 @@ body {
     background-color: #fff;
 }
 
+.footer {
+    display: grid;
+    opacity: .5;
+    text-align: center;
+}
+
 @media screen and (min-width: 992px) {
     .content {
         max-width: 992px;

assets/css/pokedex.css

@@ -97,6 +97,7 @@
     text-transform: capitalize;
     color: #fff;
     margin-bottom: .25rem;
+    text-align: left;
 }
 
 .pokemon .detail {

assets/js/main.js

@@ -7,19 +7,27 @@ let offset = 0;
 
 function convertPokemonToLi(pokemon) {
     return `
-        <li class="pokemon ${pokemon.type}">
-            <span class="number">#${pokemon.number}</span>
-            <span class="name">${pokemon.name}</span>
-
-            <div class="detail">
-                <ol class="types">
-                    ${pokemon.types.map((type) => `<li class="type ${type}">${type}</li>`).join('')}
-                </ol>
-
-                <img src="${pokemon.photo}"
-                     alt="${pokemon.name}">
-            </div>
-        </li>
+        <button class="card ${pokemon.name}" type="button">
+            <li class="pokemon ${pokemon.type}">
+                <span class="number">#${pokemon.number}</span>
+                <span class="name">${pokemon.name}</span>
+
+                <div class="detail">
+                    <ol class="types">
+                        ${pokemon.types.map((type) => `<li class="type ${type}">${type}</li>`).join('')}
+                    </ol>
+
+                    <img src="${pokemon.photo}" alt="${pokemon.name}">
+                </div>
+
+                <div class="hiddenDetails">
+                        <h5>Abilities</h5>
+                        <ul class="abilities">
+                             ${pokemon.abilities.map((ability) => `<li class="ability ${ability}">${ability}</li>`).join('')}
+                        </ul>
+                </div>
+            </li>
+        </button>
     `
 }
 

assets/js/poke-api.js

@@ -12,6 +12,12 @@ function convertPokeApiDetailToPokemon(pokeDetail) {
     pokemon.types = types
     pokemon.type = type
 
+    const abilities = pokeDetail.abilities.map((abilitySlot) => abilitySlot.ability.name)
+    const [ability] = abilities
+
+    pokemon.abilities = abilities
+    pokemon.ability = ability
+
     pokemon.photo = pokeDetail.sprites.other.dream_world.front_default
 
     return pokemon

index.html

@@ -5,6 +5,9 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Adicionando uma Imagem ao Title -->
+    <link rel="shortcut icon" type="imagex/png" href="./assets/img/dragon-solid.ico">
     <title>Pokedex</title>
 
     <!-- Normalize CSS -->
@@ -18,13 +21,17 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap" rel="stylesheet">
 
     <!-- Nosso CSS -->
+    <link rel="stylesheet" href="/assets/css/card.css">
     <link rel="stylesheet" href="/assets/css/global.css">
     <link rel="stylesheet" href="/assets/css/pokedex.css">
 </head>
 
 <body>
     <section class="content">
-        <h1>Pokedex</h1>
+
+        <h1><img src="assets/img/pokebola.png" alt="Imagem da pokebola" class="pokebola" width="20px" height="20px"> Pokedex</h1>
+
+        <hr>
 
         <ol id="pokemonList" class="pokemons">
             <!-- ..... Pokemons here ..... -->
@@ -35,6 +42,14 @@ <h1>Pokedex</h1>
                 Load More
             </button>
         </div>
+
+        <hr>
+
+        <footer class="footer">
+            Mateus Ortega Mendes | DIO | Renan Johannsen de Paula <br>
+            Criando uma Pokedex <br>
+            @2024
+        </footer>
     </section>
 
     <!-- Nosso JS -->