Término do projeto Pokédex!

assets/css/global.css

@@ -1,17 +1,20 @@
 * {
-    font-family: 'Roboto', sans-serif;
+    font-family: 'Titillium Web', sans-serif;
     box-sizing: border-box;
 }
-
 body {
-    background-color: #f6f8fc;
+    background-color: #292929;
 }
-
-.content {
-    width: 100vw;
-    height: 100vh;
+article {
+    width: 100%;
+    height: fit-content;
     padding: 1rem;
-    background-color: #fff;
+    background: rgb(103,215,207);
+    background: linear-gradient
+    (180deg, rgba(103,215,207,1) 0%, 
+    rgba(216,255,252,1) 25%, rgba(216,255,252,1) 50%, 
+    rgba(216,255,252,1) 75%, 
+    rgba(103,215,207,1) 100%);
 }
 
 @media screen and (min-width: 992px) {
@@ -21,4 +24,4 @@ body {
         margin: 1rem auto;
         border-radius: 1rem;
     }
-}
+}

assets/css/pokeColors.css

@@ -0,0 +1,18 @@
+.grass { background: rgb(105, 201, 111); }
+.normal { background: rgb(171, 171, 171);}
+.fire { background: rgb(230, 194, 119);}
+.water { background: rgb(97, 163, 194);}
+.electric { background: rgb(240, 232, 127);}
+.ice { background: rgb(117, 224, 231);}
+.ground { background: rgb(228, 220, 119); background: linear-gradient(180deg, rgb(228, 220, 110) 49.9%, rgb(143, 121, 71) 50%);}
+.flying  { background: rgb(82, 176, 169); background: linear-gradient(180deg, rgb(82, 176, 169) 49.9%, rgb(171, 171, 171) 50%);}
+.poison { background: rgb(152, 95, 185);}
+.fighting { background: rgb(170, 135, 88);}
+.psychic { background: rgb(181, 114, 219);}
+.dark { background: rgb(71, 64, 73);} 
+.rock { background: rgb(102, 86, 50);}
+.bug { background: rgb(95, 187, 101);}
+.ghost{ background: rgb(99, 62, 121);}
+.steel { background: rgb(138, 156, 165);}
+.dragon { background: rgb(82, 176, 169); background: linear-gradient(180deg, rgb(82, 176, 169) 49.9%, rgb(209, 105, 105) 50%);}
+.fairy { background: rgb(223, 116, 166);}

assets/css/pokedex.css

@@ -1,132 +1,84 @@
+@import "pokeColors.css";
+.head {
+    padding: 0 5rem;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: left;
+    gap: 2rem;
+    background: #df3636;
+    border-bottom: .5rem solid rgb(100, 8, 8);
+}
+.circle img {
+    max-width: 100%;
+    height: 5rem;
+}
+#title {
+    font-size: 3rem;
+    font-weight: 600;
+    font-family: 'Titillium Web', sans-serif;
+}
+.detail img {
+    max-width: 70%;
+    height: 8rem;
+}
 .pokemons {
     display: grid;
-    grid-template-columns: 1fr;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
     margin: 0;
     padding: 0;
     list-style: none;
 }
-
-.normal {
-    background-color: #a6a877;
-}
-
-.grass {
-    background-color: #77c850;
-}
-
-.fire {
-    background-color: #ee7f30;
-}
-
-.water {
-    background-color: #678fee;
-}
-
-.electric {
-    background-color: #f7cf2e;
-}
-
-.ice {
-    background-color: #98d5d7;
-}
-
-.ground {
-    background-color: #dfbf69;
-}
-
-.flying {
-    background-color: #a98ff0;
-}
-
-.poison {
-    background-color: #a040a0;
-}
-
-.fighting {
-    background-color: #bf3029;
-}
-
-.psychic {
-    background-color: #f65687;
-}
-
-.dark {
-    background-color: #725847;
-}
-
-.rock {
-    background-color: #b8a137;
-}
-
-.bug {
-    background-color: #a8b720;
-}
-
-.ghost {
-    background-color: #6e5896;
-}
-
-.steel {
-    background-color: #b9b7cf;
-}
-
-.dragon {
-    background-color: #6f38f6;
-}
-
-.fairy {
-    background-color: #f9aec7;
-}
-
 .pokemon {
     display: flex;
     flex-direction: column;
+    border-radius: 1rem;
     margin: .5rem;
     padding: 1rem;
-    border-radius: 1rem;
+    border: 3px solid rgba(255, 255, 255, 0.5);
+}
+@keyframes expand {
+    from {}
+    to {
+        transform: scale(101%);
+    }
+}
+.pokemon:hover {
+    animation: 50ms ease-in-out expand;
+    transform: scale(102%);
 }
