diff --git a/Pokedex/assets/bug.png b/Pokedex/assets/bug.png new file mode 100644 index 00000000..60cb156a Binary files /dev/null and b/Pokedex/assets/bug.png differ diff --git a/Pokedex/assets/bugIcon.png b/Pokedex/assets/bugIcon.png new file mode 100644 index 00000000..a54c519f Binary files /dev/null and b/Pokedex/assets/bugIcon.png differ diff --git a/Pokedex/assets/dark.png b/Pokedex/assets/dark.png new file mode 100644 index 00000000..cc63a80e Binary files /dev/null and b/Pokedex/assets/dark.png differ diff --git a/Pokedex/assets/darkIcon.png b/Pokedex/assets/darkIcon.png new file mode 100644 index 00000000..c7045796 Binary files /dev/null and b/Pokedex/assets/darkIcon.png differ diff --git a/Pokedex/assets/default.png b/Pokedex/assets/default.png new file mode 100644 index 00000000..c7f3fa09 Binary files /dev/null and b/Pokedex/assets/default.png differ diff --git a/Pokedex/assets/dragon.png b/Pokedex/assets/dragon.png new file mode 100644 index 00000000..50ff40d5 Binary files /dev/null and b/Pokedex/assets/dragon.png differ diff --git a/Pokedex/assets/dragonIcon.png b/Pokedex/assets/dragonIcon.png new file mode 100644 index 00000000..1ee363f4 Binary files /dev/null and b/Pokedex/assets/dragonIcon.png differ diff --git a/Pokedex/assets/electric.png b/Pokedex/assets/electric.png new file mode 100644 index 00000000..1c3293cb Binary files /dev/null and b/Pokedex/assets/electric.png differ diff --git a/Pokedex/assets/electricIcon.png b/Pokedex/assets/electricIcon.png new file mode 100644 index 00000000..d21b7be0 Binary files /dev/null and b/Pokedex/assets/electricIcon.png differ diff --git a/Pokedex/assets/fairy.png b/Pokedex/assets/fairy.png new file mode 100644 index 00000000..9960bffd Binary files /dev/null and b/Pokedex/assets/fairy.png differ diff --git a/Pokedex/assets/fairyIcon.png b/Pokedex/assets/fairyIcon.png new file mode 100644 index 00000000..7a419915 Binary files /dev/null and b/Pokedex/assets/fairyIcon.png differ diff --git a/Pokedex/assets/fighting.png b/Pokedex/assets/fighting.png new file mode 100644 index 00000000..1c230d9a Binary files /dev/null and b/Pokedex/assets/fighting.png differ diff --git a/Pokedex/assets/fightingIcon.png b/Pokedex/assets/fightingIcon.png new file mode 100644 index 00000000..718a8c61 Binary files /dev/null and b/Pokedex/assets/fightingIcon.png differ diff --git a/Pokedex/assets/fire.png b/Pokedex/assets/fire.png new file mode 100644 index 00000000..ae668f79 Binary files /dev/null and b/Pokedex/assets/fire.png differ diff --git a/Pokedex/assets/fireIcon.png b/Pokedex/assets/fireIcon.png new file mode 100644 index 00000000..bf56ae60 Binary files /dev/null and b/Pokedex/assets/fireIcon.png differ diff --git a/Pokedex/assets/flying.png b/Pokedex/assets/flying.png new file mode 100644 index 00000000..ff9ea2dd Binary files /dev/null and b/Pokedex/assets/flying.png differ diff --git a/Pokedex/assets/flyingIcon.png b/Pokedex/assets/flyingIcon.png new file mode 100644 index 00000000..ee0c5013 Binary files /dev/null and b/Pokedex/assets/flyingIcon.png differ diff --git a/Pokedex/assets/ghost.png b/Pokedex/assets/ghost.png new file mode 100644 index 00000000..0956323e Binary files /dev/null and b/Pokedex/assets/ghost.png differ diff --git a/Pokedex/assets/ghostIcon.png b/Pokedex/assets/ghostIcon.png new file mode 100644 index 00000000..897dbdd7 Binary files /dev/null and b/Pokedex/assets/ghostIcon.png differ diff --git a/Pokedex/assets/grass.png b/Pokedex/assets/grass.png new file mode 100644 index 00000000..b0de2d73 Binary files /dev/null and b/Pokedex/assets/grass.png differ diff --git a/Pokedex/assets/grassIcon.png b/Pokedex/assets/grassIcon.png new file mode 100644 index 00000000..cdeb5680 Binary files /dev/null and b/Pokedex/assets/grassIcon.png differ diff --git a/Pokedex/assets/ground.png b/Pokedex/assets/ground.png new file mode 100644 index 00000000..490abee9 Binary files /dev/null and b/Pokedex/assets/ground.png differ diff --git a/Pokedex/assets/groundIcon.png b/Pokedex/assets/groundIcon.png new file mode 100644 index 00000000..88726f8f Binary files /dev/null and b/Pokedex/assets/groundIcon.png differ diff --git a/Pokedex/assets/ice.png b/Pokedex/assets/ice.png new file mode 100644 index 00000000..2f92d4c0 Binary files /dev/null and b/Pokedex/assets/ice.png differ diff --git a/Pokedex/assets/iceIcon.png b/Pokedex/assets/iceIcon.png new file mode 100644 index 00000000..be8d55a6 Binary files /dev/null and b/Pokedex/assets/iceIcon.png differ diff --git a/Pokedex/assets/normal.png b/Pokedex/assets/normal.png new file mode 100644 index 00000000..20d7b9fd Binary files /dev/null and b/Pokedex/assets/normal.png differ diff --git a/Pokedex/assets/normalIcon.png b/Pokedex/assets/normalIcon.png new file mode 100644 index 00000000..6f8f181c Binary files /dev/null and b/Pokedex/assets/normalIcon.png differ diff --git a/Pokedex/assets/poison.png b/Pokedex/assets/poison.png new file mode 100644 index 00000000..a1018954 Binary files /dev/null and b/Pokedex/assets/poison.png differ diff --git a/Pokedex/assets/poisonIcon.png b/Pokedex/assets/poisonIcon.png new file mode 100644 index 00000000..5aa732c5 Binary files /dev/null and b/Pokedex/assets/poisonIcon.png differ diff --git a/Pokedex/assets/psychic.png b/Pokedex/assets/psychic.png new file mode 100644 index 00000000..70c763e8 Binary files /dev/null and b/Pokedex/assets/psychic.png differ diff --git a/Pokedex/assets/psychicIcon.png b/Pokedex/assets/psychicIcon.png new file mode 100644 index 00000000..9ab0c0ef Binary files /dev/null and b/Pokedex/assets/psychicIcon.png differ diff --git a/Pokedex/assets/rock.png b/Pokedex/assets/rock.png new file mode 100644 index 00000000..2acace67 Binary files /dev/null and b/Pokedex/assets/rock.png differ diff --git a/Pokedex/assets/rockIcon.png b/Pokedex/assets/rockIcon.png new file mode 100644 index 00000000..2eb2b712 Binary files /dev/null and b/Pokedex/assets/rockIcon.png differ diff --git a/Pokedex/assets/steel.png b/Pokedex/assets/steel.png new file mode 100644 index 00000000..8b89abd3 Binary files /dev/null and b/Pokedex/assets/steel.png differ diff --git a/Pokedex/assets/steelIcon.png b/Pokedex/assets/steelIcon.png new file mode 100644 index 00000000..10936336 Binary files /dev/null and b/Pokedex/assets/steelIcon.png differ diff --git a/Pokedex/assets/water.png b/Pokedex/assets/water.png new file mode 100644 index 00000000..03ada057 Binary files /dev/null and b/Pokedex/assets/water.png differ diff --git a/Pokedex/assets/waterIcon.png b/Pokedex/assets/waterIcon.png new file mode 100644 index 00000000..5801f58e Binary files /dev/null and b/Pokedex/assets/waterIcon.png differ diff --git a/Pokedex/favicon.ico b/Pokedex/favicon.ico new file mode 100644 index 00000000..a1594ace Binary files /dev/null and b/Pokedex/favicon.ico differ diff --git a/Pokedex/index.html b/Pokedex/index.html new file mode 100644 index 00000000..ba366f8d --- /dev/null +++ b/Pokedex/index.html @@ -0,0 +1,48 @@ + + + + Pokedex + + + + + +
+
+

