├── public
    ├── robots.txt
    ├── favicon.ico
    ├── logo192.png
    ├── logo512.png
    ├── img
    │   ├── pokecoin.png
    │   ├── pokestore-fire.PNG
    │   ├── pokestore-grass.PNG
    │   ├── pokeball-fire.svg
    │   └── pokeball-grass.svg
    ├── manifest.json
    └── index.html
├── src
    ├── services
    │   └── api.js
    ├── index.js
    ├── components
    │   ├── Search
    │   │   ├── index.js
    │   │   └── styles.css
    │   ├── ItemCart
    │   │   ├── styles.css
    │   │   └── index.js
    │   ├── Cards
    │   │   ├── styles.css
    │   │   └── index.js
    │   ├── Card
    │   │   ├── index.js
    │   │   └── styles.css
    │   ├── Header
    │   │   ├── styles.css
    │   │   └── index.js
    │   └── Cart
    │   │   ├── index.js
    │   │   └── styles.css
    ├── styles.css
    └── App.js
├── .gitignore
├── package.json
└── README.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saranascimento/desafio-loja-pokemon/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saranascimento/desafio-loja-pokemon/HEAD/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saranascimento/desafio-loja-pokemon/HEAD/public/logo512.png


--------------------------------------------------------------------------------
/public/img/pokecoin.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saranascimento/desafio-loja-pokemon/HEAD/public/img/pokecoin.png


--------------------------------------------------------------------------------
/public/img/pokestore-fire.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saranascimento/desafio-loja-pokemon/HEAD/public/img/pokestore-fire.PNG


--------------------------------------------------------------------------------
/public/img/pokestore-grass.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/saranascimento/desafio-loja-pokemon/HEAD/public/img/pokestore-grass.PNG


--------------------------------------------------------------------------------
/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 | 
8 | export default api


--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import App from './App';
 4 | 
 5 | ReactDOM.render(
 6 |   <React.StrictMode>
 7 |     <App />
 8 |   </React.StrictMode>,
 9 |   document.getElementById('root')
10 | );
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 


--------------------------------------------------------------------------------
/src/components/Search/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import './styles.css'
 4 | 
 5 | const Search = ({filterUpdate}) => {
 6 | 
 7 |     return (
 8 |         <input 
 9 |             onChange={(event) => filterUpdate(event.target.value.toLowerCase())}
10 |             type="text"  
11 |             id="search"
12 |             placeholder="Buscar Pokemon..." 
13 |              
14 |         /> 
15 |     )
16 | }
17 | 
18 | export default Search;


--------------------------------------------------------------------------------
/src/components/ItemCart/styles.css:
--------------------------------------------------------------------------------
 1 | .item {
 2 |     display: grid;
 3 |     grid-template-columns: 60px 1fr 65px;
 4 |     width: 100%;
 5 |     align-items: center;
 6 |     justify-items: flex-start;
 7 |     padding: 8px 0;
 8 |     font-size: 18px;
 9 | }
10 | 
11 | .item:nth-child(2n+1) {
12 |     background-color: whitesmoke;
13 | }
14 | 
15 | .item_pokemon-image {
16 |     width: 50px;
17 |     margin-left: 4px;
18 | }
19 | 
20 | .item_pokemon-name {
21 |     font-size: 14px;
22 | }
23 | 
24 | .price {
25 |     display: flex;
26 |     align-items: center;
27 |     justify-content: center;
28 | }


--------------------------------------------------------------------------------
/src/components/Search/styles.css:
--------------------------------------------------------------------------------
 1 | #search {
 2 |     width: 80%;
 3 |     font-size: 16px;
 4 |     padding: 12px 20px 12px 40px;
 5 |     border: 1px solid #ddd;
 6 |     border-radius: 4px;
 7 |     background: #ffffff url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/7e/Vector_search_icon.svg/111px-Vector_search_icon.svg.png) no-repeat;
 8 |     background-size: 20px;
 9 |     background-position: 1.8% 50%;
10 |     
11 | }
12 | 
13 | @media only screen and (max-width: 700px) {
14 |     .logo-wrapper p {
15 |         display: none;
16 |     }
17 | 
18 |     #search {
19 |         width: 85%;
20 |     }
21 | }


--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "logo192.png",
12 |       "type": "image/png",
13 |       "sizes": "192x192"
14 |     },
15 |     {
16 |       "src": "logo512.png",
17 |       "type": "image/png",
18 |       "sizes": "512x512"
19 |     }
20 |   ],
21 |   "start_url": ".",
22 |   "display": "standalone",
23 |   "theme_color": "#000000",
24 |   "background_color": "#ffffff"
25 | }
26 | 


--------------------------------------------------------------------------------
/src/components/Cards/styles.css:
--------------------------------------------------------------------------------
 1 | .pokemon-list {
 2 |     display: grid;
 3 |     grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
 4 |     grid-gap: 20px;
 5 |     padding-inline-start: 0;
 6 |     align-items: center;
 7 |     justify-items: center;
 8 |     max-width: 800px;
 9 |     margin: 0 20px;
10 | }
11 | 
12 | .store{
13 |     margin-bottom: 35px;
14 |     display: flex;
15 |     justify-content: center;
16 | }
17 | 
18 | @media only screen and (max-width: 700px) {
19 |     .store{
20 |         flex-direction: column-reverse;
21 |         align-items: center;
22 |     }
23 | 
24 |     .pokemon-list{
25 |         max-width: initial;
26 |     }
27 | }


