From 7250bdb14fc554d052e08138903cd792c783a29c Mon Sep 17 00:00:00 2001 From: D'Sordes <125225427+dsordes37@users.noreply.github.com> Date: Sun, 4 Feb 2024 18:13:04 -0300 Subject: [PATCH] inicial commit --- .gitattributes | 2 + README.md | 3 +- assets/css/global.css | 30 +++---- assets/css/paige.css | 105 +++++++++++++++++++++++ assets/css/pokedex.css | 165 ------------------------------------- assets/css/pokemon.css | 137 ++++++++++++++++++++++++++++++ assets/favicon/favicon.ico | Bin 0 -> 15406 bytes assets/js/main.js | 72 +++++++--------- assets/js/paiges.js | 63 ++++++++++++++ assets/js/poke-api.js | 35 -------- assets/js/pokeModel.js | 32 +++++++ assets/js/pokeapi.js | 57 +++++++++++++ assets/js/pokemon-model.js | 8 -- index.html | 59 +++++-------- pokepaige/index.html | 25 ++++++ 15 files changed, 487 insertions(+), 306 deletions(-) create mode 100644 .gitattributes create mode 100644 assets/css/paige.css delete mode 100644 assets/css/pokedex.css create mode 100644 assets/css/pokemon.css create mode 100644 assets/favicon/favicon.ico create mode 100644 assets/js/paiges.js delete mode 100644 assets/js/poke-api.js create mode 100644 assets/js/pokeModel.js create mode 100644 assets/js/pokeapi.js delete mode 100644 assets/js/pokemon-model.js create mode 100644 pokepaige/index.html diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 000000000..dfe077042 --- /dev/null +++ b/.gitattributes @@ -0,0 +1,2 @@ +# Auto detect text files and perform LF normalization +* text=auto diff --git a/README.md b/README.md index 0c237c1c3..51ee4539a 100644 --- a/README.md +++ b/README.md @@ -1 +1,2 @@ -# Trilha JS Developer - Pokedex +# pokedex + diff --git a/assets/css/global.css b/assets/css/global.css index 980e87861..f52d6317d 100644 --- a/assets/css/global.css +++ b/assets/css/global.css @@ -1,24 +1,14 @@ -* { - font-family: 'Roboto', sans-serif; - box-sizing: border-box; -} +@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;500;700&display=swap'); -body { - background-color: #f6f8fc; -} +*{ + margin: 0; + padding: 0; + box-sizing: border-box; -.content { - width: 100vw; - height: 100vh; + font-family: 'Roboto', sans-serif; +}main{ padding: 1rem; - background-color: #fff; -} - -@media screen and (min-width: 992px) { - .content { - max-width: 992px; - height: auto; - margin: 1rem auto; - border-radius: 1rem; - } +}a{ + color: currentColor; + text-decoration: none; } \ No newline at end of file diff --git a/assets/css/paige.css b/assets/css/paige.css new file mode 100644 index 000000000..ee709923c --- /dev/null +++ b/assets/css/paige.css @@ -0,0 +1,105 @@ +#content{ + height: 100vh; + display: grid; + grid-template-rows: 1fr 9fr; +} +header{ + display: flex; + justify-content: space-between; + padding: 1rem 1rem 0 1rem; + +}header a, header div{ + width: 50px; + height: 50px; + border-radius: 50%; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; +}header a:hover, header div:hover{ + background-color: rgba(255, 255, 255, 0.418); +}header i{ + color: white; + font-size: 30px; + + +}main{ + padding: 0; + display: grid; + grid-template-rows: 1fr 1fr; +}main>div{ + padding: 1rem; +}.perfil{ + display: flex; + flex-direction: column; + position: relative; + color: white; +}.type{ + display: flex; +}.type>li{ + display: flex; + margin: .2rem; + font-size: 1.2rem; +}.perfil>span{ + align-self: flex-end; + font-size: 1.5rem; + position: relative; +}h1{ + margin: 0; + font-size: 3.5rem; +}.pokeImg{ + position: absolute; + height: 250px; + align-self: center; + bottom: -25px; + z-index: 1; +}.info{ + background-color: white; + position: absolute; + bottom: 0; + left: 0; + width: 100vw; + border-radius: 2.5rem 2.5rem 0 0; +} +th{ + text-align: left; + width: 100px; + color: gray; +}th, td{ + padding: 20px 7px; + font-size: 1.1rem; +} + +h1, h2, h3{ + text-transform: capitalize; +} +.statistic{ + text-align: center; + border-bottom: 2px solid rgba(0, 0, 0, 0.233); + padding: 5px; + width: 80%; + margin: auto; +}.fa-mars{ + color: blue; + margin: 0 3px; +}.fa-venus{ + color: rgb(255, 42, 149); + margin: 0 3px 0 5px; +} + +@media(min-width:600px){ + .pokeImg{ + height: 270px; + bottom: -45px; + }h1{ + font-size: 5rem; + } +}@media(min-width:1100px){ + .pokeImg{ + height: 350px; + }h1{ + font-size: 6rem; + }.type>li{ + font-size: 1.5rem; + } +} \ No newline at end of file diff --git a/assets/css/pokedex.css b/assets/css/pokedex.css deleted file mode 100644 index 59eef2bde..000000000 --- a/assets/css/pokedex.css +++ /dev/null @@ -1,165 +0,0 @@ -.pokemons { - display: grid; - grid-template-columns: 1fr; - margin: 0; - padding: 0; - list-style: none; -} - -.normal { - background-color: #a6a877; -} - -.grass { - background-color: #77c850; -} - -.fire { - background-color: #ee7f30; -} - -.water { - background-color: #678fee; -} - -.electric { - background-color: #f7cf2e; -} - -.ice { - background-color: #98d5d7; -} - -.ground { - background-color: #dfbf69; -} - -.flying { - background-color: #a98ff0; -} - -.poison { - background-color: #a040a0; -} - -.fighting { - background-color: #bf3029; -} - -.psychic { - background-color: #f65687; -} - -.dark { - background-color: #725847; -} - -.rock { - background-color: #b8a137; -} - -.bug { - background-color: #a8b720; -} - -.ghost { - background-color: #6e5896; -} - -.steel { - background-color: #b9b7cf; -} - -.dragon { - background-color: #6f38f6; -} - -.fairy { - background-color: #f9aec7; -} - -.pokemon { - display: flex; - flex-direction: column; - margin: .5rem; - padding: 1rem; - border-radius: 1rem; -} - -.pokemon .number { - color: #000; - opacity: .3; - text-align: right; - font-size: .625rem; -} - -.pokemon .name { - text-transform: capitalize; - color: #fff; - margin-bottom: .25rem; -} - -.pokemon .detail { - display: flex; - flex-direction: row; - align-items: center; - justify-content: space-between; -} - -.pokemon .detail .types { - padding: 0; - margin: 0; - list-style: none; -} - -.pokemon .detail .types .type { - color: #fff; - padding: .25rem .5rem; - margin: .25rem 0; - font-size: .625rem; - border-radius: 1rem; - filter: brightness(1.1); - text-align: center; -} - -.pokemon .detail img { - max-width: 100%; - height: 70px; -} - -.pagination { - display: flex; - flex-direction: row; - justify-content: center; - align-items: center; - width: 100%; - padding: 1rem; -} - -.pagination button { - padding: .25rem .5rem; - margin: .25rem 0; - font-size: .625rem; - color: #fff; - background-color: #6c79db; - border: none; - border-radius: 1rem; -} - -@media screen and (min-width: 380px) { - .pokemons { - grid-template-columns: 1fr 1fr; - } -} - -@media screen and (min-width: 576px) { - .pokemons { - grid-template-columns: 1fr 1fr 1fr; - } -} - -@media screen and (min-width: 992px) { - .pokemons { - grid-template-columns: 1fr 1fr 1fr 1fr; - } -} \ No newline at end of file diff --git a/assets/css/pokemon.css b/assets/css/pokemon.css new file mode 100644 index 000000000..3d8a5da35 --- /dev/null +++ b/assets/css/pokemon.css @@ -0,0 +1,137 @@ +@keyframes giro { + 0%{ + transform: rotate(0deg); + }100%{ + transform: rotate(360deg); + } +} + +main{ + display: flex; + flex-direction: column; + align-items: center; +} +#pokemonList{ + list-style: none; + display: grid; + grid-template-columns: 1fr 1fr; + + + +}.pokemon{ + background-color: #49d086; + margin: .5rem; + padding: 1rem ; + display: flex; + flex-direction: column; + + color: white; + border-radius: 1rem; + + +}.pokemon>div{ + + display: flex; + justify-content: space-around; +}.pokeImg{ + max-width: 60%; + height: 100px; + object-fit: contain; + align-self: flex-end; +}.type{ + list-style: none; +}.type>li{ + background-color: rgba(255, 255, 255, 0.205); + padding: .2rem .5rem; + margin: .5rem; + border-radius: 1rem; + text-align: center; +}.pokemon>span{ + align-self: flex-end; + color: rgba(0, 0, 0, 0.295); + font-weight: bolder; +}.pokemon>h2{ + align-self: flex-start; + text-transform: capitalize; +} + + +.carga{ + width: 40px; + display: none; +} +.carga>img{ + width: 100%; + animation: giro .5s 0s infinite forwards normal; +} + +#carregar{ + color: white; + background-color: rgb(36, 87, 255); + border: none; + padding: 4px; + border-radius: 5px; + cursor: pointer; + display: none; +}#carregar:hover{ + background-color: rgb(64, 109, 255); +} + +.grass{ + background-color: #49d086; +}.water{ + background-color: #74bcfc; +}.fire{ + background-color: #fc6c6c; +}.electric{ + background-color: #fcdc6c; +}.poison{ + background-color: #b66cfc; +}.ground{ + background-color: #c5ac5c; +}.normal{ + background-color: #bbbcbc; +}.bug{ + background-color: #6ecc3c; +}.ghost{ + background-color: #724ccc; +}.fighting{ + background-color: #fcbe6c; +}.dark{ + background-color: #352c3c; +}.rock{ + background-color: #838383; +}.psychic{ + background-color: #fc6c9c; +}.fairy{ + background-color: #fc6cdd; +}.dragon{ + background-color: #657cfc; +}.steel{ + background-color: #95b2be; +}.ice{ + background-color: #9ec8ff; +} + + + + + +@media(max-width:360px){ + #pokemonList{ + grid-template-columns: 1fr; + } +} +@media(min-width:650px){ + #pokemonList{ + grid-template-columns: 1fr 1fr 1fr; + }.pokeImg{ + height: 150px; + } +}@media(min-width:1100px){ + #pokemonList{ + grid-template-columns: 1fr 1fr 1fr 1fr; + }.pokeImg{ + height: 200px; + } +} \ No newline at end of file diff --git a/assets/favicon/favicon.ico b/assets/favicon/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..24fe28e5d540b8d114f4009187c2da1a27862426 GIT binary patch literal 15406 zcmeHN&rc*p6fUwxFS^VOuwVj8LZTd8vWdxtli5UOb+hL^nwVu`+(iEejtsD{Ok|@M zk4Dj`Hxo@pG;tL{BP_#@nSsOuBCCOgARr*^_jUK1>2A7vx{-;XJ;|5q>8|&qUcIV% zRj-t)QRh@Frck!3*B?>pvQnzG)%f2YSL$87yL8F?{)|%h8kA~B9gu*+c#q;t{rdYe zyTE~E!9APwm6AKvQg%k1Ryd96?=lyLj@TRZ&b$AjMsg`!q0E^13lOExSnE`nE4 zgFgGCqoe2C_)xAJt?=SE&}(k=eSO1g^YinNP5A~|T3WP*h6cS2@{Vl+k6owycs#xd zXjaV3%;>xliG=Mv>KwSy$6|5K3Zak36SnuUSnLSBQr&AxJQV+wW>+z8~qb{?nyALp4?;0nO`Df&egI0*}2j@tzG zypT?(pEwCQUOXUo8_?%#xALUrL&hqwE|{B}J6u>;(7Z4-boZguC9PLGg1!e2uD7N3 za-ETN%dLd`QeDypmE){O-ATW&!1cOVf}2e1JFbUPpS0vbWHOn@oHG3WgN8QOd0F{~ zc{bw$-5!zrVD^X2mw;{hxu37Kx3_DJjg2~*nwrp0?taPl#J~XKyv(LwpYvNfJ-nPw z-_d4gXLUNEcb08!ZCYJjosRnYdW|ufvySyYeW|bS&R!+?h{2W_t1&k7!^FfyDITO8 z>fl%3jQ;}5H|sm&!_xoB$;r|@z%fT#RH8wASXKGpk9aiZsYg)xMy$)&)*DXy*VWZ~ z)VIdYmD`UPb6KgIh%2W7iCG!9+L1^+Tk=23R%#hwJS`yYJn)5ymr!<9v_Im~C14x! z4-I;WmnH5t%G%oJ(B38!Pl7k)GA4guqJT0FFs>(FMx5MLar~9XNB27P03F+Hmu>$~ znX(sPy&nO_^u%`n_XWhYQ1d_f;grZ{KNf)lz|9V_kCAWE{!dU}-`Ai#PWw}c9k^HF zeup}6&%?fO$`iS=zoXr`FQV-Cfh2ekVeK!TpzoK!hrU42r)dwXU&ua=vTp&br}z7@ z;}4MzUa$jwLBMe_1OA)99~Ruh^Ebe)heq8bXp;Xp{wnJsPaKumHih^lQE$4 z2KVy85$S)N{zJ~K2pcauF+F|%kY_VNk;%Nh;^aZz$I&Sa4ReNWKEgA}FlUIF%sVc= z=AW+&qo-Hhv#7t}Gqn5g*4*6uVLo5boCsrk*5%onlLvVl_AzAj^o%_2Wydh@O+VH9 zn=-@d8nixnTYYn6B+{S#6xrW?x53MwBL69mYQ!_+@EgVi8(f<>zXzS;J3BkI=H_M_ zc(;RhRJ?32??n#F!NI%CiEc2qDr*+(33NF?pAWdE3jZKwM@NT#)^0s_XC8pL$sqJn zXK-*t=A+Q(b-lfVx!&F(jhLF6^301m^QFw!T)cQuzemHnGy>+7a=Bb!KIA(vkkREs zhtT>XXOok>jpUPpmf39fNY07A!!`uv!FnPe`J2%CgCm`5b1BrrLzzIE&Fq>STteH^@?9OOZtq! z`pv5Ur>Mic_=iBX{fG0M%olrjw(1n-*{VNv{}}iHsD}P2oQtJ!mzlVaxk%Q6Ey&|| zCM3`AH@{lzaNK@tf_A6w?}0b(ObbqG{90!ty&aGx^O2OCTcuyPzB&7XKEylaGT*$3 zXQ91{XWi~0?t5Ex3iEvC^@lHUK6Qd?9DSPLU7>Xc*6{yp;42evtdw~q!H?*w`uVMQ zPjRgle+W{(a;owdu;m%oKZO`YzY~O5F-UpZ?C7oFaMBj|8;36Q AtN;K2 literal 0 HcmV?d00001 diff --git a/assets/js/main.js b/assets/js/main.js index bcaa24508..0e0fd5858 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,47 +1,39 @@ -const pokemonList = document.getElementById('pokemonList') -const loadMoreButton = document.getElementById('loadMoreButton') - -const maxRecords = 151 -const limit = 10 -let offset = 0; - -function convertPokemonToLi(pokemon) { - return ` -
  • - #${pokemon.number} - ${pokemon.name} - -
    -
      - ${pokemon.types.map((type) => `
    1. ${type}
      2. `).join('')} -
    - - ${pokemon.name} -
    -
    • - ` +const pokeList=document.querySelector('#pokemonList') +const btLoad=document.querySelector('#carregar') +const boll=document.querySelector('.carga') + +let offset=0 + + + +function pokemonToPokelist(pokemon){ + return ` +
  • + #${pokemon.id.toString().padStart(3, 0)} +

    ${pokemon.name}

    +
    +
      + ${pokemon.types.map((element)=>`
    1. ${element}
      2. `).join('')} +
    + imagem de ${pokemon.name} +
    +
    • +     `; } -function loadPokemonItens(offset, limit) { - pokeApi.getPokemons(offset, limit).then((pokemons = []) => { - const newHtml = pokemons.map(convertPokemonToLi).join('') - pokemonList.innerHTML += newHtml +function carregaPoke(){ + pokeApi.getPokemons(offset, 24).then((pokemons)=>{ + + pokemons.map((element)=>{ + boll.style.display='none' + btLoad.style.display='block' + offset++ + return pokeList.innerHTML+=pokemonToPokelist(element) + }); }) } -loadPokemonItens(offset, limit) - -loadMoreButton.addEventListener('click', () => { - offset += limit - const qtdRecordsWithNexPage = offset + limit +carregaPoke() - if (qtdRecordsWithNexPage >= maxRecords) { - const newLimit = maxRecords - offset - loadPokemonItens(offset, newLimit) - loadMoreButton.parentElement.removeChild(loadMoreButton) - } else { - loadPokemonItens(offset, limit) - } -}) \ No newline at end of file +btLoad.addEventListener('click', carregaPoke) \ No newline at end of file diff --git a/assets/js/paiges.js b/assets/js/paiges.js new file mode 100644 index 000000000..96ca90aeb --- /dev/null +++ b/assets/js/paiges.js @@ -0,0 +1,63 @@ +const parametros= new URLSearchParams(window.location.search) +const id= parametros.get('id') +const content= document.querySelector('#content') + + +function pokemonToPokePaige(pokemon){ + content.className=pokemon.types[0] + + return` + + +
    + + + +
    + +
    + +
    +
    +
    + +

    ${pokemon.name}

    + #${pokemon.id.toString().padStart(3, 0)} + +
      + ${pokemon.types.map((type)=>`
    1. ${type}
      2. `).join('')} +
    + imagem de ${pokemon.name} + +
    +
    + +
    + + + + + + + + + + + + + + + + + +
    epecies${pokemon.specie}
    height${pokemon.height}
    weight${pokemon.weight}
    abilities${pokemon.abilities.join(', ')}
    +
    +
    +
    + + ` +} + + +pokeApi.getSinglePokemon(id) +.then((pokemon)=>content.innerHTML+=(pokemonToPokePaige(pokemon))) diff --git a/assets/js/poke-api.js b/assets/js/poke-api.js deleted file mode 100644 index 38fbfd465..000000000 --- a/assets/js/poke-api.js +++ /dev/null @@ -1,35 +0,0 @@ - -const pokeApi = {} - -function convertPokeApiDetailToPokemon(pokeDetail) { - const pokemon = new Pokemon() - pokemon.number = pokeDetail.id - pokemon.name = pokeDetail.name - - const types = pokeDetail.types.map((typeSlot) => typeSlot.type.name) - const [type] = types - - pokemon.types = types - pokemon.type = type - - pokemon.photo = pokeDetail.sprites.other.dream_world.front_default - - return pokemon -} - -pokeApi.getPokemonDetail = (pokemon) => { - return fetch(pokemon.url) - .then((response) => response.json()) - .then(convertPokeApiDetailToPokemon) -} - -pokeApi.getPokemons = (offset = 0, limit = 5) => { - const url = `https://pokeapi.co/api/v2/pokemon?offset=${offset}&limit=${limit}` - - return fetch(url) - .then((response) => response.json()) - .then((jsonBody) => jsonBody.results) - .then((pokemons) => pokemons.map(pokeApi.getPokemonDetail)) - .then((detailRequests) => Promise.all(detailRequests)) - .then((pokemonsDetails) => pokemonsDetails) -} diff --git a/assets/js/pokeModel.js b/assets/js/pokeModel.js new file mode 100644 index 000000000..9c0f9396c --- /dev/null +++ b/assets/js/pokeModel.js @@ -0,0 +1,32 @@ +class Pokemon{ + id; + name; + types; + img; + specie; + height; + weight; + abilities; + eggGroup +} + + +function createPokeModel(pokemonDeta){ + const modPokemon=new Pokemon + modPokemon.id=pokemonDeta.id + modPokemon.name=pokemonDeta.name + modPokemon.types=pokemonDeta.types.map((element)=>element.type.name) + modPokemon.img=`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/official-artwork/${pokemonDeta.id}.png` + modPokemon.height=pokemonDeta.height + modPokemon.weight=pokemonDeta.weight + modPokemon.abilities=pokemonDeta.abilities.map((element)=>element.ability.name) + + modPokemon.specie=pokemonDeta.species.name + + + + + return modPokemon + +} + diff --git a/assets/js/pokeapi.js b/assets/js/pokeapi.js new file mode 100644 index 000000000..33c48345f --- /dev/null +++ b/assets/js/pokeapi.js @@ -0,0 +1,57 @@ + + + +const pokeApi={ + + async getDetails(pokemon){ + return fetch(pokemon.url) + .then((response)=>response.json()) + }, + + async getInPokeModel(pokemon){ + return fetch(pokemon.url) + .then((response)=>response.json()) + .then(createPokeModel) + }, + + async getPokemons(offset=0, limit=10){ + const boll=document.querySelector('.carga') + boll.style.display='block' + const url=`https://pokeapi.co/api/v2/pokemon?offset=${offset}&limit=${limit}` + + + /* + fetch(url).then((reponse)=>{ + console.log(reponse) + }) + + + ESSA SERIA A VERSÃO MAIS LONGA DA REQUISIÇÃO + PORÉM, COM ARROW FUNCTIONS É POSSÍVEL REDUZI-LA + COMO MOSTRADO ABAIXO + */ + + + //o FETCH faz a requesição dos dados para a url e o .JSON transforma o resultado em json + //o RESULTS converte o JSONBODY pra uma lista de objetos, que usaremos para extrair as informações + + return fetch(url).then((response)=> response.json()) + .then((jsonBody)=> jsonBody.results) + + //seleciona cada parte do result que é uma lista e anda para a função GRTDETAILS que faz um novo fetch para pegar os detalhes + .then((results)=>results.map((element)=>this.getInPokeModel(element))) + + // o PROMISSE.ALL recebe uma lista de promessas e agrada enquanto todas retornam para dar proseguimento ao sistema + .then((details)=>Promise.all(details)) + .then((deta)=>deta) + + .catch((erro)=> console.error(erro)) + }, + + async getSinglePokemon(id){ + const url=`https://pokeapi.co/api/v2/pokemon/${id}` + + return fetch(url).then((response)=>response.json()) + .then(createPokeModel) + } +}; \ No newline at end of file diff --git a/assets/js/pokemon-model.js b/assets/js/pokemon-model.js deleted file mode 100644 index b0d17bb90..000000000 --- a/assets/js/pokemon-model.js +++ /dev/null @@ -1,8 +0,0 @@ - -class Pokemon { - number; - name; - type; - types = []; - photo; -} diff --git a/index.html b/index.html index 1a017821d..7a097fbba 100644 --- a/index.html +++ b/index.html @@ -1,46 +1,31 @@ - - + - - Pokedex - - - + - - - - - - - - + + + + + Pokedex - + -
    -

    Pokedex

    - -
      - -
    - - -
    - - - - - +

    Pokedex

    +
    + +
      + +
    +
    pokebola
    + +
    + + + + + - \ No newline at end of file diff --git a/pokepaige/index.html b/pokepaige/index.html new file mode 100644 index 000000000..764cef6c9 --- /dev/null +++ b/pokepaige/index.html @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + página do pokemon + + +
    + + + + + \ No newline at end of file