Ir para conteúdo
Fórum Script Brasil
  • 0

Me ajudem a criar um botão, que toda vez que clicar nele ele altera cada quadrado de informações, foto, tudo, ultilizando a API se alguém conseguir fico agradecido


viniciusbairos

Pergunta

HTML 

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="assets/css/bootstrap.css">
        <script src="https://unpkg.com/feather-icons"></script>
    </head>
    <body class=".bg-primary.bg-gradient">
        <div class="container">
            <div class="row">
                <div class="col">
                    <p class="fs2">
                        Lista de Dogs
                    </p>
                </div>
            </div>
                <div class="col">
                    <img id="imagemDog" class="img-fluid" src="" alt="">
                </div>
            </div>
            <div class="row">
                <div class="col">
                    <p id="texto">
 
                    </p>
                </div>
            </div>
            <div class="row" id="raca">
               
            </div>
        </div>
 
        <script src="assets/js/bootstrap.js"></script>
        <script src="assets/js/script.js"></script>
    </body>
</html>

SCRIPT

function httpGet(theUrl) {
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open("GET", theUrl, false); // false for synchronous request
    xmlHttp.setRequestHeader('x-api-key', '4d7dda74-435d-4152-901b-32ae45d8a9e8');
    xmlHttp.send(null);
    return xmlHttp.responseText;
}
 
var resultado = JSON.parse(httpGet('https://api.thedogapi.com/v1/images/search'));
 
function listarCategorias() {
    var listaCategorias = httpGet('https://api.thedogapi.com/v1/categories');
    listaCategorias = JSON.parse(listaCategorias);
    console.log(listaCategorias);
    console.log(typeof(listaCategorias));
 
   
    for (var indice = 0; indice < listaCategorias.length; indice++) {
        document.getElementById('texto').innerHTML =
            document.getElementById('texto').innerHTML + ", " +
            listaCategorias[indice].name;
    }
   
 
}
 
function listarRacas() {
    var listaRacas = httpGet('https://api.thedogapi.com/v1/breeds');
    listaRacas = JSON.parse(listaRacas);
    console.log(listaRacas);
 
    for (var indice = 1; indice < listaRacas.length; indice++) {
 
        var iconeCheck = document.createElement('i');
        iconeCheck.setAttribute('data-feather', 'check');
        iconeCheck.setAttribute('class', 'text-success');
 
        var iconeX = document.createElement('i');
        iconeX.setAttribute('data-feather', 'x');
        iconeX.setAttribute('class', 'text-danger');
 
        var conteudoImagem = listaRacas[indice].image;
        var imagemRaca = document.createElement('img');
        imagemRaca.setAttribute('class', 'img-fluid card-img-top');
        if (conteudoImagem != undefined) {
            imagemRaca.setAttribute('src', conteudoImagem.url);
        }
 
        var nomeRaca = document.createElement('p');
        nomeRaca.setAttribute('class', 'fs-2');
        nomeRaca.innerHTML = listaRacas[indice].name;
 
        var descricaoRaca = document.createElement('p');
        descricaoRaca.setAttribute('class', 'fs-6 text-truncate');
        descricaoRaca.innerHTML = listaRacas[indice].description;
 
        var temRaboRaca = document.createElement('p');
        temRaboRaca.setAttribute('class', 'fs-6');
        temRaboRaca.innerHTML = "Tem rabo? ";
        if (listaRacas[indice].suppressed_tail == 0) {
            temRaboRaca.appendChild(iconeCheck);
        } else {
            temRaboRaca.appendChild(iconeX);
        }
 
        var temperamentRaca = document.createElement('p');
        temperamentRaca.setAttribute('class', 'badge bg-secondary text-truncate');
        temperamentRaca.innerHTML = listaRacas[indice].temperament;
 
        var botaoRaca = document.createElement('a');
        botaoRaca.setAttribute('class', 'btn btn-primary');
        botaoRaca.setAttribute('href', listaRacas[indice].wikipedia_url);
        botaoRaca.innerHTML = 'Acesse mais informações'
 
        var itemRaca = document.createElement('div');
        itemRaca.setAttribute('class', 'card-body');
        itemRaca.appendChild(nomeRaca);
        itemRaca.appendChild(descricaoRaca);
        itemRaca.appendChild(temperamentRaca);
        itemRaca.appendChild(temRaboRaca);
        itemRaca.appendChild(botaoRaca);
       
        var cardRaca = document.createElement('div');
        cardRaca.setAttribute('class', 'col-4 card py-2 my-2 border-2 rounded-2');
        cardRaca.appendChild(imagemRaca);
        cardRaca.appendChild(itemRaca);
 
        var listaRacaElemento = document.getElementById('raca')
        listaRacaElemento.appendChild(cardRaca);
    }
}
 
listarRacas();
feather.replace();
 
[
    {
        'nome': 'Joana',
        'idade': 15,
        'cidade': 'Condor'
    },
    {
        'nome': 'Paulo',
        'idade': 22,
        'cidade': 'Ajuricaba'
    },
    {
        'nome': 'Carlos',
        'idade': 19,
        'cidade': 'Pejuçara'
    }
]



 

 

Link para o comentário
Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Até agora não há respostas para essa pergunta

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...