--------------------------------------------------------------------------------
/src/components/ItemCart/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | import './styles.css'
 3 | 
 4 | const ItemCart = ({pokemon}) => {
 5 |     return (
 6 |         <div className="item">
 7 |             <img className="item_pokemon-image" alt="image pokemon" src={pokemon.image}/>
 8 |             <strong className="item_pokemon-name">{pokemon.name}<span>{` (x${pokemon.amount})`}</span></strong>
 9 |             <div className="price">
10 |                 <img className="pokemon-price-image" alt="image of pokecoin" src={"/img/pokecoin.png"} />
11 |                 <span>{pokemon.price * pokemon.amount}</span>
12 |             </div>
13 |         </div>
14 |     )
15 | }
16 | 
17 | export default ItemCart


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "pokemon-store",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@material-ui/core": "^4.11.0",
 7 |     "@testing-library/jest-dom": "^4.2.4",
 8 |     "@testing-library/react": "^9.3.2",
 9 |     "@testing-library/user-event": "^7.1.2",
10 |     "axios": "^0.19.2",
11 |     "react": "^16.13.1",
12 |     "react-dom": "^16.13.1",
13 |     "react-icons": "^3.10.0",
14 |     "react-scripts": "3.4.1"
15 |   },
16 |   "scripts": {
17 |     "start": "react-scripts start"
18 | 
19 |   },
20 |   "eslintConfig": {
21 |     "extends": "react-app"
22 |   },
23 |   "browserslist": {
24 |     "production": [
25 |       ">0.2%",
26 |       "not dead",
27 |       "not op_mini all"
28 |     ],
29 |     "development": [
30 |       "last 1 chrome version",
31 |       "last 1 firefox version",
32 |       "last 1 safari version"
33 |     ]
34 |   }
35 | }
36 | 


--------------------------------------------------------------------------------
/src/styles.css:
--------------------------------------------------------------------------------
 1 | @import url('https://fonts.googleapis.com/css2?family=Ranchers&family=Press+Start+2P&family=Roboto:wght@400;700&family=Trade+Winds&display=swap');
 2 | 
 3 | :root {
 4 |     --primary-grass-color: #447e65;
 5 |     --secondary-grass-color: #DEFDE0;
 6 | 
 7 |     --primary-fire-color: #c24d4d;
 8 |     --secondary-fire-color:#FDDFDF;
 9 | 
10 |     --dark-color: #696969;
11 |     --light-color: #f5f5f5; 
12 | 
13 | }
14 | 
15 | 
16 | * {
17 |     margin: 0;
18 |     padding: 0;
19 |     outline: 0;
20 |     box-sizing: border-box;
21 | }
22 | 
23 | body {
24 |     background-color: var(--light-color);
25 |     color: var(--dark-color);
26 |     display: flex;
27 |     justify-content: center;
28 |     font-family: 'Roboto', sans-serif;
29 | }
30 | 
31 | .container {
32 |     max-width: 1024px;
33 |     margin: 0 auto;
34 | }
35 | 
36 | #root {
37 |     width: 100%;
38 | }
39 | 
40 | .pokemon-price-image {
41 |     width: 24px;
42 |     margin-right: 4px;
43 | 
44 | }
45 | 
46 | 
47 | 
48 | 


--------------------------------------------------------------------------------
/src/components/Card/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react'
 2 | 
 3 | import './styles.css'
 4 | 
 5 | const Card = ({id, type, image, name, price, setPokemonSelected,}) => {
 6 |     
 7 |     return (
 8 | 
 9 |         <article className={`card card-${type}`} key={id}>
10 |             <figure className={`figure-card-${type}`}>
11 |                 <img className="card_pokemon-image" alt={type} src={image}/>
12 |                 <figcaption>
13 |                     <strong className="card_pokemon-name " >{name}</strong>
14 |                     <div className="card_pokemon-price-wrapper">
15 |                         <img className="pokemon-price-image" alt="image of pokecoin" src={"/img/pokecoin.png"} />
16 |                         <span className="card_pokemon-price">{price}</span>
17 |                     </div>
18 |                     <button className={`card_pokemon-button card-btn-${type}`} href="#" onClick={() => setPokemonSelected(image, name, price)}>adicionar +</button>
19 |                 </figcaption>
20 |             </figure>                        
21 |         </article>
22 |     )
23 | }
24 | 
25 | export default Card


--------------------------------------------------------------------------------
/src/components/Header/styles.css:
--------------------------------------------------------------------------------
 1 | .header {
 2 |     width: 100%;
 3 |     height: 100px;
 4 |     font-size: 18px;
 5 |     font-weight: bold;
 6 |     color: white;
 7 |     display: flex;
 8 |     justify-content: center;
 9 |     align-items: center;
10 |     margin-bottom: 20px;
11 | } 
12 | 
13 | .header-fire {
14 |     background-color: var(--primary-fire-color);
15 | }
16 | 
17 | .header-grass {
18 |     background-color: var(--primary-grass-color);
19 | }
20 | 
21 | .box-header {
22 |     display: flex;
23 |     align-items: center;
24 |     justify-content: space-between;
25 |     width: 100%;
26 |     padding: 0 20px;
27 | }
28 | 
29 | .logo-wrapper {
30 |     display: flex;
31 |     align-items: center;
32 |     justify-content: center;
33 | }
34 | 
35 | .logo-wrapper img {
36 |     width: 35px;
37 |     margin: 4px;
38 | }
39 | 
40 | .logo-wrapper p {
41 |     font-size: 1.4em;
42 | }
43 | 
44 | @media only screen and (max-width: 700px) {
45 |     .logo-wrapper p {
46 |         display: none;
47 |     }
48 | }
49 | 
50 | .btn-header-cart {
51 |     background: transparent;
52 |     color: white;
53 |     border: none;
54 |     font-size: 28px;
55 |     display: flex;
56 |     justify-content: center;
57 |     align-items: center;
58 | }
59 | 
60 | .btn-header-cart span{
61 |     margin-left: 8px;
62 |     font-size: 16px;
63 | }
64 | 
65 | 
66 | 
67 | 


