diff --git a/data.js b/data.js new file mode 100644 index 0000000..617875a --- /dev/null +++ b/data.js @@ -0,0 +1,142 @@ +const data = [ + { + name: 'Bulbasaur', + height: '7', + weight: '69', + types: ['grass', 'poison'], + 'base-Experience': '64', + abilities: ['overgrow', 'chlorophyll'], + hp: '45', + attack: '49', + defense: '49', + 'special-attack': '65', + 'special-defense': '65', + speed: '45', + }, + { + name: 'Ivysaur', + height: '10', + weight: '130', + types: ['grass', 'poison'], + 'base-Experience': '142', + abilities: ['overgrow', 'chlorophyll'], + hp: '60', + attack: '62', + defense: '63', + 'special-attack': '80', + 'special-defense': '80', + speed: '60', + }, + { + name: 'Venusaur', + height: '20', + weight: '1000', + types: ['grass', 'poison'], + 'base-Experience': '236', + abilities: ['overgrow', 'chlorophyll'], + hp: '80', + attack: '82', + defense: '83', + 'special-attack': '100', + 'special-defense': '100', + speed: '80', + }, + { + name: 'Charmander', + height: '6', + weight: '85', + types: ['fire'], + 'base-Experience': '62', + abilities: ['blaze', 'solar-power'], + hp: '39', + attack: '52', + defense: '43', + 'special-attack': '60', + 'special-defense': '50', + speed: '65', + }, + { + name: 'Charmeleon', + height: '11', + weight: '190', + types: ['fire'], + 'base-Experience': '142', + abilities: ['blaze', 'solar-power'], + hp: '58', + attack: '64', + defense: '58', + 'special-attack': '80', + 'special-defense': '65', + speed: '80', + }, + { + name: 'Charizard', + height: '17', + weight: '905', + types: ['fire', 'flying'], + 'base-Experience': '240', + abilities: ['blaze', 'solar-power'], + hp: '78', + attack: '84', + defense: '78', + 'special-attack': '109', + 'special-defense': '85', + speed: '100', + }, + { + name: 'Squirtle', + height: '5', + weight: '90', + types: ['water'], + 'base-Experience': '63', + abilities: ['torrent', 'rain-dish'], + hp: '44', + attack: '48', + defense: '65', + 'special-attack': '50', + 'special-defense': '64', + speed: '43', + }, + { + name: 'Wartortle', + height: '10', + weight: '225', + types: ['water'], + 'base-Experience': '142', + abilities: ['torrent', 'rain-dish'], + hp: '59', + attack: '63', + defense: '80', + 'special-attack': '65', + 'special-defense': '80', + speed: '58', + }, + { + name: 'Blastoise', + height: '16', + weight: '855', + types: ['water'], + 'base-Experience': '239', + abilities: ['torrent', 'rain-dish'], + hp: '79', + attack: '83', + defense: '100', + 'special-attack': '85', + 'special-defense': '105', + speed: '78', + }, + { + name: 'Caterpie', + height: '3', + weight: '29', + types: ['bug'], + 'base-Experience': '39', + abilities: ['shield-dust', 'run-away'], + hp: '45', + attack: '30', + defense: '35', + 'special-attack': '20', + 'special-defense': '20', + speed: '45', + }, + ] \ No newline at end of file diff --git a/index.html b/index.html index 99232bc..8b07133 100644 --- a/index.html +++ b/index.html @@ -15,116 +15,9 @@

Pokemon List

-
- - bulbasaur -
-

bulbasaur

-

height: 7 dm

-

weight: 69 hg

-

types: grass, poison

-
- - -
- ivysaur -
-
-

ivysaur

-

height: 10 dm

-

weight: 130 hg

-

types: grass, poison

-
- - -
- venusaur -
-
-

venusaur

-

height: 10 dm

-

weight: 130 hg

-

types: grass, poison

-
- - -
- charmander -
-
-

charmander

-

height: 7 dm

-

weight: 69 hg

-

types: grass, poison

-
- - -
- charmeleon -
-
-

charmeleon

-

height: 7 dm

-

weight: 69 hg

