<div id="contenedor" class="container ">
<button id="empezar" class="btn btn-success">Empezar</button>
<p id="mensaje"></p>
<button id="carta" class="btn btn-success">Sacar una carta</button>
<button id="carta5" class="btn btn-success">Sacar cinco cartas</button>
<div id="cartas"></div>
</div>
<script src="js/test.js"></script>
document.getElementById('empezar').addEventListener('click', empezar)
document.getElementById('carta').addEventListener('click', carta)
document.getElementById('carta5').addEventListener('click', cartas)
let baraja
function carta () {
fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=1')
.then(function (response) {
return response.text()
})
.then(function (html) {
console.log(html)
const resultado = JSON.parse(html)
console.log(resultado)
const imagen = document.createElement('img')
imagen.src = resultado.cards[0].image
document.getElementById('cartas').appendChild(imagen)
})
.catch(function (err) {
console.log('Error: ', err)
})
}
function empezar () {
fetch('https://deckofcardsapi.com/api/deck/new/shuffle/?deck_count=1')
.then(function (response) {
return response.text()
})
.then(function (html) {
console.log(html)
const resultado = JSON.parse(html)
console.log(resultado)
baraja = resultado.deck_id
document.getElementById('mensaje').innerHTML = 'Tienes la baraja: ' + baraja
})
.catch(function (err) {
console.log('Error: ', err)
})
}
function cartas () {
fetch('https://deckofcardsapi.com/api/deck/' + baraja + '/draw/?count=5')
.then(function (response) {
return response.text()
})
.then(function (html) {
const resultado = JSON.parse(html)
for (let i = 0; i < resultado.cards.length; i++) {
const imagen = document.createElement('img')
imagen.src = resultado.cards[i].image
document.getElementById('cartas').appendChild(imagen)
}
})
.catch(function (err) {
console.log('Error: ', err)
})
}