lavebug/deckofcards.html

## deckofcards.html
<!doctype html>
<html>
<head>
  <title>axios - get example</title>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <style>
    .btn-primary {
      color: #fff;
      background-color: #428bca;
      border-color: #357ebd;
    }
    .btn {
      display: inline-block;
      padding: 6px 12px;
      margin-bottom: 0;
      font-size: 14px;
      font-weight: 400;
      line-height: 1.42857143;
      text-align: center;
      white-space: nowrap;
      vertical-align: middle;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      background-image: none;
      border: 1px solid transparent;
      border-radius: 4px;
    }
    .btn:first-child {
      margin-right: 25px;
    }
    td {
      height: 70px;
      vertical-align: bottom;
    }
    span {
      display: inline-block;
      height: 0;
    }
    span::after {
      clear: both;
    }
    img {
      width: 45px;
      margin: 0 5px;
    }
  </style>
</head>
<body>
  <h1>Deck of Cards</h1>
  <h3>Shuffle and sort cards by suit untill 4 Queens are found.</h3>
  <table border="0">
    <tr>
      <td>SPADES: </td>
      <td>[ '
        <span id="SPADES"></span>' ]</td>
    </tr>
    <tr>
      <td>CLUBS: </td>
      <td> [ '
        <span id="CLUBS"></span>' ]</td>
    </tr>
    <tr>
      <td>HEARTS: </td>
      <td>[ '
        <span id="HEARTS"></span>' ]</td>
    </tr>
    <tr>
      <td>DIAMONDS: </td>
      <td>[ '
        <span id="DIAMONDS"></span>' ]</td>
    </tr>
  </table>
  <br>
  <br>
  <div>
    <button type="button" class="btn btn-primary" onclick="drawCards();">Lets Shuffle</button>
    <button type="button" class="btn btn-primary" onclick="reset();">Reset</button>
  </div>

  <script>
    let url = "https://deckofcardsapi.com/api/deck";
    let deckID = "";
    let queenCount = 0;

    // Reset for a fresh draw
    function reset() {
      let result = document.getElementsByTagName('span');
      for (a = 0; a < result.length; a++) {
        result[a].innerHTML = '';
      }
      reShuffleDeck();
      queenCount = 0;
    }

    // Draw 2 cards
    function drawCards() {
      axios.get(`${url}/${deckID}/draw/?count=2`)
        .then(function (response) {
          let resCards = response.data.cards;
          if (queenCount < 4) { // Call drawCards until we get 4 queens
            for (i = 0; i < 2; i++) {
              document.getElementById(resCards[i].suit).innerHTML += '<img src="' + resCards[i].image + '">,';
              if (resCards[i].value == "QUEEN") {
                queenCount++;
              }
            }
            setTimeout(function () {
              drawCards();
            }, 1000);
          }
        })
        .catch(function (err) {
          // handle error
          console.log('drawCards' + err);
        });
    }

    // Reshuffle the deck
    function reShuffleDeck() {
      axios.get(`${url}/${deckID}/shuffle/`)
        .then(function (response) {})
        .catch(function (err) {
          // handle error
          console.log('reShuffleDeck' + err);
        });
    }

    // Get deck id
    (function getDeckID() {
      if (localStorage.hasOwnProperty('localDeckId')) {
        deckID = localStorage.getItem("localDeckId");
      } else {
        axios.get(`${url}/new/shuffle/?deck_count=1`)
          .then(function (response) {
            localStorage.setItem('localDeckId', response.data.deck_id);
            deckID = response.data.deck_id;
          })
          .catch(function (err) {
          // handle error
          console.log('getDeckID' + err);
        });
      }
      reShuffleDeck();
    })();
  </script>
</body>

</html>
	<!doctype html>
	<html>
	<head>
	<title>axios - get example</title>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<style>
	.btn-primary {
	color: #fff;
	background-color: #428bca;
	border-color: #357ebd;
	}
	.btn {
	display: inline-block;
	padding: 6px 12px;
	margin-bottom: 0;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.42857143;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	cursor: pointer;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	background-image: none;
	border: 1px solid transparent;
	border-radius: 4px;
	}
	.btn:first-child {
	margin-right: 25px;
	}
	td {
	height: 70px;
	vertical-align: bottom;
	}
	span {
	display: inline-block;
	height: 0;
	}
	span::after {
	clear: both;
	}
	img {
	width: 45px;
	margin: 0 5px;
	}
	</style>
	</head>
	<body>
	<h1>Deck of Cards</h1>
	<h3>Shuffle and sort cards by suit untill 4 Queens are found.</h3>
	<table border="0">
	<tr>
	<td>SPADES: </td>
	<td>[ '
	<span id="SPADES"></span>' ]</td>
	</tr>
	<tr>
	<td>CLUBS: </td>
	<td> [ '
	<span id="CLUBS"></span>' ]</td>
	</tr>
	<tr>
	<td>HEARTS: </td>
	<td>[ '
	<span id="HEARTS"></span>' ]</td>
	</tr>
	<tr>
	<td>DIAMONDS: </td>
	<td>[ '
	<span id="DIAMONDS"></span>' ]</td>
	</tr>
	</table>
	<br>
	<br>
	<div>
	<button type="button" class="btn btn-primary" onclick="drawCards();">Lets Shuffle</button>
	<button type="button" class="btn btn-primary" onclick="reset();">Reset</button>
	</div>

	<script>
	let url = "https://deckofcardsapi.com/api/deck";
	let deckID = "";
	let queenCount = 0;

	// Reset for a fresh draw
	function reset() {
	let result = document.getElementsByTagName('span');
	for (a = 0; a < result.length; a++) {
	result[a].innerHTML = '';
	}
	reShuffleDeck();
	queenCount = 0;
	}

	// Draw 2 cards
	function drawCards() {
	axios.get(`${url}/${deckID}/draw/?count=2`)
	.then(function (response) {
	let resCards = response.data.cards;
	if (queenCount < 4) { // Call drawCards until we get 4 queens
	for (i = 0; i < 2; i++) {
	document.getElementById(resCards[i].suit).innerHTML += '<img src="' + resCards[i].image + '">,';
	if (resCards[i].value == "QUEEN") {
	queenCount++;
	}
	}
	setTimeout(function () {
	drawCards();
	}, 1000);
	}
	})
	.catch(function (err) {
	// handle error
	console.log('drawCards' + err);
	});
	}

	// Reshuffle the deck
	function reShuffleDeck() {
	axios.get(`${url}/${deckID}/shuffle/`)
	.then(function (response) {})
	.catch(function (err) {
	// handle error
	console.log('reShuffleDeck' + err);
	});
	}

	// Get deck id
	(function getDeckID() {
	if (localStorage.hasOwnProperty('localDeckId')) {
	deckID = localStorage.getItem("localDeckId");
	} else {
	axios.get(`${url}/new/shuffle/?deck_count=1`)
	.then(function (response) {
	localStorage.setItem('localDeckId', response.data.deck_id);
	deckID = response.data.deck_id;
	})
	.catch(function (err) {
	// handle error
	console.log('getDeckID' + err);
	});
	}
	reShuffleDeck();
	})();
	</script>
	</body>

	</html>