Skip to content
Snippets Groups Projects
Commit d72a7e9b authored by mthomas41's avatar mthomas41
Browse files

added a nav bar

parent b8c4d49e
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 136 additions and 47 deletions
my-pokedex/public/index.html
+ 4
− 3
View file @ d72a7e9b
......@@ -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/
......
my-pokedex/src/App.js
+ 2
− 2
View file @ d72a7e9b
import Dex from './features/dex';
import './App.css';
function App() {
return (
<div className="App">
<Dex/>
</div>
);
......
my-pokedex/src/features/Poké_Ball_icon.svg.png 0 → 100644
+ 0
− 0
View file @ d72a7e9b
my-pokedex/src/features/Poké_Ball_icon.svg.png

114 KiB

my-pokedex/src/features/custom.css 0 → 100644
+ 30
− 0
View file @ d72a7e9b
.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;
} */
my-pokedex/src/features/dex.js
+ 43
− 38
View file @ d72a7e9b
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,14 +102,15 @@ 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) }}>
{ pokemon.types.length > 1 ?
......@@ -108,40 +119,34 @@ export default function Dex() {
}
</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
my-pokedex/src/features/dex.module.css 0 → 100644
+ 18
− 0
View file @ d72a7e9b
.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*/
my-pokedex/src/features/dexstyle.css deleted 100644 → 0
+ 0
− 4
View file @ b8c4d49e
.cardtitle {
background: linear-gradient(to left, cornsilk 50%, #0000ff 50%);
}
my-pokedex/src/features/pokenavbar.js 0 → 100644
+ 39
− 0
View file @ d72a7e9b
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
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment