Subindo desafio 3

CADU110 · Jun 22, 2024 · 832a1bc · 832a1bc
1 parent 4f8629f
commit 832a1bc
Show file tree

Hide file tree

Showing 4 changed files with 210 additions and 23 deletions.
diff --git a/assets/pngwing.com.png b/assets/pngwing.com.png
diff --git a/src/index.html b/src/index.html
@@ -4,23 +4,32 @@
   <!--carregar arquivo css-->
   <head>
     <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <!--ajuste de tela em smartphones-->
     <title>PokeApi</title>
     <!--titulo da aba da pagina-->
   </head>
   <body>
-    <div class="pageContent">
-      <h2 id="name">Nome do Pokemon</h2>
-      <img
-        id="img_sprite_front_default"
-        src="../assets/missingno.png"
-        alt="Imagem do Pokemon"
-      />
-      <div>
-        <button id="previous" onclick="previousPokemon()">Anterior</button>
-        <button id="next" onclick="nextPokemon()">Proximo</button>
+    <div class="galery">
+      <div class="card">
+        <div id="page" class="pageContent">
+          <h2 id="name">Nome do Pokemon</h2>
+          <img
+            id="img_sprite_front_default"
+            src="../assets/missingno.png"
+            alt="Imagem do Pokemon"
+          />
+          <span class="subtitulo">Tipo:</span>
+          <span id="tipo" class="texto">Tipo pokemon</span>
+          <div class="buttons-container">
+            <button id="previous" onclick="previousPokemon()"><i class="material-icons">arrow_back_ios</i></button>
+            <button id="next" onclick="nextPokemon()"><i class="material-icons">arrow_forward_ios</i></button>
+          </div>
+        </div>
       </div>
+
     </div>
   </body>
   <script src="script.js" type="text/javascript"></script>

diff --git a/src/script.js b/src/script.js
@@ -1,3 +1,6 @@
+
+var initt = -1;
+
 //função de mudar imagem pelo id e pela url
 function changeImage(id, url) {
   document.getElementById(id).src = url;
@@ -7,17 +10,125 @@ function changeText(id, text) {
   document.getElementById(id).innerText = text;
 }
 
-// Daqui para baixo voce ira escrever
-// o código para resolver o desafio
+// mudar de cor
+function changeColor(id,color){
+  document.getElementById(id).style.backgroundColor = color;
+}
 
+//rotação
+function rodar(id){
+  document.querySelector(id).classList.toggle('rotation')
+}
+
+// o código para resolver o desafio
 function previousPokemon() {
-  alert("Pokemon Anterior");
-  //abra o terminal em inspecionar no chrome para visualizar
+  rodar('.card');
+  pegarPokemons(2);
   console.log("Pokemon Anterior");
 }
 
 function nextPokemon() {
-  alert("Pokemon Seguinte");
-  //abra o terminal em inspecionar no chrome para visualizar
+  rodar('.card');
+  pegarPokemons(1);
   console.log("Pokemon Seguinte");
 }
+
+//pegar nome,imagem,tipo e cor
+async function pegarPokemons(op){
+  const poks = await fetch('https://pokeapi.co/api/v2/pokemon/?offset=0&limit=1292');
+  const poksDados = await poks.json();
+  if(op === 1){
+    if(initt+1 < poksDados.results.length){ 
+      initt++;
+    }else{
+      initt=0;
+    }
+  }else if( op === 2){
+    if(initt - 1 >=0){
+      initt--;
+    }else{
+      initt = poksDados.results.length-1;
+    }
+  }
+
+  const nameP = poksDados.results[initt].name;
+  const urlP = poksDados.results[initt].url;
+  const poksInfo = await fetch(urlP);
+  const poksresults = await poksInfo.json();
+  var image = poksresults.sprites.front_default;
+  const tipo = poksresults.types.map(typesi => typesi.type.name);
+
+  tipo.forEach(tipo => {
+    switch (tipo) {
+      case 'normal':
+        changeColor('page', '#A8A878');
+        break;
+      case 'fire':
+        changeColor('page', '#F08030');
+        break;
+      case 'water':
+        changeColor('page', '#6890F0');
+        break;
+      case 'grass':
+        changeColor('page', '#78C850');
+        break;
+      case 'electric':
+        changeColor('page', '#F8D030');
+        break;
+      case 'ice':
+        changeColor('tipagepo', '#98D8D8');
+        break;
+      case 'fighting':
+        changeColor('page', '#C03028');
+        break;
+      case 'poison':
+        changeColor('page', '#A040A0');
+        break;
+      case 'ground':
+        changeColor('page', '#E0C068');
+        break;
+      case 'flying':
+        changeColor('page', '#A890F0');
+        break;
+      case 'psychic':
+        changeColor('page', '#F85888');
+        break;
+      case 'bug':
+        changeColor('page', '#A8B820');
+        break;
+      case 'rock':
+        changeColor('page', '#B8A038');
+        break;
+      case 'ghost':
+        changeColor('page', '#705898');
+        break;
+      case 'dragon':
+        changeColor('page', '#7038F8');
+        break;
+      case 'dark':
+        changeColor('page', '#705848');
+        break;
+      case 'steel':
+        changeColor('page', '#B8B8D0');
+        break;
+      case 'fairy':
+        changeColor('page', '#EE99AC');
+        break;
+      default:
+        changeColor('page', '#808080');
+        break;
+    }
+  });
+
+  if(image == null){
+    image ="../assets/pngwing.com.png";
+  }
+
+  changeImage('img_sprite_front_default', image);
+  changeText('name',nameP);
+  changeText('tipo',tipo);
+}
+
+
+
+
diff --git a/src/style.css b/src/style.css
@@ -1,24 +1,91 @@
 body {
-  font-family: "Roboto", sans-serif;
+  font-family: Lato,"Roboto", sans-serif;
 }
 
-div.pageContent {
-  margin-top: 5em;
-  height: 100%;
+.galery{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100vh;
+}
+
+.card{
+  width:30vw;
+  height: auto;
+  transform-style: preserve-3d;
+  transition: transform 0.6s;
+}
+
+h2{
+  font-weight: bolder;
+}
+
+.subtitulo{
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.texto{
+  font-size: 14px;
+  font-style: normal;
+  margin-bottom: 10px;
+}
+
+div.pageContent{
   text-align: center;
+  background-color: rgb(104, 104, 104);
+  border-radius: 20px;
+  backface-visibility: hidden;
+  transition: transform 0.5s ease;
+  display: flex;
+  flex-direction: column; 
+  align-items: center; 
+  position: relative;
 }
 
-img.img_sprite_front_default {
+#img_sprite_front_default {
   width: 96px;
   height: 96px;
   margin-block: 1em;
 }
 
+.buttons-container {
+  display: flex;
+  justify-content: space-between; 
+  align-items: center;
+  padding: 10px; 
+  height: auto;
+  width: 100%;
+  position: absolute;
+}
+
 button#previous,
 button#next {
   border: none;
-  padding: 10px 20px;
+  padding: 100px 20px;
   text-align: center;
-  display: inline-block;
   font-size: 18px;
+  background-color: transparent;
+  opacity: 0.5;
+  cursor: pointer;
+}
+
+button#previous{
+  margin-right: auto;
+
 }
+
+button#next{
+  margin-left: auto;
+}
+
+button#previous:hover,
+button#next:hover{
+  opacity: 1;
+}
+
+.rotation{
+  transform: rotateY(360deg);
+}
+
+