From f02dd52d7544f920af4731da545c27b138bae33f Mon Sep 17 00:00:00 2001 From: Diego D'Antonio Date: Tue, 2 Apr 2024 21:07:44 -0300 Subject: [PATCH] Revised Options --- .gitattributes => dex/.gitattributes | 0 {img => dex/img}/apple-touch-icon.png | Bin {img => dex/img}/favicon-16x16.png | Bin {img => dex/img}/favicon-32x32.png | Bin {img => dex/img}/favicon.ico | Bin {img => dex/img}/site.webmanifest | 0 {v3 => dex}/index.html | 32 +++--- main copy.js => dex/main copy.js | 0 main.js => dex/main.js | 36 +++--- style.css => dex/style.css | 19 +++- index.html | 70 +----------- v2/app.js | 27 ----- v2/index.html | 17 --- v2/style2.css | 151 -------------------------- v3/main.js | 102 ----------------- v3/style.css | 119 -------------------- 16 files changed, 57 insertions(+), 516 deletions(-) rename .gitattributes => dex/.gitattributes (100%) rename {img => dex/img}/apple-touch-icon.png (100%) rename {img => dex/img}/favicon-16x16.png (100%) rename {img => dex/img}/favicon-32x32.png (100%) rename {img => dex/img}/favicon.ico (100%) rename {img => dex/img}/site.webmanifest (100%) rename {v3 => dex}/index.html (67%) rename main copy.js => dex/main copy.js (100%) rename main.js => dex/main.js (83%) rename style.css => dex/style.css (89%) delete mode 100644 v2/app.js delete mode 100644 v2/index.html delete mode 100644 v2/style2.css delete mode 100644 v3/main.js delete mode 100644 v3/style.css diff --git a/.gitattributes b/dex/.gitattributes similarity index 100% rename from .gitattributes rename to dex/.gitattributes diff --git a/img/apple-touch-icon.png b/dex/img/apple-touch-icon.png similarity index 100% rename from img/apple-touch-icon.png rename to dex/img/apple-touch-icon.png diff --git a/img/favicon-16x16.png b/dex/img/favicon-16x16.png similarity index 100% rename from img/favicon-16x16.png rename to dex/img/favicon-16x16.png diff --git a/img/favicon-32x32.png b/dex/img/favicon-32x32.png similarity index 100% rename from img/favicon-32x32.png rename to dex/img/favicon-32x32.png diff --git a/img/favicon.ico b/dex/img/favicon.ico similarity index 100% rename from img/favicon.ico rename to dex/img/favicon.ico diff --git a/img/site.webmanifest b/dex/img/site.webmanifest similarity index 100% rename from img/site.webmanifest rename to dex/img/site.webmanifest diff --git a/v3/index.html b/dex/index.html similarity index 67% rename from v3/index.html rename to dex/index.html index 08db482..8f0c321 100644 --- a/v3/index.html +++ b/dex/index.html @@ -4,15 +4,19 @@ + + + + Pokédex -
-

Pokédex

-
+

Pokédex