-

types: grass, poison

-
- - -
- charizard -
-
-

charizard

-

height: 7 dm

-

weight: 69 hg

-

types: grass, poison

-
- - -
- squirtle -
-
-

squirtle

-

height: 7 dm

-

weight: 69 hg

-

types: grass, poison

-
- - -
- wartortle -
-
-

wartortle

-

height: 7 dm

-

weight: 69 hg

-

types: grass, poison

-
- - -
- blastoise -
-
-

blastoise

-

height: 7 dm

-

weight: 69 hg

-

types: grass, poison

-
- - -
- caterpie -
-
-

caterpie

-

height: 7 dm

-

weight: 69 hg

-

types: grass, poison

-
- -
+
+ + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..463e2d2 --- /dev/null +++ b/main.js @@ -0,0 +1,14 @@ + for (var i=1;i<=data.length;i++) { + const pokemon = data[i-1]; + var a = document.createElement("a"); + a.className += "card"; + a.href = `./pokemon/index.html?n=${i-1}`; + a.innerHTML = `${pokemon.name} +
+

${pokemon.name}

+

Height: ${pokemon.height}

+

Weight: ${pokemon.weight}

+

Types: ${pokemon.types.join(", ")}

+
`; + document.getElementById("card-wrapper").appendChild(a); + } \ No newline at end of file diff --git a/pokemon/1.html b/pokemon/1.html deleted file mode 100644 index 8564a7c..0000000 --- a/pokemon/1.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - Bulbasaur - Pokemon List - - - - - - - - - - -
-
- bulbasaur -
-

- bulbasaur -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
height7 dm
weight69 hg
typesgrass, poison
base experience64
abilitiesovergrow, chlorophyll
hp45
attack49
defense49
special-attack65
special-defense65
speed45
-
- - - \ No newline at end of file diff --git a/pokemon/10.html b/pokemon/10.html deleted file mode 100644 index 291b081..0000000 --- a/pokemon/10.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - Caterpie - Pokemon List - - - - - - - - - - -
-
- Caterpie -
-

- Caterpie -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
height7 dm
weight69 hg
typesgrass, poison
base experience64
abilitiesovergrow, chlorophyll
hp45
attack49
defense49
special-attack65
special-defense65
speed45
-
- - - \ No newline at end of file diff --git a/pokemon/2.html b/pokemon/2.html deleted file mode 100644 index f940d52..0000000 --- a/pokemon/2.html +++ /dev/null @@ -1,77 +0,0 @@ - - - - - - Ivysaur - Pokemon List - - - - - - - - - - - -
-
- Ivysaur -
- -

Ivysaur

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
height7 dm
weight69 hg
typesgrass, poison
base experience64
abilitiesovergrow, chlorophyll
hp45
attack49
defense49
special-attack65
special-defense65
speed45
-
- - - \ No newline at end of file diff --git a/pokemon/3.html b/pokemon/3.html deleted file mode 100644 index 83681fc..0000000 --- a/pokemon/3.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - Venusar - Pokemon List - - - - - - - - - - -
-
- Venusar -
-

- Venusar -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
height7 dm
weight69 hg
typesgrass, poison
base experience64
abilitiesovergrow, chlorophyll
hp45
attack49
defense49
special-attack65
special-defense65
speed45
-
- - - \ No newline at end of file diff --git a/pokemon/4.html b/pokemon/4.html deleted file mode 100644 index a73a11c..0000000 --- a/pokemon/4.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - Charmander - Pokemon List - - - - - - - - - - -
-
- Charmander -
-

- Charmander -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
height7 dm
weight69 hg
typesgrass, poison
base experience64
abilitiesovergrow, chlorophyll
hp45
attack49
defense49
special-attack65
special-defense65
speed45
-
- - - \ No newline at end of file diff --git a/pokemon/5.html b/pokemon/5.html deleted file mode 100644 index b83fe2f..0000000 --- a/pokemon/5.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - Charmeleon - Pokemon List - - - - - - - - - - -
-
- Charmeleon -
-

