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 000000000..24fe28e5d Binary files /dev/null and b/assets/favicon/favicon.ico differ 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