+
+
- -
- - - - -
-
    + +
    + + +
    +
    + + +
    +
    \ No newline at end of file diff --git a/main copy.js b/dex/main copy.js similarity index 100% rename from main copy.js rename to dex/main copy.js diff --git a/main.js b/dex/main.js similarity index 83% rename from main.js rename to dex/main.js index d033fe7..bad2fc6 100644 --- a/main.js +++ b/dex/main.js @@ -1,7 +1,7 @@ var chosenGen = 1; var chosenType = 0; -var chosenForm = 'default'; var chosenView = 'gif'; +var chosenForm = 'default'; const pokeContainer = document.querySelector('.container'); const optGen = document.querySelector('#optGen'); const optType = document.querySelector('#optType'); @@ -34,19 +34,15 @@ optType.addEventListener('change', (event) => { }) optForm.addEventListener("click", function(event) { - if(event.target.value) { - pokeContainer.innerHTML = '' - chosenForm = event.target.value - chosenType != 0 ? getByType(chosenType) : getByGen(chosenGen) - } + pokeContainer.innerHTML = '' + chosenForm = event.target.checked ? event.target.value : 'default' + chosenType != 0 ? getByType(chosenType) : getByGen(chosenGen) }) optView.addEventListener("click", function(event) { - if(event.target.value) { - pokeContainer.innerHTML = '' - chosenView = event.target.value - chosenType != 0 ? getByType(chosenType) : getByGen(chosenGen) - } + pokeContainer.innerHTML = '' + chosenView = event.target.checked ? event.target.value : 'png' + chosenType != 0 ? getByType(chosenType) : getByGen(chosenGen) }) //unused just for info @@ -121,6 +117,7 @@ const createCard = (poke) => { let pokeTypes = poke.types.map(typeInfo => typeInfo.type.name) let abilities = poke.abilities.map(pokeAbs => pokeAbs.ability.name) let stats = poke.stats.map(pokeStats => pokeStats.base_stat) + let total = stats.reduce((a, b) => a + b, 0) let color = pokeColors[pokeTypes[0]] var txtAbs = ''; @@ -145,18 +142,21 @@ const createCard = (poke) => {
    #${number}

    ${name}

    - ${pokeTypes.join(' - ')} + ${pokeTypes.join(' • ')}

    Abilities:

    ${txtAbs}

    Base Stats:

    -

    HP: ${stats[0]}

    -

    Attack: ${stats[1]}

    -

    Defense: ${stats[2]}

    -

    Sp. Attack: ${stats[3]}

    -

    Sp. Defense: ${stats[4]}

    -

    Speed: ${stats[5]}

    +
    ` diff --git a/style.css b/dex/style.css similarity index 89% rename from style.css rename to dex/style.css index a30736a..0084c18 100644 --- a/style.css +++ b/dex/style.css @@ -27,8 +27,8 @@ h1 { .options { display: flex; - column-gap: 1rem; - margin-bottom: 20px; + column-gap: 3rem; + margin: 20px; } .container { @@ -41,7 +41,7 @@ h1 { } .flip-card { - min-width: 160px; + min-width: 220px; min-height: 280px; perspective: 1000px; border-radius: 10px; @@ -79,6 +79,16 @@ h1 { transform: rotateY(180deg); } +.back-card ul { + list-style: none; +} + +.back-card li small { + font-size: 0.6rem; + text-transform: uppercase; + margin-left: 5px; +} + .image { background-color: rgba(255, 255, 255, 0.6); border-radius: 50%; @@ -116,12 +126,13 @@ h1 { .name { margin: 13px 0 7px; + font-size: 1.5rem; letter-spacing: 1.5px; text-transform: capitalize; } .type { - font-size: 0.7rem; + font-size: 0.8rem; font-weight: bolder; text-transform: uppercase; } diff --git a/index.html b/index.html index 5325ac9..f92d17a 100644 --- a/index.html +++ b/index.html @@ -1,70 +1,10 @@ - + - - - - - - Pokédex + + Redirect - -

    Pokédex

    -
    -
    - - - - -
    - -
    - - - - -
    -
    - - - - -
    -
    -
    - - - \ No newline at end of file + + \ No newline at end of file diff --git a/v2/app.js b/v2/app.js deleted file mode 100644 index f2de27b..0000000 --- a/v2/app.js +++ /dev/null @@ -1,27 +0,0 @@ -const getUrl = id => `https://pokeapi.co/api/v2/pokemon/${id}` - -const generatePokes = () => Array(151).fill().map((_, index) => - fetch(getUrl(index + 1)).then(resp => resp.json()) -) - -const generateHTML = pokemons => pokemons.reduce((el, {name,id,types,sprites}) => { - const mainTypes = types.map(typeInfo => typeInfo.type.name) - - el += ` -
  • - ${name} -

    ${id}. ${name}

    -

    ${mainTypes.join(' - ')}

    -
    • - ` - return el -}, '') - -const insertPokes = pokemons => { - const ul = document.querySelector('.pokedex') - ul.innerHTML = pokemons -} - -const pokeRequest = generatePokes() - -Promise.all(pokeRequest).then(generateHTML).then(insertPokes) \ No newline at end of file diff --git a/v2/index.html b/v2/index.html deleted file mode 100644 index 51d369f..0000000 --- a/v2/index.html +++ /dev/null @@ -1,17 +0,0 @@ - - - - - PokéDex - - - - -
    -

    Pokédex

    - -
    - - - - \ No newline at end of file diff --git a/v2/style2.css b/v2/style2.css deleted file mode 100644 index e0c6bbf..0000000 --- a/v2/style2.css +++ /dev/null @@ -1,151 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Rubik&display=swap'); - -body { - background: #EFEFBB; - background: linear-gradient(to right, rgb(197, 230, 236), rgb(239, 187, 230)); - color: white; - margin: 0; - font-family: 'Rubik', sans-serif; -} - -.container { - padding: 40px; - margin: 0 auto; -} - -h1 { - text-align: center; - font-size: 54px; -} - -.pokedex { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); - grid-gap: 20px; - padding-inline-start: 0; -} - -.card { - list-style: none; - padding: 40px; - color: #222; - text-align: center; - border-radius: 20px; - position: relative; -} - -.card::after { - content: ""; - display: block; - width: 50%; - height: 45%; - border-radius: 100%; - background-color: #fff; - opacity: .7; - position: absolute; - top: 15%; - left: 25%; -} - -.steel { - background-color: #f4f4f4; -} - -.fire { - background-color: #FDDFDF; -} - -.grass { - background-color: #DEFDE0; -} - -.electric { - background-color: #FCF7DE; -} - -.water, .ice { - background-color: #DEF3FD; -} - -.ground { - background-color: #f4e7da; -} - -.rock { - background-color: #d5d5d4; -} - -.fairy { - background-color: #fceaff; -} - -.poison { - background-color: #98d7a5; -} - -.bug { - background-color: #f8d5a3; -} - -.dragon { - background-color: #97b3e6; -} - -.psychic { - background-color: #eaeda1; -} - -.flying { - background-color: #F5F5F5; -} - -.fighting { - background-color: #E6E0D4; -} - -.normal { - background-color: #F5F5F5; -} - -.card:hover { - animation: bounce 0.5s linear; -} - -.card-title { - text-transform: capitalize; - margin-bottom: 0px; - font-size: 32px; - font-weight: normal; - position: relative; - z-index: 2; -} - -.card-subtitle { - margin-top: 5px; - color: #666; - font-weight: lighter; - position: relative; - z-index: 2; -} - -.card-image { - height: 180px; - position: relative; - z-index: 2; -} - -@keyframes bounce { - 20% { - transform: translateY(-6px); - } - 40% { - transform: translateY(0px); - } - - 80% { - transform: translateY(-2px); - } - 100% { - transform: translateY(0); - } -} \ No newline at end of file diff --git a/v3/main.js b/v3/main.js deleted file mode 100644 index d27d3c4..0000000 --- a/v3/main.js +++ /dev/null @@ -1,102 +0,0 @@ -var chosenGen = 1; -var chosenType = 0; -var chosenForm = 'default'; -const pokeContainer = document.querySelector('.pokedex'); -const totalPkm = document.querySelector('.total'); -const optGen = document.querySelector('#optGen'); -const optType = document.querySelector('#optType'); -const optForm = document.querySelectorAll('input[name="form"]'); - -optGen.addEventListener('change', (event) => { - if(event.target.value != chosenGen) { - while (pokeContainer.firstChild) pokeContainer.removeChild(pokeContainer.firstChild) - chosenGen = event.target.value - getByGen(chosenGen) - } -}) -optType.addEventListener('change', (event) => { - if(event.target.value != chosenType) { - while (pokeContainer.firstChild) pokeContainer.removeChild(pokeContainer.firstChild) - chosenType = event.target.value - getByType(chosenType) - } -}) -optForm.forEach((elem) => { - elem.addEventListener("click", function(event){ - chosenForm = event.target.value; - }); -}) - -const pokeColors = { - fire: 'firebrick', - grass: 'springgreen', - electric: 'gold', - water: 'royalblue', - ground: 'sandybrown', - rock: 'saddlebrown', - fairy: 'pink', - ghost: 'slateblue', - poison: 'purple', - bug: 'olive', - dragon: 'teal', - psychic: 'plum', - flying: 'skyblue', - fighting: 'salmon', - normal: 'wheat', - ice: 'aqua', - steel: 'silver', - dark: 'dimgrey' -} -const mainTypes = Object.keys(pokeColors); - -const getByGen = async(id = 1) => { - let url = 'https://pokeapi.co/api/v2/generation/'+id - let resp = await fetch(url) - let data = await resp.json() - generatePokes(data.pokemon_species.length) -} - -const getByType = async(id) => { - let url = 'https://pokeapi.co/api/v2/type/'+id - let resp = await fetch(url) - let data = await resp.json() - fetchPokemons(data.pokemon) -} - -const getUrl = id => `https://pokeapi.co/api/v2/pokemon/${id}` - -const generatePokes = (c) => Array(151).fill().map((_, index) => - fetch(getUrl(index + 1)).then(resp => resp.json()) -) - -const generateHTML = pokemons => pokemons.reduce((el, {id,name,types,sprites}) => { - let mainTypes = types.map(typeInfo => typeInfo.type.name) - let number = id.toString().padStart(5,'0') - let img = sprites.versions['generation-v']['black-white'].animated['front_'+chosenForm] || sprites['front_'+chosenForm] - let color = pokeColors[mainTypes[0]] - if(mainTypes.length > 1) { - color = 'linear-gradient('+pokeColors[mainTypes[0]]+' 20%, '+pokeColors[mainTypes[1]]+' 100%)' - } - - el += - `
  • -
    - - ${name} -
    -
    - #${number} -

    ${name}

    - ${mainTypes.join(' - ')} -
    -
    • ` - return el -}, '') - -const insertPokes = pokemons => { - document.querySelector('.pokedex').innerHTML = pokemons -} - -const pokeRequest = generatePokes() - -Promise.all(pokeRequest).then(generateHTML).then(insertPokes) \ No newline at end of file diff --git a/v3/style.css b/v3/style.css deleted file mode 100644 index 1f6d4fe..0000000 --- a/v3/style.css +++ /dev/null @@ -1,119 +0,0 @@ -@import url('https:fonts.googleapis.com/css?family=Rubik&display=swap'); - -* { - box-sizing: border-box; - margin: 0; - padding: 0; - font-family: 'Rubik', sans-serif; -} - -body { - background: linear-gradient(to right, #d4d3dd, #efefbb); - margin: 0 auto; -} - -h1 { - letter-spacing: 5px; - margin: 20px auto; - width: 100%; -} - -.radio { - display: inline-block; -} - -.options { - display: flex; - column-gap: 1rem; -} - -.container { - display: flex; - flex-wrap: wrap; - align-items: center; - justify-content: space-between; - margin: 0 auto; - max-width: 1200px; -} - -.pokedex { - display: grid; - grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); - grid-gap: 20px; - padding-inline-start: 0; -} - -.card { - list-style: none; - background-color: white; - border-radius: 10px; - box-shadow: 0 3px 15px rgba(100,100,100,0.8); - margin: 10px; - padding: 20px; - text-align: center; - max-width: 160px; -} - -.image { - background-color: rgba(255, 255, 255, 0.6); - border-radius: 50%; - width: 120px; - height: 120px; - white-space: nowrap; -} - -.middle { - display: inline-block; - vertical-align: middle; - height: 100%; -} - -.image img{ - vertical-align: middle; - max-height: 90%; -} - -.info { - margin-top: 20px; -} - -.number { - background-color: rgba(0, 0, 0, 0.15); - padding: 2px 10px; - border-radius: 10px; - font-size: 0.7rem; - font-weight: bolder; - letter-spacing: 1.5px; -} - -.name { - margin: 13px 0 7px; - letter-spacing: 1.5px; - text-transform: capitalize; -} - -.type { - font-size: 0.7rem; - font-weight: bolder; - text-transform: uppercase; -} -/* -.card.normal { background-color: wheat } -.card.fire { background-color: firebrick } -.card.water { background-color: royalblue } -.card.grass { background-color: springgreen } -.card.poison { background-color: purple } -.card.ground { background-color: sandybrown } -.card.rock { background-color: saddlebrown } -.card.electric { background-color: gold } -.card.ghost { background-color: slateblue } -.card.bug { background-color: olive } -.card.dragon { background-color: teal } -.card.psychic { background-color: plum } -.card.fighting { background-color: salmon } -.card.flying { background-color: skyblue } -.card.steel { background-color: silver } -.card.ice { background-color: aqua } -.card.dark { background-color: dimgrey } -.card.fairy { background-color: pink } -*/ \ No newline at end of file