Compare commits
3 Commits
f76ea3ebf8
...
f377e314d0
| Author | SHA1 | Date | |
|---|---|---|---|
|
f377e314d0 | ||
|
|
dbb5216d0f | ||
|
|
11b8d663a9 |
24
.gitignore
vendored
Normal file
24
.gitignore
vendored
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
# Logs
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
|
node_modules
|
||||||
|
dist
|
||||||
|
dist-ssr
|
||||||
|
*.local
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/extensions.json
|
||||||
|
.idea
|
||||||
|
.DS_Store
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
3
.vscode/extensions.json
vendored
Normal file
3
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["Vue.volar"]
|
||||||
|
}
|
||||||
21
LICENSE
Normal file
21
LICENSE
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
MIT License
|
||||||
|
|
||||||
|
Copyright (c) [year] [fullname]
|
||||||
|
|
||||||
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
in the Software without restriction, including without limitation the rights
|
||||||
|
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||||
|
copies of the Software, and to permit persons to whom the Software is
|
||||||
|
furnished to do so, subject to the following conditions:
|
||||||
|
|
||||||
|
The above copyright notice and this permission notice shall be included in all
|
||||||
|
copies or substantial portions of the Software.
|
||||||
|
|
||||||
|
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||||
|
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||||
|
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||||
|
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||||
|
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||||
|
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||||
|
SOFTWARE.
|
||||||
38
README.md
Normal file
38
README.md
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
# 📱 App Project Pokedex
|
||||||
|
|
||||||
|
Um app simples criado com Vue.js e Vite, que consome a PokéAPI e exibe uma lista com 20 Pokémon. Cada card mostra o ID, nome e até 2 habilidades principais do Pokémon.
|
||||||
|
|
||||||
|
## 📸 Preview
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## 🚀 Funcionalidades
|
||||||
|
|
||||||
|
- 📦 Consumo da PokéAPI
|
||||||
|
- 🧩 Renderização de 20 Pokémon em um grid
|
||||||
|
- 💡 Cards com:
|
||||||
|
- ID
|
||||||
|
- Nome
|
||||||
|
- Até 2 habilidades principais
|
||||||
|
|
||||||
|
## 🛠️ Tecnologias Utilizadas
|
||||||
|
|
||||||
|
- [Vue.js](https://vuejs.org/) - Framework JavaScript progressivo
|
||||||
|
- [Pinia](https://pinia.vuejs.org/) - Gerenciador de estado para Vue.js
|
||||||
|
- [Vite](https://vitejs.dev/) - Ferramenta de build e desenvolvimento rápido
|
||||||
|
- [PokéAPI](https://pokeapi.co/) - API pública de dados dos Pokémon
|
||||||
|
|
||||||
|
## ▶️ Como rodar o projeto
|
||||||
|
|
||||||
|
```bash
|
||||||
|
# Clone o repositório
|
||||||
|
git clone https://github.com/DevCled85/App_ProjectPokedex.git
|
||||||
|
|
||||||
|
# Acesse a pasta
|
||||||
|
cd App_ProjectPokedex
|
||||||
|
|
||||||
|
# Instale as dependências
|
||||||
|
npm install
|
||||||
|
|
||||||
|
# Inicie o projeto
|
||||||
|
npm run dev
|
||||||
13
index.html
Normal file
13
index.html
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Projeto Pokedex @DevCled85</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
1665
package-lock.json
generated
Normal file
1665
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
21
package.json
Normal file
21
package.json
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
{
|
||||||
|
"name": "project-pokedex-cled",
|
||||||
|
"private": true,
|
||||||
|
"version": "0.0.0",
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^1.8.4",
|
||||||
|
"pinia": "^3.0.2",
|
||||||
|
"vue": "^3.5.13",
|
||||||
|
"vue-router": "^4.5.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vitejs/plugin-vue": "^5.2.2",
|
||||||
|
"vite": "^6.3.1"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/screenshot/screenshot.png
Normal file
BIN
public/screenshot/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 480 KiB |
1
public/vite.svg
Normal file
1
public/vite.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.5 KiB |
27
src/App.vue
Normal file
27
src/App.vue
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<CompHeader />
|
||||||
|
|
||||||
|
<CompMain />
|
||||||
|
|
||||||
|
<CompFooter />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import CompHeader from './components/CompHeader.vue';
|
||||||
|
import CompFooter from './components/CompFooter.vue';
|
||||||
|
import CompMain from './components/CompMain.vue';
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
div {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: space-between;
|
||||||
|
max-width: 1200px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||||
|
After Width: | Height: | Size: 496 B |
74
src/components/CompCardPokemon.vue
Normal file
74
src/components/CompCardPokemon.vue
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div class="cardPokemon">
|
||||||
|
<img :src="pokemon.image" :alt="pokemon.name" class="capa" />
|
||||||
|
<p>Nº {{ pokemon.id }}</p>
|
||||||
|
<h1>{{ pokemon.name }}</h1>
|
||||||
|
<div>
|
||||||
|
<span v-for="(ability, index) in pokemon.abilities" :key="index">{{ ability }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineProps({
|
||||||
|
pokemon: Object
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.cardPokemon {
|
||||||
|
width: 300px;
|
||||||
|
border: 2px solid #555;
|
||||||
|
background-color: #222;
|
||||||
|
border-radius: 5px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all .3s ease-in-out;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
}
|
||||||
|
|
||||||
|
& img {
|
||||||
|
width: 100%;
|
||||||
|
height: 280px;
|
||||||
|
object-fit: contain;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
}
|
||||||
|
|
||||||
|
& p {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
font-style: italic;
|
||||||
|
margin-block: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
& h1 {
|
||||||
|
font-size: 16px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
|
||||||
|
& div {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
padding: 5px 10px;
|
||||||
|
justify-content: space-around;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
& span {
|
||||||
|
padding: 5px 10px;
|
||||||
|
border-radius: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
background-color: blueviolet;
|
||||||
|
color: white;
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
21
src/components/CompFooter.vue
Normal file
21
src/components/CompFooter.vue
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
<template>
|
||||||
|
<footer>
|
||||||
|
<p>Desenvolvido por @DevCled85 ©2025</p>
|
||||||
|
</footer>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineOptions({
|
||||||
|
name: 'CompFooter'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
background-color: purple;
|
||||||
|
padding: 12px;
|
||||||
|
font-size: 12px;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
22
src/components/CompHeader.vue
Normal file
22
src/components/CompHeader.vue
Normal file
@ -0,0 +1,22 @@
|
|||||||
|
<template>
|
||||||
|
<header>
|
||||||
|
...:: Projeto pokedex ::...
|
||||||
|
</header>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
defineOptions({
|
||||||
|
name: 'CompHeader'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
header {
|
||||||
|
text-align: center;
|
||||||
|
/* width: 100%; */
|
||||||
|
padding: 24px;
|
||||||
|
background-color: purple;
|
||||||
|
font-size: large;
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
40
src/components/CompMain.vue
Normal file
40
src/components/CompMain.vue
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
<template>
|
||||||
|
<main>
|
||||||
|
<div v-if="pokemons.length === 0">Carregando pokémons...</div>
|
||||||
|
<div class="pokemonsCard" v-else>
|
||||||
|
<CompCardPokemon v-for="pokemon in pokemons" :key="pokemon.id" :pokemon="pokemon" />
|
||||||
|
</div>
|
||||||
|
</main>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import CompCardPokemon from './CompCardPokemon.vue'
|
||||||
|
import { onMounted } from 'vue'
|
||||||
|
import { usePokemonStore } from '../stores/pokemonStore'
|
||||||
|
import { storeToRefs } from 'pinia'
|
||||||
|
|
||||||
|
const store = usePokemonStore()
|
||||||
|
const { pokemons } = storeToRefs(store)
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
store.fetchPokemons()
|
||||||
|
})
|
||||||
|
|
||||||
|
defineOptions({
|
||||||
|
name: 'CompMain'
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
main {
|
||||||
|
padding-block: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pokemonsCard {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
gap: 20px;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
6
src/main.js
Normal file
6
src/main.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import { createApp } from 'vue';
|
||||||
|
import { createPinia } from 'pinia';
|
||||||
|
import './style.css';
|
||||||
|
import App from './App.vue';
|
||||||
|
|
||||||
|
createApp(App).use(createPinia()).mount('#app')
|
||||||
28
src/stores/pokemonStore.js
Normal file
28
src/stores/pokemonStore.js
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
// stores/pokemonStore.js
|
||||||
|
import { defineStore } from 'pinia'
|
||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export const usePokemonStore = defineStore('pokemonStore', {
|
||||||
|
state: () => ({
|
||||||
|
pokemons: []
|
||||||
|
}),
|
||||||
|
actions: {
|
||||||
|
async fetchPokemons() {
|
||||||
|
try {
|
||||||
|
const promises = []
|
||||||
|
for (let i = 1; i <= 20; i++) {
|
||||||
|
promises.push(axios.get(`https://pokeapi.co/api/v2/pokemon/${i}`))
|
||||||
|
}
|
||||||
|
const results = await Promise.all(promises)
|
||||||
|
this.pokemons = results.map(res => ({
|
||||||
|
id: res.data.id,
|
||||||
|
name: res.data.name,
|
||||||
|
image: res.data.sprites.other['official-artwork'].front_default,
|
||||||
|
abilities: res.data.abilities.map(a => a.ability.name)
|
||||||
|
}))
|
||||||
|
} catch (err) {
|
||||||
|
console.error('Erro ao buscar pokémons:', err)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
35
src/style.css
Normal file
35
src/style.css
Normal file
@ -0,0 +1,35 @@
|
|||||||
|
:root {
|
||||||
|
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 400;
|
||||||
|
|
||||||
|
color-scheme: light dark;
|
||||||
|
color: rgba(255, 255, 255, 0.87);
|
||||||
|
background-color: #242424;
|
||||||
|
|
||||||
|
font-synthesis: none;
|
||||||
|
text-rendering: optimizeLegibility;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
display: flex;
|
||||||
|
place-items: center;
|
||||||
|
min-width: 320px;
|
||||||
|
min-height: 100vh;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 100vw;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
7
vite.config.js
Normal file
7
vite.config.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
import { defineConfig } from 'vite'
|
||||||
|
import vue from '@vitejs/plugin-vue'
|
||||||
|
|
||||||
|
// https://vite.dev/config/
|
||||||
|
export default defineConfig({
|
||||||
|
plugins: [vue()],
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue
Block a user