-
 .pokemon .number {
-    color: #000;
+    text-align: left;
+    font-size: 1rem;
     opacity: .3;
-    text-align: right;
-    font-size: .625rem;
 }
-
 .pokemon .name {
+    text-align: left;
     text-transform: capitalize;
-    color: #fff;
-    margin-bottom: .25rem;
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
 }
-
 .pokemon .detail {
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
 }
-
 .pokemon .detail .types {
+    list-style: none;
     padding: 0;
     margin: 0;
-    list-style: none;
 }
-
 .pokemon .detail .types .type {
-    color: #fff;
-    padding: .25rem .5rem;
-    margin: .25rem 0;
-    font-size: .625rem;
-    border-radius: 1rem;
-    filter: brightness(1.1);
+    font-size: 1rem;
+    margin: 0.5rem;
+    padding: 0.5rem;
     text-align: center;
+    filter: brightness(1.2);
+    border-radius: 20px;
+    border: 1px solid rgba(255, 255, 255, 1);
 }
-
-.pokemon .detail img {
-    max-width: 100%;
-    height: 70px;
-}
-
 .pagination {
     display: flex;
     flex-direction: row;
@@ -135,31 +87,22 @@
     width: 100%;
     padding: 1rem;
 }
-
 .pagination button {
-    padding: .25rem .5rem;
+    padding: .25rem 1rem;
     margin: .25rem 0;
-    font-size: .625rem;
-    color: #fff;
-    background-color: #6c79db;
-    border: none;
-    border-radius: 1rem;
-}
-
-@media screen and (min-width: 380px) {
-    .pokemons {
-        grid-template-columns: 1fr 1fr;
-    }
-}
-
-@media screen and (min-width: 576px) {
-    .pokemons {
-        grid-template-columns: 1fr 1fr 1fr;
-    }
+    font-size: 1.5rem;
+    background-color: rgb(5, 30, 255, .5);
+    border: 3px solid rgba(255, 255, 255, .75);
+    border-radius: 20px;
+}
+.pagination button:hover {
+    transform: scale(102%);
+    cursor: pointer;
+}
+footer {
+    background-color: #ddd;
+    margin-bottom: 0;
+    padding: 1rem;
+    text-align: center;
+    font-size: 1rem;
 }
-
-@media screen and (min-width: 992px) {
-    .pokemons {
-        grid-template-columns: 1fr 1fr 1fr 1fr;
-    }
-}

assets/js/main.js

@@ -1,47 +1,47 @@
 const pokemonList = document.getElementById('pokemonList')
-const loadMoreButton = document.getElementById('loadMoreButton')
+const loadMoreButton = document.getElementById('loadMoreButton');
 
 const maxRecords = 151
 const limit = 10
 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>
-    `
-}
-
-function loadPokemonItens(offset, limit) {
-    pokeApi.getPokemons(offset, limit).then((pokemons = []) => {
-        const newHtml = pokemons.map(convertPokemonToLi).join('')
-        pokemonList.innerHTML += newHtml
-    })
-}
-
-loadPokemonItens(offset, limit)
+  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>
+  `
+};
+
+function loadPokemonItems(offset, limit) {
+  pokeApi.getPokemons(offset, limit).then((pokemons = []) => {
+    const newHtml = pokemons.map(convertPokemonToLi).join('')
+    pokemonList.innerHTML += newHtml
+  })
+};
+
+loadPokemonItems(offset, limit);
 
 loadMoreButton.addEventListener('click', () => {
-    offset += limit
-    const qtdRecordsWithNexPage = offset + limit
-
-    if (qtdRecordsWithNexPage >= maxRecords) {
-        const newLimit = maxRecords - offset
-        loadPokemonItens(offset, newLimit)
-
-        loadMoreButton.parentElement.removeChild(loadMoreButton)
-    } else {
-        loadPokemonItens(offset, limit)
-    }
-})
+  offset += limit
+  const nextRecords = offset + limit
+
+  if (nextRecords >= maxRecords) {
+    const newLimit = maxRecords - offset
+    loadPokemonItems(offset, newLimit)
+
+    loadMoreButton.parentElement.removeChild(loadMoreButton)
+  } else {
+    loadPokemonItems(offset, limit)
+  }
+});