Criação do projeto Pokedex

README.md

@@ -1 +1,14 @@
-# Trilha JS Developer - Pokedex
+# dio-js-developer-pokedex
+Projeto didático de construção de uma Pokedex com Javascript
+
+## Leiaute
+![image](https://user-images.githubusercontent.com/2284408/197915630-d514391b-3b48-47ee-a52b-b10f9b0dc7df.png)
+
+
+## PokeAPI
+https://pokeapi.co/
+
+
+## Linkedin
+
+https://www.linkedin.com/in/tiagoribeirosantos/

assets/css/global.css

@@ -1,3 +1,5 @@
+@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap');
+
 * {
     font-family: 'Roboto', sans-serif;
     box-sizing: border-box;
@@ -7,18 +9,22 @@ body {
     background-color: #f6f8fc;
 }
 
-.content {
-    width: 100vw;
-    height: 100vh;
-    padding: 1rem;
-    background-color: #fff;
-}
-
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 992px){
     .content {
         max-width: 992px;
         height: auto;
         margin: 1rem auto;
         border-radius: 1rem;
     }
+}
+
+.content {
+    padding: 1rem;
+    background-color: #fff;
+    height: 100vh;
+    width: 100vw;
+}
+
+.content h1 {
+    margin: 0;
 }

assets/css/pokedex.css

@@ -1,10 +1,3 @@
-.pokemons {
-    display: grid;
-    grid-template-columns: 1fr;
-    margin: 0;
-    padding: 0;
-    list-style: none;
-}
 
 .normal {
     background-color: #a6a877;
@@ -78,8 +71,16 @@
     background-color: #f9aec7;
 }
 
-.pokemon {
-    display: flex;
+.pokemons {
+    display: grid;
+    grid-template-columns: 1fr;
+    margin: 0%;
+    padding: 0%;
+    list-style: none;
+}
+
+.pokemon{
+    display:flex;
     flex-direction: column;
     margin: .5rem;
     padding: 1rem;
@@ -88,43 +89,42 @@
 
 .pokemon .number {
     color: #000;
-    opacity: .3;
+    opacity: 0.3;
     text-align: right;
     font-size: .625rem;
 }
 
 .pokemon .name {
-    text-transform: capitalize;
     color: #fff;
-    margin-bottom: .25rem;
+    margin-bottom: .25rem ;
+    text-transform: capitalize;
 }
 
-.pokemon .detail {
+.pokemon .details {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
 }
-
-.pokemon .detail .types {
-    padding: 0;
-    margin: 0;
+.pokemon .details .types {
+    padding: 0%;
+    margin: 0%;
     list-style: none;
 }
 
-.pokemon .detail .types .type {
+.pokemon .details .types .type {
     color: #fff;
     padding: .25rem .5rem;
-    margin: .25rem 0;
-    font-size: .625rem;
+    margin: .35rem 0;
+    font: .825rem;
     border-radius: 1rem;
-    filter: brightness(1.1);
+    filter: brightness(1.15);
     text-align: center;
 }
 
-.pokemon .detail img {
+.pokemon .details img {
     max-width: 100%;
-    height: 70px;
+    height: 100px;
 }
 
 .pagination {
@@ -137,12 +137,9 @@
 }
 
 .pagination button {
+    background-color: #6c79db;
     padding: .25rem .5rem;
-    margin: .25rem 0;
-    font-size: .625rem;
     color: #fff;
-    background-color: #6c79db;
-    border: none;
     border-radius: 1rem;
 }
 
@@ -158,7 +155,7 @@
     }
 }
 
-@media screen and (min-width: 992px) {
+@media screen and (min-width: 992px){
     .pokemons {
         grid-template-columns: 1fr 1fr 1fr 1fr;
     }

assets/js/main.js

@@ -24,23 +24,21 @@ function convertPokemonToLi(pokemon) {
 }
 
 function loadPokemonItens(offset, limit) {
-    pokeApi.getPokemons(offset, limit).then((pokemons = []) => {
-        const newHtml = pokemons.map(convertPokemonToLi).join('')
-        pokemonList.innerHTML += newHtml
-    })
+    pokeApi.getPokemons(offset, limit)
+        .then((pokemons = []) => {
+            pokemonList.innerHTML += pokemons.map(convertPokemonToLi).join('')
+        })
 }
 
 loadPokemonItens(offset, limit)
 
 loadMoreButton.addEventListener('click', () => {
     offset += limit
-    const qtdRecordsWithNexPage = offset + limit
-
-    if (qtdRecordsWithNexPage >= maxRecords) {
+    let qtdRecordNextPage = offset + limit
+    if(qtdRecordNextPage >= maxRecords) {
         const newLimit = maxRecords - offset
         loadPokemonItens(offset, newLimit)
-
-        loadMoreButton.parentElement.removeChild(loadMoreButton)
+        loadMoreButton.parentElement.removeChild(loadMoreButton) //remove o botão
     } else {
         loadPokemonItens(offset, limit)
     }

assets/js/poke-api.js

@@ -1,35 +1,33 @@
 
 const pokeApi = {}
 
-function convertPokeApiDetailToPokemon(pokeDetail) {
+function convertPokeApiDetailToPokemonModel(pokeDetail) {
     const pokemon = new Pokemon()
     pokemon.number = pokeDetail.id
     pokemon.name = pokeDetail.name
-
-    const types = pokeDetail.types.map((typeSlot) => typeSlot.type.name)
+    const types = pokeDetail.types.map(typeSlot => typeSlot.type.name)
     const [type] = types
-
     pokemon.types = types
     pokemon.type = type
-
     pokemon.photo = pokeDetail.sprites.other.dream_world.front_default
 
     return pokemon
 }
 
 pokeApi.getPokemonDetail = (pokemon) => {
     return fetch(pokemon.url)
-        .then((response) => response.json())
-        .then(convertPokeApiDetailToPokemon)
+           .then(response => response.json())
+           .then(convertPokeApiDetailToPokemonModel)
 }
 
-pokeApi.getPokemons = (offset = 0, limit = 5) => {
-    const url = `https://pokeapi.co/api/v2/pokemon?offset=${offset}&limit=${limit}`
+pokeApi.getPokemons = function(offset = 0, limit = 5) {
+    const url = `https://pokeapi.co/api/v2/pokemon/?offset=${offset}&limit=${limit}`
 
     return fetch(url)
-        .then((response) => response.json())
-        .then((jsonBody) => jsonBody.results)
-        .then((pokemons) => pokemons.map(pokeApi.getPokemonDetail))
-        .then((detailRequests) => Promise.all(detailRequests))
-        .then((pokemonsDetails) => pokemonsDetails)
-}
+            .then(response =>  response.json())
+            .then(jsonBody => jsonBody.results)
+            .then(pokemons => pokemons.map(pokeApi.getPokemonDetail))
+            .then(detailRequests => Promise.all(detailRequests))
+            .then(pokemonsDetails => pokemonsDetails)
+            .catch(error => console.error(error))
+}

index.html

@@ -1,46 +1,35 @@
 <!DOCTYPE html>
-<html lang="pt-BR">
-
+<html lang="pt-br">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Pokedex</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
 
-    <!-- Normalize CSS -->
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css"
-        integrity="sha512-NhSC1YmyruXifcj/KFRWoC561YpHpc5Jtzgvbuzx5VozKpWvQ+4nXhPdFgmx8xqexRcpAglTj9sIBWINXa8x5w=="
-        crossorigin="anonymous" referrerpolicy="no-referrer" />
+    <link rel="stylesheet" href="./assets/css/global.css">
+    <link rel="stylesheet" href="./assets/css/pokedex.css">
 
-    <!-- Font Roboto -->
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" href="./assets/ico/pikachu_favicon.ico" type="image/x-icon">
+    <link rel="icon" href="./assets/ico/pikachu_favicon.ico" type="image/x-icon">
 
-    <!-- Nosso CSS -->
-    <link rel="stylesheet" href="/assets/css/global.css">
-    <link rel="stylesheet" href="/assets/css/pokedex.css">
+    <title>Pokedex do Tiago</title>
 </head>
-
 <body>
     <section class="content">
-        <h1>Pokedex</h1>
+        <h1>Pokedex do Tiago</h1>
 
-        <ol id="pokemonList" class="pokemons">
-            <!-- ..... Pokemons here ..... -->
-        </ol>
+        <ol class="pokemons" id="pokemonList"></ol>
 
         <div class="pagination">
-            <button id="loadMoreButton" type="button">
-                Load More
+            <button id="loadMoreButton">
+                load more +
             </button>
         </div>
+
     </section>
 
-    <!-- Nosso JS -->
-    <script src="/assets/js/pokemon-model.js"></script>
-    <script src="/assets/js/poke-api.js"></script>
-    <script src="/assets/js/main.js"></script>
+    <script src="./assets/js/pokemon-model.js"></script>
+    <script src="./assets/js/poke-api.js"></script>
+    <script src="./assets/js/main.js"></script>
 </body>
-
 </html>