fetch + JSON + API: Cartas

<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)
    })
}

Publicado por

Avatar del usuario

Juan Pablo Fuentes

Formador de programación y bases de datos