--------------------------------------------------------------------------------
/src/components/Cards/index.js:
--------------------------------------------------------------------------------
 1 | import React, { Component } from 'react';
 2 | 
 3 | 
 4 | import Card from '../Card'
 5 | 
 6 | import "./styles.css"
 7 | 
 8 | export default class Cards extends Component {
 9 |     
10 | 
11 |     getIdFromURL = (url) => {
12 |         let id = parseInt(url.split("/")[6])
13 | 
14 |         return id
15 |     }
16 | 
17 | 
18 |     render() {
19 |         let {pokemonList, type, setPokemonSelected, filterPokemon} = this.props
20 |   
21 |         return (
22 |             <div className="pokemon-list container">
23 |             
24 |                 {pokemonList.slice(0,32)
25 |                 .filter(pokemon => {
26 |                     return pokemon.pokemon.name.indexOf(filterPokemon) >= 0
27 |                 })
28 |                 .map((pokemon, index) => ( 
29 |                     <Card
30 |                         id={index}
31 |                         type={type}
32 |                         image={`https://pokeres.bastionbot.org/images/pokemon/${this.getIdFromURL(pokemon.pokemon.url)}.png`}
33 |                         name={pokemon.pokemon.name}
34 |                         price={this.getIdFromURL(pokemon.pokemon.url)}
35 |                         setPokemonSelected={setPokemonSelected}
36 |                         insideCart={false}
37 |                     />      
38 |                    
39 |                 ))}
40 |             </div>
41 |             
42 |         )
43 |     }
44 | }


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Desafio - PokeStore
 2 | 
 3 | 
 4 | ### Instalação das dependências do projeto:
 5 |  Agora, para ver a aplicação funcionando em sua máquina você precisa seguir os seguintes passos:
 6 | 
 7 | ```sh
 8 | $ yarn install
 9 | ou
10 | $ npm install
11 | ```
12 | 
13 | ### Para executar o projeto:
14 | 
15 | ```sh
16 | $ npm start
17 | ou
18 | $ yarn start
19 | ```
20 | 
21 |  Para começar a comprar seus pokemon (Sim, o plural de Pokemon é Pokemon, haha) você pode acessar a PokeStore dos Pokemon de fogo clicando [aqui](https://desafio-pokestore.netlify.app/fire) , ou clicar [aqui](https://desafio-pokestore.netlify.app/grass) para a loja dos Pokemon do tipo Grama.
22 | 
23 | ### Links dos temas:
24 |  
25 |  -- Para acessar a PokeStore de Fogo: http://localhost:3000/fire
26 |  -- Para acessar a PokeStore de Grama: http://localhost:3000/grass
27 | 
28 | ### Tecnologias:
29 | 
30 | - **React / JavaScript**
31 | 
32 | ### Screenshots do Projeto:
33 | -PokeStore de fogo
34 | ![PokeStore de fogo](./public/img/pokestore-fire.PNG)
35 | 
36 | -PokeStore de Grama
37 | ![PokeStore da grama](./public/img/pokestore-grass.PNG)
38 | 
39 | ### Funcionalidades do projeto:
40 | 
41 | * Catálogo de produtos
42 | * Carrinho lateral
43 | * Resumo do carrinho
44 | * 2 lojas com estilos e tipos diferentes de Pokémon
45 | * Barra de busca para filtrar os Pokémon
46 | * Botão de finalizar compra, reiniciando o processo de compra
47 | * Modal de obrigado ao finalizar compra
48 | 
49 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/img/pokeball-fire.svg" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/img/pokeball-fire.svg" />
13 |     <!--
14 |       manifest.json provides metadata used when your web app is installed on a
15 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 |     -->
17 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 |     <!--
19 |       Notice the use of %PUBLIC_URL% in the tags above.
20 |       It will be replaced with the URL of the `public` folder during the build.
21 |       Only files inside the `public` folder can be referenced from the HTML.
22 | 
23 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24 |       work correctly both with client-side routing and a non-root public URL.
25 |       Learn how to configure a non-root public URL by running `npm run build`.
26 |     -->
27 |     <title>PokeStore</title>
28 |   </head>
29 |   <body>
30 |     <noscript>You need to enable JavaScript to run this app.</noscript>
31 |     <div id="root"></div>
32 |     <!--
33 |       This HTML file is a template.
34 |       If you open it directly in the browser, you will see an empty page.
35 | 
36 |       You can add webfonts, meta tags, or analytics to this file.
37 |       The build step will place the bundled scripts into the <body> tag.
38 | 
39 |       To begin the development, run `npm start` or `yarn start`.
40 |       To create a production bundle, use `npm run build` or `yarn build`.
41 |     -->
42 |   </body>
43 | </html>
44 | 


--------------------------------------------------------------------------------
/src/components/Header/index.js:
--------------------------------------------------------------------------------
 1 | import React, {useState} from 'react';
 2 | 
 3 | import {FaShoppingCart} from 'react-icons/fa'
 4 | import { ClickAwayListener } from '@material-ui/core';
 5 | 
 6 | import Cart from '../Cart'
 7 | import Search from '../Search'
 8 | 
 9 | import "./styles.css"
10 | 
11 | const Header = ({pokemonSelected, type, resetCart, filterUpdate}) => {
12 |     
13 |     const [open, setOpen] = React.useState(false);
14 |   
15 |     const handleClick = () => {
16 |       setOpen((prev) => !prev);
17 |     };
18 |   
19 |     const handleClickAway = () => {
20 |       setOpen(false);
21 |     };
22 | 
23 |     return (
24 |         <header className={`header header-${type}`}>
25 |             <div className="box-header container">
26 |                 <div className="logo-wrapper ">
27 |                     <img className="" alt="Pokebola" src={`/img/pokeball-${type}.svg`} />
28 |                     <p>PokeStore</p>
29 |                 </div>
30 |                 
31 |                 <Search 
32 |                     filterUpdate={filterUpdate}
33 |                 />
34 | 
35 |                 <ClickAwayListener onClickAway={handleClickAway}>
36 |                 <div className="cart-wrapper">
37 |                 <div>
38 |                     <button type="button" className="btn-header-cart" onClick={handleClick}>
39 |                         
40 |                     <FaShoppingCart /><span>{pokemonSelected.length}</span>
41 |                     </button>
42 |                 </div>
43 |                 {open ? (
44 |                     
45 |                         <Cart 
46 |                             pokemonSelected={pokemonSelected}
47 |                             type={type}
48 |                             resetCart={resetCart}
49 |                             filterUpdate={filterUpdate}
50 |                         />
51 |                     
52 |                 ) : null}
53 |                 </div>
54 |                 </ClickAwayListener>
55 |             </div>  
56 |         </header>
57 |     )
58 | };
59 | 
60 | 
61 | 
62 | export default Header;


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
  1 | import React, { Component }from 'react';
  2 | import api from '../src/services/api'
  3 | 
  4 | import "./styles.css"
  5 | 
  6 | import Header from './components/Header';
  7 | import Cards from './components/Cards';
  8 | import Cart from './components/Cart';
  9 | 
 10 | 
 11 | 
 12 | export default class App  extends Component { 
 13 | 
 14 |   constructor(props) {
 15 |     super(props)
 16 |     this.state = {
 17 |       pokemonList: [],
 18 |       pokemonSelected: [],
 19 |       type: "",
 20 |       filterPokemon: "",
 21 |     };
 22 | 
 23 |     this.filterUpdate = this.filterUpdate.bind(this);
 24 |   }
 25 | 
 26 |     componentDidMount() {
 27 |         this.loadPokemons();
 28 |     };
 29 | 
 30 |     getPokemonThemeFromUrl = () => {
 31 |       return window.location.pathname.split("/")[1] === "fire" ? "fire" : "grass"
 32 |     }
 33 | 
 34 |     loadPokemons = async () => {
 35 |       let pokemonType = this.getPokemonThemeFromUrl()
 36 |       const response = await api.get(`type/${pokemonType}`)
 37 |       this.setState({ pokemonList: response.data.pokemon, type: response.data.name})
 38 |     };
 39 | 
 40 |     resetCart = () => {
 41 |       return this.setState({pokemonSelected: []})
 42 |     }
 43 | 
 44 |     setPokemonSelected = (image, name, price) => {
 45 | 
 46 |       const found = this.state.pokemonSelected.findIndex(pokemon => pokemon.name === name ) 
 47 | 
 48 |       if(found === -1) {
 49 |         return this.setState({pokemonSelected: [...this.state.pokemonSelected, {image, name, price, amount: 1 }]})  
 50 |       }
 51 | 
 52 |       let pokemonsSelectedList = [...this.state.pokemonSelected] 
 53 |       
 54 |       pokemonsSelectedList[found].amount += 1
 55 | 
 56 |       this.setState({pokemonSelected: pokemonsSelectedList})
 57 | 
 58 |         
 59 |     }
 60 | 
 61 |     filterUpdate(value) {
 62 |       this.setState({
 63 |         filterPokemon: value
 64 |       })
 65 |     }
 66 | 
 67 |   render () {
 68 |     const { pokemonList, type, pokemonSelected, filterPokemon } = this.state
 69 |    
 70 |     return  (
 71 |       <div className="App">
 72 |           <Header 
 73 |             pokemonSelected={pokemonSelected}
 74 |             type={type}
 75 |             resetCart={this.resetCart}
 76 |             filterUpdate={this.filterUpdate}
 77 |           />
 78 |           <div className="store container">
 79 |             <Cards 
 80 |               pokemonList={pokemonList}
 81 |               type={type}
 82 |               setPokemonSelected={this.setPokemonSelected}
 83 |               filterPokemon={filterPokemon}
 84 |             />
 85 |             <Cart 
 86 |             pokemonSelected={pokemonSelected} 
 87 |             type={type} 
 88 |             resetCart={this.resetCart} 
 89 |             filterUpdate={this.filterUpdate}
 90 |             />
 91 |           </div>
 92 |         
 93 |       </div>
 94 |     )
 95 |     
 96 |   }
 97 |     
 98 | }
 99 | 
100 | 
101 | 


--------------------------------------------------------------------------------
/public/img/pokeball-fire.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 5 | <path style="fill:#303C42;" d="M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z"/>
 6 | <path style="fill:#E53935;" d="M256,21.333c121.508,0,221.715,92.837,233.483,211.299c-17.362,3.845-61.466,11.878-127.904,12.608
 7 | 	c-5.484-53.704-50.452-95.908-105.579-95.908s-100.095,42.203-105.579,95.908c-66.438-0.73-110.542-8.763-127.904-12.608
 8 | 	C34.285,114.171,134.492,21.333,256,21.333z"/>
 9 | <circle style="fill:#455A64;" cx="256" cy="256" r="85.333"/>
10 | <path style="fill:#FFFFFF;" d="M256,490.667C126.604,490.667,21.333,385.396,21.333,256c0-0.596,0.086-1.171,0.09-1.766
11 | 	c20.31,4.324,64.224,11.547,128.97,12.251c5.357,53.837,50.385,96.181,105.607,96.181s100.25-42.344,105.607-96.181
12 | 	c64.746-0.704,108.66-7.927,128.97-12.251c0.004,0.595,0.09,1.169,0.09,1.766C490.667,385.396,385.396,490.667,256,490.667z"/>
13 | <circle style="fill:#303C42;" cx="256" cy="256" r="64"/>
14 | <circle style="fill:#F2F2F2;" cx="256" cy="256" r="42.667"/>
15 | <path style="opacity:0.2;fill:#FFFFFF;enable-background:new    ;" d="M221.777,268.888c0-23.531,19.135-42.667,42.667-42.667
16 | 	c12.215,0,23.169,5.224,30.954,13.475c-6.418-15.456-21.643-26.363-39.398-26.363c-23.531,0-42.667,19.135-42.667,42.667
17 | 	c0,11.316,4.501,21.548,11.712,29.191C222.957,280.163,221.777,274.664,221.777,268.888z"/>
18 | <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-45.5784" y1="639.555" x2="-23.8278" y2="629.4138" gradientTransform="matrix(21.3333 0 0 -21.3333 996.3334 13791.667)">
19 | 	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/>
20 | 	<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
21 | </linearGradient>
22 | <path style="fill:url(#SVGID_1_);" d="M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z"
23 | 	/>
24 | <path style="opacity:0.1;enable-background:new    ;" d="M444.74,239.997c21.049-2.556,36.18-5.467,44.743-7.365
25 | 	c-5.801-58.395-33.158-110.496-73.897-148.387C436.051,119.059,448,159.449,448,202.667C448,215.4,446.702,227.809,444.74,239.997z"
26 | 	/>
27 | <path style="opacity:0.1;enable-background:new    ;" d="M490.577,254.234c-10.544,2.245-27.586,5.257-50.467,7.747
28 | 	C413.73,362.698,322.204,437.333,213.333,437.333c-61.789,0-117.908-24.186-159.859-63.361
29 | 	C94.217,443.637,169.635,490.667,256,490.667c129.396,0,234.667-105.271,234.667-234.667
30 | 	C490.667,255.404,490.581,254.829,490.577,254.234z"/>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | <g>
44 | </g>
45 | <g>
46 | </g>
47 | <g>
48 | </g>
49 | <g>
50 | </g>
51 | <g>
52 | </g>
53 | <g>
54 | </g>
55 | <g>
56 | </g>
57 | <g>
58 | </g>
59 | <g>
60 | </g>
61 | </svg>
62 | 


--------------------------------------------------------------------------------
/public/img/pokeball-grass.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="iso-8859-1"?>
 2 | <!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
 4 | 	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
 5 | <path style="fill:#303C42;" d="M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z"/>
 6 | <path style="fill:#447e65;" d="M256,21.333c121.508,0,221.715,92.837,233.483,211.299c-17.362,3.845-61.466,11.878-127.904,12.608
 7 | 	c-5.484-53.704-50.452-95.908-105.579-95.908s-100.095,42.203-105.579,95.908c-66.438-0.73-110.542-8.763-127.904-12.608
 8 | 	C34.285,114.171,134.492,21.333,256,21.333z"/>
 9 | <circle style="fill:#455A64;" cx="256" cy="256" r="85.333"/>
10 | <path style="fill:#FFFFFF;" d="M256,490.667C126.604,490.667,21.333,385.396,21.333,256c0-0.596,0.086-1.171,0.09-1.766
11 | 	c20.31,4.324,64.224,11.547,128.97,12.251c5.357,53.837,50.385,96.181,105.607,96.181s100.25-42.344,105.607-96.181
12 | 	c64.746-0.704,108.66-7.927,128.97-12.251c0.004,0.595,0.09,1.169,0.09,1.766C490.667,385.396,385.396,490.667,256,490.667z"/>
13 | <circle style="fill:#303C42;" cx="256" cy="256" r="64"/>
14 | <circle style="fill:#F2F2F2;" cx="256" cy="256" r="42.667"/>
15 | <path style="opacity:0.2;fill:#FFFFFF;enable-background:new    ;" d="M221.777,268.888c0-23.531,19.135-42.667,42.667-42.667
16 | 	c12.215,0,23.169,5.224,30.954,13.475c-6.418-15.456-21.643-26.363-39.398-26.363c-23.531,0-42.667,19.135-42.667,42.667
17 | 	c0,11.316,4.501,21.548,11.712,29.191C222.957,280.163,221.777,274.664,221.777,268.888z"/>
18 | <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-45.5784" y1="639.555" x2="-23.8278" y2="629.4138" gradientTransform="matrix(21.3333 0 0 -21.3333 996.3334 13791.667)">
19 | 	<stop  offset="0" style="stop-color:#FFFFFF;stop-opacity:0.2"/>
20 | 	<stop  offset="1" style="stop-color:#FFFFFF;stop-opacity:0"/>
21 | </linearGradient>
22 | <path style="fill:url(#SVGID_1_);" d="M256,0C114.844,0,0,114.844,0,256s114.844,256,256,256s256-114.844,256-256S397.156,0,256,0z"
23 | 	/>
24 | <path style="opacity:0.1;enable-background:new    ;" d="M444.74,239.997c21.049-2.556,36.18-5.467,44.743-7.365
25 | 	c-5.801-58.395-33.158-110.496-73.897-148.387C436.051,119.059,448,159.449,448,202.667C448,215.4,446.702,227.809,444.74,239.997z"
26 | 	/>
27 | <path style="opacity:0.1;enable-background:new    ;" d="M490.577,254.234c-10.544,2.245-27.586,5.257-50.467,7.747
28 | 	C413.73,362.698,322.204,437.333,213.333,437.333c-61.789,0-117.908-24.186-159.859-63.361
29 | 	C94.217,443.637,169.635,490.667,256,490.667c129.396,0,234.667-105.271,234.667-234.667
30 | 	C490.667,255.404,490.581,254.829,490.577,254.234z"/>
31 | <g>
32 | </g>
33 | <g>
34 | </g>
35 | <g>
36 | </g>
37 | <g>
38 | </g>
39 | <g>
40 | </g>
41 | <g>
42 | </g>
43 | <g>
44 | </g>
45 | <g>
46 | </g>
47 | <g>
48 | </g>
49 | <g>
50 | </g>
51 | <g>
52 | </g>
53 | <g>
54 | </g>
55 | <g>
56 | </g>
57 | <g>
58 | </g>
59 | <g>
60 | </g>
61 | </svg>
62 | 


--------------------------------------------------------------------------------
/src/components/Card/styles.css:
--------------------------------------------------------------------------------
  1 | .card {
  2 |     width: 225px;
  3 |     height: 320px;
  4 |     background-color: white;
  5 |     border: 1px solid #DDD;
  6 |     border-radius: 5px;
  7 |     padding: 4px;
  8 |     display: flex;
  9 |     flex-direction: column;
 10 |     align-items: center;
 11 |     box-shadow: 1px 1px 7px 2px #ddd;
 12 |     transition: transform .2s;
 13 | }
 14 | 
 15 | 
 16 | .card-grass:hover {
 17 |     transform: scale(1.1);
 18 |     box-shadow: 0px 0px 4px 0px var(--primary-grass-color);
 19 | }
 20 | 
 21 | .card-fire:hover {
 22 |     transform: scale(1.1);
 23 |     box-shadow: 0px 0px 4px 0px var(--primary-fire-color);
 24 | }
 25 | 
 26 | .card figure{
 27 |     width: 100%;
 28 |     height: 100%;
 29 |     display: flex;
 30 |     justify-content: center;
 31 |     flex-direction: column;
 32 |     align-items: center;
 33 |     position: relative;
 34 | }
 35 | 
 36 | .figure-card-fire {
 37 |     background-color: var(--secondary-fire-color);
 38 | }
 39 | 
 40 | .figure-card-grass {
 41 | 
 42 |     background-color: var(--secondary-grass-color);
 43 | }
 44 | 
 45 | .card figure::after {
 46 |     content: "";
 47 |     display: block;
 48 |     width: 70%;
 49 |     height: 50%;
 50 |     border-radius: 100%;
 51 |     background-color: #fff;
 52 |     opacity: .7;
 53 |     position: absolute;
 54 |     top: 8%;
 55 |     left: 13%;
 56 | }
 57 | 
 58 | .card_pokemon-button {
 59 |     height: 36px;
 60 |     border-radius: 5px;
 61 |     background: none;
 62 |     margin-top: 10px;
 63 |     font-weight: bold;
 64 |     font-size: 14px;
 65 |     text-decoration: none;
 66 |     display: flex;
 67 |     justify-content: center;
 68 |     align-items: center;
 69 |     transition: all 0.2s;
 70 |     width: 100%;
 71 |     text-transform: uppercase;
 72 |     font-family: 'Roboto', sans-serif;
 73 | }
 74 | 
 75 | .card-btn-fire {
 76 |     border: 2px solid var(--primary-fire-color);
 77 |     color: var(--primary-fire-color);
 78 | }
 79 | 
 80 | .card-btn-grass {
 81 |     border: 2px solid var(--primary-grass-color);
 82 |     color: var(--primary-grass-color);
 83 | }
 84 | 
 85 | .card-btn-fire:hover {
 86 |     background: var(--primary-fire-color);
 87 |     color: white;
 88 | }
 89 | 
 90 | .card-btn-grass:hover {
 91 |     background: var(--primary-grass-color);
 92 |     color: white;
 93 | }
 94 | 
 95 | .card figure .card_pokemon-image {
 96 |     width: 70%;
 97 |     height: 50%;
 98 |     z-index: 1;
 99 | }
100 | 
101 | .card figure figcaption {
102 |     display: flex;
103 |     justify-content: center;
104 |     align-items: center;
105 |     flex-direction: column;
106 |     width: 90%;
107 | }
108 | 
109 | .card .card_pokemon-name {
110 |     margin-top: 8px;
111 |     margin-bottom: 8px;
112 |     font-size: 1.3em;
113 |     color: #696969;
114 |     font-family: 'Roboto', sans-serif;
115 | }
116 | 
117 | .card .card_pokemon-price-wrapper {
118 |     display: flex;
119 |     justify-content: center;
120 |     align-items: center;
121 | }
122 | 
123 | .card .card_pokemon-price {
124 |     color: #a64b54;
125 |     font-family: 'Press Start 2P', cursive;
126 |     font-size: 14px;
127 | }
128 | 
129 | @media only screen and (max-width: 700px) {
130 | 
131 | 
132 |     .card-btn-fire {
133 |         color: #fff; 
134 |         background: var(--primary-fire-color) ;
135 |     }
136 | 
137 |     .card-btn-grass {
138 |         color: #fff; 
139 |         background: var(--primary-grass-color) ;
140 |     }
141 | 
142 |     .card-grass,
143 |     .card-grass:hover{
144 |         transform: scale(1);
145 |         box-shadow: 0px 0px 4px 0px var(--primary-grass-color);
146 |     }
147 | 
148 |     .card-fire,
149 |     .card-fire:hover{
150 |         transform: scale(1);
151 |         box-shadow: 0px 0px 4px 0px var(--primary-fire-color);
152 |     }
153 |     
154 | }


--------------------------------------------------------------------------------
/src/components/Cart/index.js:
--------------------------------------------------------------------------------
  1 | import React, {useState} from 'react';
  2 | import Modal from '@material-ui/core/Modal';
  3 | import Backdrop from '@material-ui/core/Backdrop';
  4 | import Fade from '@material-ui/core/Fade';
  5 | 
  6 | import {FaCheck} from 'react-icons/fa'
  7 | 
  8 | import ItemCart from '../ItemCart'
  9 | import './styles.css'
 10 | 
 11 | const Cart = ({pokemonSelected, type, resetCart, filterUpdate}) => {
 12 | 
 13 |     let [active, changeActive ] = useState(false)
 14 | 
 15 |     const updateActive = (active) => {
 16 |         if(window.matchMedia('(max-width: 600px)').matches) {
 17 |             changeActive(!active)
 18 |         }
 19 |     }
 20 | 
 21 |     const handleOpen = () => {
 22 |         filterUpdate("") 
 23 |         resetCart()
 24 |         setOpen(true);
 25 |     };
 26 | 
 27 |     const handleClose = () => {
 28 |     setOpen(false);
 29 |     };
 30 | 
 31 |     const [open, setOpen] = useState(false);
 32 | 
 33 |     return (
 34 |         <div className={`cart ${active ? "active-cart" : ''}`} onClick={() => updateActive(active)}>
 35 |             <div className=" cart-header">
 36 |                 <h1>Carrinho</h1>
 37 |             </div>
 38 |             <div className="cart-body">
 39 |                 {pokemonSelected.map((pokemon) => (
 40 |                     
 41 |                     <ItemCart 
 42 |                         pokemon={pokemon}
 43 |                     />
 44 |                 ))}        
 45 |             </div>    
 46 |             <div className="cart-footer">
 47 |                 <div className="item_total-price">
 48 |                     <div className="amount-items">
 49 |                         <span className="card_pokemon-price">{pokemonSelected.reduce((totalPrice, pokemon) => {
 50 |                             return totalPrice + pokemon.amount
 51 |                         },0)} Pokemon</span> 
 52 |                     </div>
 53 |                     <div className="total-price">
 54 |                         <p>Total: </p>
 55 |                         <div className="price">
 56 |                             <img className="pokemon-price-image" alt="image of pokecoin" src={"/img/pokecoin.png"} />
 57 |                             <span className="card_pokemon-price">{pokemonSelected.reduce((totalPrice, pokemon) => {
 58 |                                 return totalPrice + Number(pokemon.price * pokemon.amount)
 59 |                             },0)}</span>
 60 |                         </div>
 61 |                     </div>
 62 |                 </div> 
 63 |                     
 64 |                 <button className={`item_cart-button btn-cart-${type}`} href="#" onClick={handleOpen}>Finalizar</button>
 65 |             </div>
 66 | 
 67 |             <Modal
 68 |                 aria-labelledby="transition-modal-title"
 69 |                 aria-describedby="transition-modal-description"
 70 |                 className="modal"
 71 |                 open={open}
 72 |                 onClose={handleClose}
 73 |                 closeAfterTransition
 74 |                 BackdropComponent={Backdrop}
 75 |                 BackdropProps={{
 76 |                 timeout: 500,
 77 |                 }}
 78 |             >
 79 |                 <Fade in={open}>
 80 |                 <div className={`card-modal card-modal-${type}`}>
 81 |                     <div className={`box-modal box-modal-${type}`}>
 82 |                         <FaCheck />
 83 |                         <h1 id="transition-modal-title">Obrigado!!!</h1>
 84 |                         <p id="transition-modal-description">Você recebeu de volta</p>
 85 |                         <span>
 86 |                             <img className="pokemon-price-image" alt="image of pokecoin" src={"/img/pokecoin.png"} />
 87 | 
 88 |                             {Number(Math.random() * 1000).toFixed(0)}
 89 |                         </span>
 90 |                     </div>
 91 |                 </div>
 92 |                 </Fade>
 93 |             </Modal>
 94 | 
 95 |         </div>
 96 |         
 97 |     )
 98 | };
 99 | 
100 | export default Cart;


--------------------------------------------------------------------------------
/src/components/Cart/styles.css:
--------------------------------------------------------------------------------
  1 |  .cart {
  2 |     color: var(--dark-color);
  3 |     width: 15em;
  4 |     max-height: 22em;
  5 |     background-color: white;
  6 |     display: flex;
  7 |     align-items: center;
  8 |     flex-direction: column;
  9 |     font-size: 1.5em;
 10 |     border: 2px solid #ddd;
 11 | }
 12 | 
 13 | .cart-wrapper {
 14 |     display: none;
 15 | }
 16 | 
 17 | .store .active-cart{
 18 |     height: 450px;
 19 | }
 20 | 
 21 | @media only screen and (max-width: 700px) {
 22 |     .cart {
 23 |         align-items: center;
 24 |         flex-direction: column;
 25 |         border: 2px solid #ddd;
 26 |         margin-bottom: 40px;
 27 |         overflow: hidden;
 28 |         height: 80px;
 29 |     }
 30 | 
 31 |     .cart-body{
 32 |         min-height: 100px;
 33 |     }
 34 |     
 35 | }
 36 | 
 37 | .cart-wrapper {
 38 |     position: relative;
 39 |     z-index: 2;
 40 | }
 41 | 
 42 | .cart-header {
 43 |     width: 100%;
 44 |     display: flex;
 45 |     justify-content: center;
 46 |     align-items: center;
 47 |     box-shadow: 1px 1px 5px #ccccccd9;
 48 |     margin-bottom: 4px;
 49 | }
 50 | 
 51 | .cart-header h1 {
 52 |     padding: 20px 8px;
 53 |     font-size: 32px;
 54 | }
 55 | 
 56 | .cart-body {
 57 |     width: 100%;
 58 |     max-height: 400px;
 59 |     overflow: auto;
 60 |     padding: 8px;
 61 | }
 62 | 
 63 | .cart-footer {
 64 |     width: 100%;
 65 |     display: inherit;
 66 |     flex-direction: column;
 67 |     margin-top: auto;
 68 |     padding: 8px;
 69 | }
 70 | 
 71 | .total-price {
 72 |     margin: 9px 0;
 73 |     display: flex;
 74 |     align-items: center;
 75 |     justify-content: space-between;
 76 | }
 77 | 
 78 | .total-price p {
 79 |     font-weight: 700;
 80 | }
 81 | 
 82 | .item_total-price {
 83 |     font-size: 18px;
 84 |     padding: 20px 0;
 85 |     border-top: 1px solid #ccc;
 86 |     border-bottom: 1px solid #ccc;
 87 |     margin-bottom: 8px;
 88 |     display: flex;
 89 |     justify-content: space-between;
 90 |     flex-direction: column;
 91 | }
 92 | 
 93 | .item_cart-button {
 94 |     width: 50%;
 95 |     padding: 8px;
 96 |     border: 1px solid #ccc;
 97 |     border-radius: 4px;
 98 |     margin: 20px auto;
 99 |     color: ghostwhite;
100 |     font-weight: 700;
101 |     font-size: 16px;
102 |     cursor: pointer;
103 | }
104 | 
105 | .btn-cart-fire {
106 |     background-color: var(--primary-fire-color);
107 | }
108 | 
109 | .btn-cart-grass {
110 |     background-color: var(--primary-grass-color);
111 | }
112 | 
113 | .btn-cart-grass:hover {
114 |     background-color: #459674;
115 | }
116 | 
117 | .btn-cart-fire:hover {
118 |     background-color: #d83f3f
119 | }
120 | 
121 | .modal {
122 |     display: flex;
123 |     align-items: center;
124 |     justify-content: center;
125 | }
126 | 
127 | .card-modal {
128 |     width: 30%;
129 |     height: 35%;
130 |     display: flex;
131 |     justify-content: center;
132 |     align-items: center;
133 |     flex-direction: column;
134 |     padding: 2px 4px 3px;
135 |     border-radius: 8px;
136 | }
137 | 
138 | @media only screen and (max-width: 760px) {
139 |     .card-modal {
140 |         width: 80%;
141 |         font-size: 1em;
142 |     }
143 | }
144 | 
145 | .card-modal-grass {
146 |     background-color: var(--primary-grass-color);
147 |     border: 2px solid green;
148 |     box-shadow: 0px 0px 8px 3px var(--dark-color);
149 | }
150 | 
151 | .card-modal-fire {
152 |     background-color: var(--primary-fire-color);
153 |     border: 2px solid #c33535;
154 |     box-shadow: 0px 0px 8px 3px var(--dark-color);
155 | }
156 | 
157 | .box-modal {
158 |     width: 85%;
159 |     height: 80%;
160 |     display: flex;
161 |     justify-content: center;
162 |     align-items: center;
163 |     flex-direction: column;
164 |     border-radius: 4px;
165 | }
166 | 
167 | .box-modal svg {
168 |     font-size: 2em;
169 | }
170 | 
171 | .box-modal-grass {
172 |     background: var(--secondary-grass-color);
173 | }
174 | 
175 | .box-modal-fire {
176 | 
177 |     background: var(--secondary-fire-color);
178 | }
179 | 
180 | .card-modal h1 {
181 |     font-size: 2.5em;
182 | }
183 | 
184 | .card-modal p {
185 |     font-size: 1.3em;
186 |     padding: 8px;
187 |     font-weight: 400;
188 | }
189 | 
190 | .card-modal span {
191 |     display: flex;
192 |     justify-content: center;
193 |     align-items: center;
194 | }
195 | 
196 | 
197 | 


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