Ir para conteúdo
Fórum Script Brasil

viniciusbairos

Membros
 Perfil  Explorar Conteúdo

  • Total de itens

    1

  • Registro em

  • Última visita

 Tipo de Conteúdo 

Posts postados por viniciusbairos

  1. 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

    em Repositório de scripts - Java

    Postado

    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'
        }
    ]



     

     

×
×
  • Criar Novo...