Dragon Ball API: Explore o universo de Dragon Ball enquanto estuda programação com a linguagem Javascript, mais precisamente sobre requisições AJAX e manipulação de respostas no formato json.
Escolha uma das raças abaixo e veja a mágica acontecendo nas palmas das suas mãos ou na tela do seu pc.
E além de interagir com o universo de Dragon Ball , você que é desenvolvedor pode estudar o código fonte utilizado para o desenvolvimento desta pequena aplicação web e os conceitos utilizados para tal.
Confira o código fonte seguido da explicação:
<style>
.tr-db-race-btn,
#tr-container {
margin-top: 25px;
display: grid;
grid-template-columns: repeat(3, 1fr);;
grid-gap: 10px;
}
.tr-db-race-btn button,
.tr-db-card-data {
padding: 15px;
font-family: Ubuntu;
font-size: 1.3em;
font-weight: bold;
}
.tr-db-card-person {
border: 1px solid #CCC;
box-shadow: 0 3px 5px #000;
}
.tr-db-card-img {
text-align: center;
}
.tr-db-card-img img {
width: auto;
height: 300px;
}
</style>
<div class="tr-db-race-btn">
<button onclick="buscaPorRaca('Human')">HUMANOS</button>
<button onclick="buscaPorRaca('Saiyan')">SAYAJINS</button>
<button onclick="buscaPorRaca('Namekian')">NAMEKUSEIJINS</button>
<button onclick="buscaPorRaca('Majin')">MAJIN</button>
<button onclick="buscaPorRaca('Frieza Race')">FRIEZA</button>
<button onclick="buscaPorRaca('Android')">ANDROID</button>
<button onclick="buscaPorRaca('Jiren Race')">JIREN</button>
<button onclick="buscaPorRaca('God')">DEUSES</button>
<button onclick="buscaPorRaca('Angel')">ANJOS</button>
<button onclick="buscaPorRaca('Nucleico')">SUPREMO SENHORES KAIOS</button>
<button onclick="buscaPorRaca('Nucleico benigno')">SENHORES KAIOS</button>
<button onclick="buscaPorRaca('Unknown')">DESCONHECIDO</button>
</div>
<div id="tr-container"></div>
<script>
function buscaPorRaca(raca) {
let url = 'https://dragonball-api.com/api/characters?race='+ raca;
fetch(url)
.then(response => response.json())
.then(data => {
limpaCard();
let trContainer = document.getElementById('tr-container');
for(let i=0; i < data.length; i++) {
//CRIA UMA DIV PARA CADA PERSONAGEM
let trCardPerson = document.createElement('div');
trCardPerson.classList.add('tr-db-card-person');
trContainer.appendChild(trCardPerson);
//CRIA A DIV PARA O NOME DO PERSONAGEM
let cardName = document.createElement('div');
cardName.classList.add('tr-db-card-data');
cardName.textContent = data[i].name;
trCardPerson.appendChild(cardName);
//CRIA A DIV PARA A IMAGEM DO PERSONAGEM
let divCardImg = document.createElement('div');
divCardImg.classList.add('tr-db-card-img');
trCardPerson.appendChild(divCardImg);
//INSERE A IMAGEM DO PERSONAGEM NA DIV
let cardImg = document.createElement('img');
cardImg.setAttribute('src', data[i].image);
cardImg.setAttribute('alt', data[i].name);
divCardImg.appendChild(cardImg);
//CRIA A DIV PARA O KI DO PERSONAGEM
let cardKi = document.createElement('div');
cardKi.classList.add('tr-db-card-data');
cardKi.textContent = "KI: " + data[i].ki;
trCardPerson.appendChild(cardKi);
//CRIA A DIV PARA O MAXKI DO PERSONAGEM
let cardMaxKi = document.createElement('div');
cardMaxKi.classList.add('tr-db-card-data');
cardMaxKi.textContent = "MAX KI: " + data[i].maxKi;
trCardPerson.appendChild(cardMaxKi);
}
})
.catch(err => console.log(err));
}
function limpaCard() {
let cards = document.querySelectorAll('.tr-db-card-person');
cards.forEach(card => card.remove());
}
</script>Dragon Ball API explicado:
O código é dividido em três partes: CSS, HTML e JavaScript.
CSS: O CSS está definindo o estilo dos elementos na página. Por exemplo, .tr-db-race-btn e #tr-container são estilizados como uma grade com três colunas e um espaço de 10px entre os itens da grade.
HTML: O HTML cria a estrutura da página. Há uma div com a classe tr-db-race-btn que contém vários botões. Cada botão tem um evento onclick que chama a função buscaPorRaca com um argumento de raça específico. Há também uma div com o id tr-container onde os cartões de personagens serão inseridos.
JavaScript: O JavaScript define duas funções, buscaPorRaca e limpaCard.
buscaPorRaca(raca): Esta função faz uma chamada à API de Dragon Ball para buscar personagens de uma raça específica. Para cada personagem retornado, cria umadivpara o personagem e adiciona o nome, imagem e informações de Ki do personagem àdiv. Em seguida, adiciona adivdo personagem aotr-container.limpaCard(): Esta função remove todos os cartões de personagens existentes. É chamada no início debuscaPorRacapara garantir que os cartões de personagens de buscas anteriores sejam removidos antes de adicionar novos cartões.
Conclusão
Nesta página, que está a sua disposição para interagir com o universo Dragon Ball, graças ao serviço online DRAGON BALL-API é possível, não apenas ter acesso às raças do anime do mestre Akira Toriyama , quanto também estudar o código fonte e entender como ele funciona!
Caso você seja iniciante no mundo do desenvolvimento, não deixe de acessar nossas trilhas de estudo, para que você comece do jeito sua carreira de desenvolvedor! Clique e conheça nossas trilhas de aprendizagem:
E para que você continue estudando e evoluindo nada melhor do que um computador com os melhores preços, marcas renomadas e confiança na entrega que só a Amazon oferece. Clique aqui é veja as melhores promoções das melhores marcas de notebooks e com a melhor entrega do mercado!!!
E para você que já adquiriu seu novo notebook para estudar, precisará validar seus códigos, e para isso você precisará de uma plataforma de host completa. Clique aqui e conheça a Hostinger, a hospedagem de sites com potência de verdade!!!