- Charmeleon -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
height7 dm
weight69 hg
typesgrass, poison
base experience64
abilitiesovergrow, chlorophyll
hp45
attack49
defense49
special-attack65
special-defense65
speed45
-
- - - \ No newline at end of file diff --git a/pokemon/6.html b/pokemon/6.html deleted file mode 100644 index a7b0bfa..0000000 --- a/pokemon/6.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - Charizard - Pokemon List - - - - - - - - - - -
-
- Charizard -
-

- Charizard -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
height7 dm
weight69 hg
typesgrass, poison
base experience64
abilitiesovergrow, chlorophyll
hp45
attack49
defense49
special-attack65
special-defense65
speed45
-
- - - \ No newline at end of file diff --git a/pokemon/7.html b/pokemon/7.html deleted file mode 100644 index 9346da8..0000000 --- a/pokemon/7.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - Squirtle - Pokemon List - - - - - - - - - - -
-
- Squirtle -
-

- Squirtle -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
height7 dm
weight69 hg
typesgrass, poison
base experience64
abilitiesovergrow, chlorophyll
hp45
attack49
defense49
special-attack65
special-defense65
speed45
-
- - - \ No newline at end of file diff --git a/pokemon/8.html b/pokemon/8.html deleted file mode 100644 index 155381e..0000000 --- a/pokemon/8.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - Wartortle - Pokemon List - - - - - - - - - - -
-
- Wartortle -
-

- Wartortle -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
height7 dm
weight69 hg
typesgrass, poison
base experience64
abilitiesovergrow, chlorophyll
hp45
attack49
defense49
special-attack65
special-defense65
speed45
-
- - - \ No newline at end of file diff --git a/pokemon/9.html b/pokemon/9.html deleted file mode 100644 index 92bf1fd..0000000 --- a/pokemon/9.html +++ /dev/null @@ -1,79 +0,0 @@ - - - - - - - Blastoise - Pokemon List - - - - - - - - - - -
-
- Blastoise -
-

- Blastoise -

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
height7 dm
weight69 hg
typesgrass, poison
base experience64
abilitiesovergrow, chlorophyll
hp45
attack49
defense49
special-attack65
special-defense65
speed45
-
- - - \ No newline at end of file diff --git a/pokemon/index.html b/pokemon/index.html new file mode 100644 index 0000000..4b1567c --- /dev/null +++ b/pokemon/index.html @@ -0,0 +1,27 @@ + + + + + + + Bulbasaur - Pokemon List + + + + + + + + + + +
+
+
+ + + + + \ No newline at end of file diff --git a/pokemon/main.js b/pokemon/main.js new file mode 100644 index 0000000..c84036b --- /dev/null +++ b/pokemon/main.js @@ -0,0 +1,24 @@ +const urlParams = new URL(location.href).searchParams; +const n = parseInt(urlParams.get('n')); + +var img = document.createElement("img"); +img.src=`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${n+1}.png` +img.alt = data[n].name; +document.querySelector(".img-wrapper").appendChild(img); + +var h2 = document.createElement("h2"); +h2.innerText = data[n].name; +document.querySelector("main").appendChild(h2); + +var table = document.createElement("table"); +var tbody = document.createElement("tbody"); +table.appendChild(tbody) +for (const key in data[n]) { + var tr = document.createElement("tr"); + tr.innerHTML = ` + ${key} + ${data[n][key]} + ` + tbody.appendChild(tr); + } +document.querySelector("main").appendChild(table); \ No newline at end of file diff --git a/pokemon/style.css b/pokemon/style.css index 541d78d..18ca2a2 100644 --- a/pokemon/style.css +++ b/pokemon/style.css @@ -1,5 +1,5 @@ .img-wrapper { - border-radius: 100%; + border-radius: 50%; overflow: hidden; border: var(--border-dark); aspect-ratio: 1/1; diff --git a/style.css b/style.css index 7a53e5f..b0e58a5 100644 --- a/style.css +++ b/style.css @@ -88,7 +88,7 @@ main { height: 4rem; } -.card .info-wrapper { +.card .info-wrapper { display: flex; flex-direction: column; gap: 0.3rem;