├── .github
    └── resultado.png
├── .gitignore
├── .prettierrc.json
├── LICENSE.md
├── README.md
├── babel.config.js
├── package.json
├── public
    ├── favicon.ico
    └── index.html
├── src
    ├── App.vue
    ├── assets
    │   └── logo.png
    ├── components
    │   └── Pokemon.vue
    ├── main.js
    └── services
    │   └── api.js
└── yarn.lock


/.github/resultado.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atilara/pokedex-vuejs/800eab236ad40dda4431e96aee25b1e93e5ec2dd/.github/resultado.png


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /dist
 4 | 
 5 | 
 6 | # local env files
 7 | .env.local
 8 | .env.*.local
 9 | 
10 | # Log files
11 | npm-debug.log*
12 | yarn-debug.log*
13 | yarn-error.log*
14 | pnpm-debug.log*
15 | 
16 | # Editor directories and files
17 | .idea
18 | .vscode
19 | *.suo
20 | *.ntvs*
21 | *.njsproj
22 | *.sln
23 | *.sw?
24 | 


--------------------------------------------------------------------------------
/.prettierrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "all",
3 |   "tabWidth": 2,
4 |   "semi": true,
5 |   "singleQuote": true
6 | }
7 | 


--------------------------------------------------------------------------------
/LICENSE.md:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Átila Rodrigues
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Pokedex
 2 | 
 3 | ## ℹ Sobre o Projeto
 4 | 
 5 | Feito durante a Formação NodeJS com o intuito de aprender VueJS para criação de aplicações web e consumo de APIs.
 6 | 
 7 | Nesse caso, a API consumida foi a PokeAPI para criação de uma Pokedex
 8 | 
 9 | ## 🛠 Tecnologias
10 | 
11 | - VueJS
12 | - Axios
13 | - Bulma
14 | 
15 | ## 🌐 Resultado
16 | 
17 | <a href="https://pokedex-vuejs-kappa.vercel.app/">
18 |   <img src=".github/resultado.png" width="75%" />
19 | </a>
20 | 
21 | Clique na imagem para abrir o site utilizando o Vercel!
22 | 
23 | ## 🤔 Como executar o Projeto? 
24 | 
25 | ### Requisitos
26 | 
27 | - NPM ou Yarn
28 | - Vue
29 | 
30 | ### Rodando
31 | 
32 | ```bash
33 | # Instação de dependências
34 | $ yarn install
35 | 
36 | # Executando projeto
37 | $ yarn serve
38 | ```


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: [
3 |     '@vue/cli-plugin-babel/preset'
4 |   ]
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pokedex-vuejs",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "serve": "vue-cli-service serve",
 7 |     "build": "vue-cli-service build",
 8 |     "lint": "vue-cli-service lint"
 9 |   },
10 |   "dependencies": {
11 |     "axios": "^0.21.1",
12 |     "bulma": "^0.9.2",
13 |     "core-js": "^3.6.5",
14 |     "vue": "^2.6.11"
15 |   },
16 |   "devDependencies": {
17 |     "@vue/cli-plugin-babel": "~4.5.0",
18 |     "@vue/cli-plugin-eslint": "~4.5.0",
19 |     "@vue/cli-service": "~4.5.0",
20 |     "babel-eslint": "^10.1.0",
21 |     "eslint": "^6.7.2",
22 |     "eslint-plugin-vue": "^6.2.2",
23 |     "vue-template-compiler": "^2.6.11"
24 |   },
25 |   "eslintConfig": {
26 |     "root": true,
27 |     "env": {
28 |       "node": true
29 |     },
30 |     "extends": [
31 |       "plugin:vue/essential",
32 |       "eslint:recommended"
33 |     ],
34 |     "parserOptions": {
35 |       "parser": "babel-eslint"
36 |     },
37 |     "rules": {}
38 |   },
39 |   "browserslist": [
40 |     "> 1%",
41 |     "last 2 versions",
42 |     "not dead"
43 |   ]
44 | }
45 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atilara/pokedex-vuejs/800eab236ad40dda4431e96aee25b1e93e5ec2dd/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title><%= htmlWebpackPlugin.options.title %></title>
 9 |   </head>
10 |   <body>
11 |     <noscript>
12 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
13 |     </noscript>
14 |     <div id="app"></div>
15 |     <!-- built files will be auto injected -->
16 |   </body>
17 | </html>
18 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="app">
 3 |     <div class="column is-half is-offset-one-quarter">
 4 |       <img src="./assets/logo.png" alt="Pokemon Logo" width="30%">
 5 |       <input type="text" name="" id="" placeholder="Buscar Pokemon" class="input is-rounded" v-model="search">
 6 |       <button id="searchBtn" class="button is-fullwidth is-success is-rounded" @click="searchPokemons">Buscar</button>
 7 |     </div>
 8 |     <div>
 9 |       <div id="pokemon-list">
