From c76a5b390d06d0551e9f7ef1385978f226909200 Mon Sep 17 00:00:00 2001
From: Felipe Benite de Alcantara
<91155927+devfelipebenite@users.noreply.github.com>
Date: Sun, 1 Dec 2024 20:36:29 -0300
Subject: [PATCH 1/4] Update README.md
---
README.md | 30 +++++++++++++++++++++++++++++-
1 file changed, 29 insertions(+), 1 deletion(-)
diff --git a/README.md b/README.md
index 0c237c1c3..13458041b 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,29 @@
-# Trilha JS Developer - Pokedex
+# Pokédex 🐾
+
+Este projeto é baseado em uma aplicação desenvolvida durante um bootcamp da **DIO (Digital Innovation One)**. A aplicação exibe uma Pokédex com os 151 Pokémons da primeira geração e foi customizada e ampliada após o fork.
+
+---
+
+## 📋 Funcionalidades
+
+- Listagem dinâmica dos 151 Pokémons da primeira geração.
+- Paginação com carregamento incremental (botão "Carregar mais").
+- Visual agradável e responsivo, adaptado para diversos dispositivos.
+- Adição de botão "voltar ao topo" para uma melhor experiência do usuário.
+- Identificação visual por tipo de Pokémon com cores exclusivas.
+
+---
+
+## 🛠️ Tecnologias Utilizadas
+
+- **HTML5** para estruturação da página.
+- **CSS3** para estilização.
+- **JavaScript** para lógica e consumo da API.
+- **PokeAPI** como fonte de dados para os Pokémons.
+
+---
+
+## 🤝 Créditos e Contribuições
+
+Este projeto foi desenvolvido originalmente pela **Digital Innovation One (DIO)** como parte de seu bootcamp.
+Contribuições são bem-vindas!
From a06db66fd6b0e96dda9a76b57f474b6831a06662 Mon Sep 17 00:00:00 2001
From: Felipe Benite de Alcantara
<91155927+devfelipebenite@users.noreply.github.com>
Date: Sun, 1 Dec 2024 20:37:35 -0300
Subject: [PATCH 2/4] Update pokedex.css
---
assets/css/pokedex.css | 52 +++++++++++++++++++++++++++---------------
1 file changed, 34 insertions(+), 18 deletions(-)
diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css
index 59eef2bde..3a47dbc3b 100644
--- a/assets/css/pokedex.css
+++ b/assets/css/pokedex.css
@@ -1,9 +1,9 @@
.pokemons {
+ list-style: none;
+ padding: 0;
+ margin: 0;
display: grid;
grid-template-columns: 1fr;
- margin: 0;
- padding: 0;
- list-style: none;
}
.normal {
@@ -79,11 +79,11 @@
}
.pokemon {
- display: flex;
- flex-direction: column;
margin: .5rem;
- padding: 1rem;
+ padding: 2rem 1rem;
border-radius: 1rem;
+ display: flex;
+ flex-direction: column;
}
.pokemon .number {
@@ -94,11 +94,10 @@
}
.pokemon .name {
- text-transform: capitalize;
color: #fff;
- margin-bottom: .25rem;
+ margin: .25rem 0;
+ text-transform: capitalize;
}
-
.pokemon .detail {
display: flex;
flex-direction: row;
@@ -115,7 +114,7 @@
.pokemon .detail .types .type {
color: #fff;
padding: .25rem .5rem;
- margin: .25rem 0;
+ margin: .25rem 0;
font-size: .625rem;
border-radius: 1rem;
filter: brightness(1.1);
@@ -125,6 +124,7 @@
.pokemon .detail img {
max-width: 100%;
height: 70px;
+ align-self: flex-end;
}
.pagination {
@@ -137,29 +137,45 @@
}
.pagination button {
- padding: .25rem .5rem;
- margin: .25rem 0;
- font-size: .625rem;
- color: #fff;
background-color: #6c79db;
border: none;
border-radius: 1rem;
+ color: #fff;
+ padding: .25rem 0.5rem;
+ margin: .25rem 0;
+ font-size: .625rem;
+}
+
+#scrollTopButton {
+ position: fixed;
+ bottom: 20px;
+ right: 20px;
+ background: #e600fa;
+ color: white;
+ border: none;
+ border-radius: 50%;
+ padding: 10px 15px;
+ cursor: pointer;
+}
+
+#scrollTopButton.hidden {
+ display: none;
}
@media screen and (min-width: 380px) {
- .pokemons {
+ .pokemons{
grid-template-columns: 1fr 1fr;
}
}
@media screen and (min-width: 576px) {
- .pokemons {
+ .pokemons{
grid-template-columns: 1fr 1fr 1fr;
}
}
@media screen and (min-width: 992px) {
- .pokemons {
+ .pokemons{
grid-template-columns: 1fr 1fr 1fr 1fr;
}
-}
\ No newline at end of file
+}
From 0b1a3bb68adfa2c5219ccd216990f138b9c138ef Mon Sep 17 00:00:00 2001
From: Felipe Benite de Alcantara
<91155927+devfelipebenite@users.noreply.github.com>
Date: Sun, 1 Dec 2024 20:38:09 -0300
Subject: [PATCH 3/4] Update index.html
---
index.html | 39 +++++++++++++++++++--------------------
1 file changed, 19 insertions(+), 20 deletions(-)
diff --git a/index.html b/index.html
index 1a017821d..31fd39e4a 100644
--- a/index.html
+++ b/index.html
@@ -1,28 +1,24 @@
-
-
+
-
Pokedex
-
-
+
+
-
-
-
-
-
+
+
+
+
+
-
+
Pokedex
@@ -35,12 +31,15 @@ Pokedex
Load More
-
-
-
-
-
+
+
+
+
+
+
+
+
+
-
-
\ No newline at end of file
+
From 914ad010f13f291321984abc08445edc96c8b749 Mon Sep 17 00:00:00 2001
From: Felipe Benite de Alcantara
<91155927+devfelipebenite@users.noreply.github.com>
Date: Sun, 1 Dec 2024 20:38:36 -0300
Subject: [PATCH 4/4] Update main.js
---
assets/js/main.js | 15 ++++++++++++++-
1 file changed, 14 insertions(+), 1 deletion(-)
diff --git a/assets/js/main.js b/assets/js/main.js
index bcaa24508..fb4c73167 100644
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -1,5 +1,6 @@
const pokemonList = document.getElementById('pokemonList')
const loadMoreButton = document.getElementById('loadMoreButton')
+const scrollTopButton = document.getElementById('scrollTopButton')
const maxRecords = 151
const limit = 10
@@ -44,4 +45,16 @@ loadMoreButton.addEventListener('click', () => {
} else {
loadPokemonItens(offset, limit)
}
-})
\ No newline at end of file
+})
+
+window.addEventListener('scroll', () => {
+ if (window.scrollY > 200) {
+ scrollTopButton.classList.remove('hidden');
+ } else {
+ scrollTopButton.classList.add('hidden');
+ }
+});
+
+scrollTopButton.addEventListener('click', () => {
+ window.scrollTo({ top: 0, behavior: 'smooth' });
+})