Type the pokemon name or number

+
+ + +
+
+
+

+ +
+ + +
+
+
+
Name:
+
HP:
+
Attack:
+
Defense:
+
Sp.Attack:
+
Sp.Defense:
+
Speed:
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + \ No newline at end of file diff --git a/Pokedex/index.js b/Pokedex/index.js new file mode 100644 index 00000000..6bd695b0 --- /dev/null +++ b/Pokedex/index.js @@ -0,0 +1,79 @@ +async function load(){ + var pokemon = document.getElementById("input").value.toLowerCase(); + const resp = await fetch("https://pokeapi.co/api/v2/pokemon/" + pokemon); + const json = await resp.json(); + + document.querySelector('#image').src = json.sprites.front_default; + document.querySelector('#type1').src = './assets/' + json.types[0].type.name + '.png'; + document.querySelector('#type2').src = json.types.length > 1 ? + './assets/' + json.types[1].type.name + '.png' : './assets/default.png'; + document.querySelector('#id').innerHTML = 'Nº ' + json.id; + + document.querySelector('#name').innerHTML = json.name[0].toUpperCase() + json.name.slice(1); + document.querySelector('#hp').innerHTML = json.stats[0].base_stat; + document.querySelector('#at').innerHTML = json.stats[1].base_stat; + document.querySelector('#df').innerHTML = json.stats[2].base_stat; + document.querySelector('#spat').innerHTML = json.stats[3].base_stat; + document.querySelector('#spdf').innerHTML = json.stats[4].base_stat; + document.querySelector('#speed').innerHTML = json.stats[5].base_stat; + + document.querySelector('#card').style.color = "black"; + switch (json.types[0].type.name){ + case 'water': + document.querySelector('#card').style.backgroundColor = "blue"; + break; + case 'grass': + document.querySelector('#card').style.backgroundColor = "green"; + break; + case 'fire': + document.querySelector('#card').style.backgroundColor = "#fe5e52"; + break; + case 'poison': + document.querySelector('#card').style.backgroundColor = "purple"; + break; + case 'electric': + document.querySelector('#card').style.backgroundColor = "yellow"; + break; + case 'normal': + document.querySelector('#card').style.backgroundColor = "#e8a27f"; + break; + case 'fighting': + document.querySelector('#card').style.backgroundColor = "orange"; + break; + case 'flying': + document.querySelector('#card').style.backgroundColor = "#73c7ca"; + break; + case 'ground': + document.querySelector('#card').style.backgroundColor = "#dc723f"; + break; + case 'rock': + document.querySelector('#card').style.backgroundColor = "#90411b"; + break; + case 'bug': + document.querySelector('#card').style.backgroundColor = "#bff01d"; + break; + case 'dragon': + document.querySelector('#card').style.backgroundColor = "#6a21c6"; + break; + case 'dark': + document.querySelector('#card').style.backgroundColor = "black"; + document.querySelector('#card').style.color = "white"; + break; + case 'ghost': + document.querySelector('#card').style.backgroundColor = "#3e1170"; + document.querySelector('#card').style.color = "white"; + break; + case 'fairy': + document.querySelector('#card').style.backgroundColor = "#e591e9"; + break; + case 'ice': + document.querySelector('#card').style.backgroundColor = "#49c5ef"; + break; + case 'psychic': + document.querySelector('#card').style.backgroundColor = "#e93ac7"; + break; + case 'steel': + document.querySelector('#card').style.backgroundColor = "#979798"; + break; + } +} \ No newline at end of file diff --git a/Pokedex/style.css b/Pokedex/style.css new file mode 100644 index 00000000..25476f8b --- /dev/null +++ b/Pokedex/style.css @@ -0,0 +1,98 @@ +body{ + background-color: rgb(31, 31, 31); +} + +h2{ + text-align: center; + margin-bottom: .4em; +} + +#flexbox { + display:flex; + height: 100%; + justify-content:center; + align-items: center; +} + +#card { + background-color:yellow; + border: solid; + padding: 1em; + border-radius: 5px; + width: 50%; + min-height: 80%; +} + +#form { + display: flex; + justify-content: space-around; + margin-bottom: .4em; +} + +#image{ + display:block; + margin: auto auto; + width: 100%; + height: auto; +} + +input { + width: 75%; +} + +button { + width: 20%; + background-color: inherit; + border-radius: 5px; + border: solid 2px; + color: inherit; +} + +button:hover { + background-color: rgb(238, 100, 20); +} + + +button:active { + background-color: rgb(238, 27, 20); +} + + +div { + padding:0.4em; +} + +#id { + font-weight: bold; + font-size: 2em; + margin-top: 0; +} + +#types { + display: flex; + justify-content: space-between; + width: 100%; +} + +.type { + width: 50%; + margin-right: 1em; +} + +#conteiner{ + display: flex; + justify-content: space-evenly; +} + +#images{ + width: 45%; +} + +.stats{ + display: flex; + flex-direction: column; + justify-content: space-between; + font-weight: bold; + font-size: 1.8em; + width: 22%; +} \ No newline at end of file