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 · Julho 21, 2022

HTML

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

Lista de Dogs

</p>

</div>

</div>

</p>

</div>

</div>

</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'

}

]

Entrar

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

Pergunta

viniciusbairos

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades