console.log(deckId)
})
}
newDeckBtn.addEventListener("click", handleClick)
/**
* Challenge:
*
* Display the number of cards remaining in the deck on the page
* Hint: Check the data that comes back when we draw 2 new cards
* to see if there's anything helpful there for this task (😉)
*/
drawCardBtn.addEventListener("click", () => {
fetch(`https://apis.scrimba.com/deckofcards/api/deck/${deckId}/draw/?count=2`)
.then(res => res.json())
.then(data => {
cardsContainer.children[0].innerHTML = `
<img src=${data.cards[0].image} class="card" />
`
cardsContainer.children[1].innerHTML = `
<img src=${data.cards[1].image} class="card" />
`
const winnerText = determineCardWinner(data.cards[0], data.cards[1])
header.textContent = winnerText
})
})
function determineCardWinner(card1, card2) {
const valueOptions = ["2", "3", "4", "5", "6", "7", "8", "9",
"10", "JACK", "QUEEN", "KING", "ACE"]
const card1ValueIndex = valueOptions.indexOf(card1.value)
const card2ValueIndex = valueOptions.indexOf(card2.value)
if (card1ValueIndex > card2ValueIndex) {
return "Card 1 wins!"
} else if (card1ValueIndex < card2ValueIndex) {
return "Card 2 wins!"
} else {
return "War!"
}
}
let deckId
const cardsContainer = document.getElementById("cards")
const newDeckBtn = document.getElementById("new-deck")
const drawCardBtn = document.getElementById("draw-cards")
const header = document.getElementById("header")
function handleClick() {
fetch("https://apis.scrimba.com/deckofcards/api/deck/new/shuffle/")
.then(res => res.json())
.then(data => {
deckId = data.deck_id