My first API Project.

Here i am going to talk about how i came to build the API i did and what challenges i faced while building it. I was going to do a D&D character page when you click on a button you would have got a different character and a weapon and a portion. But it didn't have the data i needed to do it. So i decided on a simple deck of cards with functionality. Here i added the fetch function where it produced a different card every time you click the button. I did come across a few hiccups while writing the code. Which doesn't make sense. It was linking my style page. Because all i did was delete it and coded it again and it worked. Here is a bit of code i used for the function. function changeCard() {
fetch('https://deckofcardsapi.com/api/deck/new/draw/?count=2')
.then(function(response) {
return response.json();
})
.then(function(json) {
console.log(json)
console.log(Your card is the ${json.cards[0].value} of ${json.cards[0].suit});

let h3 = document.createElement('h3')
h3.textContent = `Your card is the ${json.cards[0].value} of ${json.cards[0].suit}`;
let body = document.getElementById('body');
body.appendChild(h3);

  let img = document.createElement('img');
  img.setAttribute('src', `${json.cards[0].image}`);
  body.appendChild(img);

});

let button = document.getElementById("try")
button.addEventListener("click", changeCard);

And the code for the button i added. I really like the fetch function and how you are able to pull the data using it.