10 |         <div :key="pokemon.url" v-for="(pokemon, index) in filteredPokemons">
11 |           <Pokemon :index="index + 1" :name="pokemon.name" :url="pokemon.url" />
12 |         </div>
13 |       </div>
14 |     </div>
15 |   </div>
16 | </template>
17 | 
18 | <script>
19 | import api from './services/api';
20 | import Pokemon from './components/Pokemon'
21 | 
22 | export default {
23 |   name: 'App',
24 |   components: {
25 |     Pokemon
26 |   },
27 |   data() {
28 |     return {
29 |       pokemons: [],
30 |       filteredPokemons: [],
31 |       search: ''
32 |     }
33 |   },
34 |   // Função é executada quando a página é criada
35 |   created: function() {
36 |     api.get('pokemon?limit=151&offset=0').then((response) => { 
37 |       this.pokemons = response.data.results;
38 |       this.filteredPokemons = response.data.results;
39 |     });
40 |   },
41 |   methods: {
42 |     searchPokemons: function() {
43 |       this.filteredPokemons = this.pokemons;
44 |       if(this.search == '' || this.search == ' ') {
45 |         this.filteredPokemons = this.pokemons;
46 |       } else {
47 |         this.filteredPokemons = this.pokemons.filter((pokemon) => pokemon.name == this.search);
48 |       }
49 |     }
50 |   }
51 | }
52 | </script>
53 | 
54 | <style>
55 | #app {
56 |   font-family: Avenir, Helvetica, Arial, sans-serif;
57 |   -webkit-font-smoothing: antialiased;
58 |   -moz-osx-font-smoothing: grayscale;
59 |   text-align: center;
60 |   color: #2c3e50;
61 |   margin-top: 60px;
62 | }
63 | 
64 | #searchBtn {
65 |   margin-top: 1vh;
66 | }
67 | 
68 | #pokemon-list {
69 |   display: flex;
70 |   flex-direction: row;
71 |   align-items: center;
72 |   justify-content: center;
73 |   flex-wrap: wrap;
74 | }
75 | </style>
76 | 


--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/atilara/pokedex-vuejs/800eab236ad40dda4431e96aee25b1e93e5ec2dd/src/assets/logo.png


--------------------------------------------------------------------------------
/src/components/Pokemon.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div id="card" class="card">
 3 |     <div class="card-image">
 4 |       <figure>
 5 |         <img :src="currentImg" alt="Placeholder image">
 6 |       </figure>
 7 |     </div>
 8 |     <div class="card-content">
 9 |       <div class="media">
10 |         <div class="media-content">
11 |           <p class="title is-4">{{ index }}. {{ name | upperCase }}</p>
12 |           <p class="subtitle is-6">{{ pokemon.type }}</p>
13 |         </div>
14 |       </div>
15 |       <div class="content">
16 |         <button class="button is-medium is-fullwidth" @click="changeSprite">Mudar Sprite</button>
17 |       </div>
18 |     </div>
19 |   </div>
20 | </template>
21 | 
22 | <script>
23 | import api from '../services/api';
24 | 
25 | export default {
26 |   name: 'Pokemon',
27 |   props: {
28 |     index: Number,
29 |     name: String,
30 |     url: String
31 |   },
32 |   created: function() {
33 |     api.get(this.url).then((response) => {
34 |       this.pokemon.type = response.data.types[0].type.name;
35 |       this.pokemon.front = response.data.sprites.front_default;
36 |       this.pokemon.back = response.data.sprites.back_default;
37 |       this.currentImg = response.data.sprites.front_default;
38 |     });
39 |   },
40 |   data() {
41 |     return {
42 |       isFront: true,
43 |       currentImg: '',
44 |       pokemon: {
45 |         type: '',
46 |         front: '',
47 |         back: '',
48 |       }
49 |     }
50 |   },
51 |   methods: {
52 |     changeSprite: function() {
53 |       if(this.isFront) {
54 |         this.isFront = false;
55 |         this.currentImg = this.pokemon.back;
56 |       } else {
57 |         this.isFront = true;
58 |         this.currentImg = this.pokemon.front;
59 |       }
60 |     }
61 |   },
62 |   filters: {
63 |     upperCase: function(value) {
64 |       var newName = value[0].toUpperCase() + value.slice(1);
65 |       return newName;
66 |     }
67 |   }
68 | }
69 | </script>
70 | 
71 | <style>
72 |   .card {
73 |     margin: 1vh;
74 |   }
75 | 
76 |   #card {
77 |     width: 20rem;
78 |   }
79 | </style>
80 | 
81 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import App from './App.vue';
 3 | import '../node_modules/bulma/css/bulma.css';
 4 | 
 5 | Vue.config.productionTip = false;
 6 | 
 7 | new Vue({
 8 |   render: h => h(App),
 9 | }).$mount('#app');
10 | 


--------------------------------------------------------------------------------
/src/services/api.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios';
2 | 
3 | const api = axios.create({
4 |   baseURL: 'https://pokeapi.co/api/v2/',
5 | });
6 | 
7 | export default api;
8 | 


--------------------------------------------------------------------------------