diff --git a/my-pokedex/public/index.html b/my-pokedex/public/index.html
index aa069f27cbd9d53394428171c3989fd03db73c76..84ee155c02e4388823ec1cc6422d6f16f1ad75b2 100644
--- a/my-pokedex/public/index.html
+++ b/my-pokedex/public/index.html
@@ -2,14 +2,15 @@
<html lang="en">
<head>
<meta charset="utf-8" />
- <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
- name="description"
- content="Web site created using create-react-app"
+ name="PokeDex"
+ content="An WPA for getting basic pokemon data"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+ <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
+ <link rel="stylesheet" type="text/css" href="css/custom.css">
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/my-pokedex/src/App.js b/my-pokedex/src/App.js
index 2f29c01f5c692a30e8d534a07cbb7d2060b130ed..67e7b131115968e4dd414da22bbea01335514c2b 100644
--- a/my-pokedex/src/App.js
+++ b/my-pokedex/src/App.js
@@ -1,11 +1,11 @@
import Dex from './features/dex';
+
import './App.css';
function App() {
return (
<div className="App">
-
- <Dex/>
+ <Dex/>
</div>
);
}
diff --git "a/my-pokedex/src/features/Pok\303\251_Ball_icon.svg.png" "b/my-pokedex/src/features/Pok\303\251_Ball_icon.svg.png"
new file mode 100644
index 0000000000000000000000000000000000000000..7518c4353ad6c864caf7177c0a65df88fa748bd3
Binary files /dev/null and "b/my-pokedex/src/features/Pok\303\251_Ball_icon.svg.png" differ
diff --git a/my-pokedex/src/features/custom.css b/my-pokedex/src/features/custom.css
new file mode 100644
index 0000000000000000000000000000000000000000..1d7f43dbda74fde060299ef2a9cf4fab104249a3
--- /dev/null
+++ b/my-pokedex/src/features/custom.css
@@ -0,0 +1,30 @@
+.card{
+ border-radius: 0;
+
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.card-title {
+
+ opacity: 0.9 !important;
+}
+.nav-link {
+ color: red !important;
+}
+.nav-link:focus {
+ color: white !important;
+}
+.navbar-brand {
+ color: white !important;
+ text-align: left;
+
+}
+/* .navbar-brand > img {
+ max-height: 100%;
+ height: 100%;
+ -o-object-fit: contain;
+ object-fit: contain;
+
+} */
+
diff --git a/my-pokedex/src/features/dex.js b/my-pokedex/src/features/dex.js
index 39352131a4572c4fa2c5bdadea79bec88e1b053e..865c0cf648b9586903b3b06a201975cdf5cc0ed6 100644
--- a/my-pokedex/src/features/dex.js
+++ b/my-pokedex/src/features/dex.js
@@ -1,8 +1,11 @@
import React, { useState, useEffect } from "react";
-import styles from './dexstyle.css';
-import Card from 'react-bootstrap/Card'
-import ProgressBar from 'react-bootstrap/ProgressBar'
+import styles from './dex.module.css';
+import './custom.css';
+import Card from 'react-bootstrap/Card';
+import ProgressBar from 'react-bootstrap/ProgressBar';
+import PokeNavBar from './pokenavbar.js';
+
function Pokemon(name, typing, moves, abilities, stats, artwork) {
@@ -21,6 +24,7 @@ export default function Dex() {
const [listofpokemon, setlistofpokemon] = useState([]);
const [disable, setDisable] = useState(false);
+
const COLORS = {
normal: 'cornsilk',
grass: 'green',
@@ -41,17 +45,17 @@ export default function Dex() {
dragon: 'royalblue',
fairy: 'thistle'
}
+
function getTyping(types){
if( types.length === 1) {
return COLORS[types[0].type.name];
- }else {
- return 'linear-gradient(to left,'+types.map(type=> COLORS[type.type.name]).join()+')';
+ }else { // .join() reverses when mapping types. but .reverse() fixes it
+ return 'linear-gradient(to left,'+types.map( (type) => COLORS[type['type'].name]).reverse().join()+')';
}
}
function statLevel(stat) {
-
- if( stat > 120) {
+ if( stat > 120) { // think of switching order since there are lower stats normally
return 'info';
}else if( stat > 90) {
return 'success';
@@ -60,31 +64,37 @@ export default function Dex() {
}else {
return 'danger';
}
+ }
+
+
+
- }
- // useEffect ( () => {
- // pokemonFetcher();
- // }, []);
+
async function pokemonFetchHelper(url) {
let result = await fetch(url);
let json = await result.json();
- console.log(json);
+ // console.log(json);
return json;
}
async function pokemonFetcher(){
- for(let currentPokemon = 1; currentPokemon < 156; currentPokemon++) {
+ for(let currentPokemon = 1; currentPokemon < 152; currentPokemon++) {
let responseURL = `https://pokeapi.co/api/v2/pokemon/${currentPokemon}/`;
let currentResponse = await pokemonFetchHelper(responseURL);
- setlistofpokemon(listofpokemon => [...listofpokemon, currentResponse]);
+ setlistofpokemon(listofpokemon => {
+ return [...listofpokemon, currentResponse];
+ });
}
}
return (
<main>
+ <div>
+ <PokeNavBar/>
+ </div>
<div>
<label>Pokedex</label>
</div>
@@ -92,56 +102,51 @@ export default function Dex() {
<button disabled={disable} onClick={() => {pokemonFetcher(); setDisable(true);}}>fetch pokemon</button>
</div>
<div>
- <ul>
+ <ul className={styles.pokemonlist}>
{ listofpokemon.length > 0 ?
+
listofpokemon.map((pokemon) => (
<li key={pokemon.id}>
<Card style={{ width: '18rem' }}
>
<Card.Header>{pokemon.name}</Card.Header>
- <Card.Img variant="top" src={pokemon.sprites.front_default} />
+ <Card.Img variant="top" src={pokemon.sprites.other['official-artwork'].front_default} />
<Card.Body>
- <Card.Title style={{background: getTyping(pokemon.types)}}>
+ <Card.Title style={{background: getTyping(pokemon.types) }}>
{ pokemon.types.length > 1 ?
`${pokemon.types[0].type.name} ${pokemon.types[1].type.name}`
: `${pokemon.types[0].type.name}`
}
</Card.Title>
<Card.Text>
- { `health points:` }
+
+
+ </Card.Text>
+ { `Health Points:` }
<ProgressBar variant={statLevel(pokemon.stats[0].base_stat)}
now={pokemon.stats[0].base_stat} max={255} label={`${pokemon.stats[0].base_stat}`}/> <br/>
- {`attack:`}
+ {`Attack:`}
<ProgressBar variant={statLevel(pokemon.stats[1].base_stat)}
- now={pokemon.stats[1].base_stat} max={190} label={`${pokemon.stats[1].base_stat}`}/> <br/>
- {` defense:`}
+ now={pokemon.stats[1].base_stat} max={255} label={`${pokemon.stats[1].base_stat}`}/> <br/>
+ {`Defense:`}
<ProgressBar variant={statLevel(pokemon.stats[2].base_stat)}
- now={pokemon.stats[2].base_stat} max={230} label={`${pokemon.stats[2].base_stat}`}/> <br/>
- { `special-attack:`}
+ now={pokemon.stats[2].base_stat} max={255} label={`${pokemon.stats[2].base_stat}`}/> <br/>
+ { `Special-Attack:`}
<ProgressBar variant={statLevel(pokemon.stats[3].base_stat)}
- now={pokemon.stats[3].base_stat} max={194} label={`${pokemon.stats[3].base_stat}`}/> <br/>
- { `special-defense:`}
+ now={pokemon.stats[3].base_stat} max={255} label={`${pokemon.stats[3].base_stat}`}/> <br/>
+ { `Special-Defense:`}
<ProgressBar variant={statLevel(pokemon.stats[4].base_stat)}
- now={pokemon.stats[4].base_stat} max={230} label={`${pokemon.stats[4].base_stat}`}/> <br/>
- {`speed:`}
+ now={pokemon.stats[4].base_stat} max={255} label={`${pokemon.stats[4].base_stat}`}/> <br/>
+ {`Speed:`}
<ProgressBar variant={statLevel(pokemon.stats[5].base_stat)}
- now={pokemon.stats[5].base_stat} max={180} label={`${pokemon.stats[5].base_stat}`}/> <br/>
-
- </Card.Text>
-
+ now={pokemon.stats[5].base_stat} max={255} label={`${pokemon.stats[5].base_stat}`}/> <br/>
</Card.Body>
-
</Card>
-
</li>
-
))
: null}
</ul>
-
</div>
</main>
);
-}
-
-
+}
\ No newline at end of file
diff --git a/my-pokedex/src/features/dex.module.css b/my-pokedex/src/features/dex.module.css
new file mode 100644
index 0000000000000000000000000000000000000000..cada27ea266bd34957ac6793e78773068e8a16e6
--- /dev/null
+++ b/my-pokedex/src/features/dex.module.css
@@ -0,0 +1,18 @@
+
+.pokemonlist {
+ list-style: none;
+ padding-left: 0px;
+}
+.logoimg {
+ float: left;
+ height: 10%;
+ width: 10%;
+ object-fit: contain;
+ }
+ /* .cat {
+ height:300px;
+ width: 300px;
+ } */
+/* li::before {content: counter(li); color: red;
+ display: inline-block; width: 1em;
+ margin-left: -1em} counter-reset: li*/
diff --git a/my-pokedex/src/features/dexstyle.css b/my-pokedex/src/features/dexstyle.css
deleted file mode 100644
index 22d668041b5c483575ffd428ca25639cf2381a71..0000000000000000000000000000000000000000
--- a/my-pokedex/src/features/dexstyle.css
+++ /dev/null
@@ -1,4 +0,0 @@
-.cardtitle {
- background: linear-gradient(to left, cornsilk 50%, #0000ff 50%);
-}
-
diff --git a/my-pokedex/src/features/pokenavbar.js b/my-pokedex/src/features/pokenavbar.js
new file mode 100644
index 0000000000000000000000000000000000000000..0154bf9a3d5b99939b5922dca089a01d7eda3a10
--- /dev/null
+++ b/my-pokedex/src/features/pokenavbar.js
@@ -0,0 +1,39 @@
+import React, {useEffect} from "react";
+import { Navbar, Nav, NavItem, NavDropdown, MenuItem, Container } from 'react-bootstrap';
+// public/Poké_Ball_icon.svg.png
+// import './custom.css';
+import styles from './dex.module.css';
+import logo from './Poké_Ball_icon.svg.png';
+
+export default function PokeNavBar(props) {
+
+
+ return (
+ <div>
+ <Navbar bg="dark">
+ <Container>
+ <Navbar.Brand href="#home">
+ <img className={styles.logoimg} src={logo} alt="" />
+ </Navbar.Brand>
+ <Navbar.Toggle aria-controls="basic-navbar-nav" />
+ <Navbar.Collapse id="basic-navbar-nav">
+ <Nav className="me-auto">
+ <Nav.Link href="#home">Home</Nav.Link>
+ <Nav.Link href="#link">Link</Nav.Link>
+ <NavDropdown title="Dropdown" id="basic-nav-dropdown">
+ <NavDropdown.Item href="#action/genone">Gen I</NavDropdown.Item>
+ <NavDropdown.Item href="#action/gentwo">Gen II</NavDropdown.Item>
+ <NavDropdown.Item href="#action/genthree">Gen III</NavDropdown.Item>
+ <NavDropdown.Item href="#action/genfour">Gen IV</NavDropdown.Item>
+ <NavDropdown.Item href="#action/genfive">Gen V</NavDropdown.Item>
+ <NavDropdown.Item href="#action/gensix">Gen VI</NavDropdown.Item>
+ <NavDropdown.Item href="#action/genseven">Gen VII</NavDropdown.Item>
+ <NavDropdown.Item href="#action/geneight">Gen VIII</NavDropdown.Item>
+ </NavDropdown>
+ </Nav>
+ </Navbar.Collapse>
+ </Container>
+ </Navbar>
+ </div>
+ );
+}
\ No newline at end of file