Fetch JSON data from https://deckofcardsapi.com/ and display a new card everytime the "Deal Card" button is clicked. Selecting some cards is indicated by highlights. Clicking the "Show selected cards" button will only display the highlighted/selected cards. Clicking the "Show discarded cards" button will only display the non-selected cards.
See Sample gameplay: https://www.youtube.com/watch?v=DWx8LdW1k0Q
1.Create html/css/js files that look similar to the above picture.
2.In your JS file create an empty array: let hand = []
3.Create a function called initialize() that uses the fetch command which gets JSON data from https://deckofcardsapi.com/ in order to get the deck_id number (this id will will then be used to later fetch new cards)
4.Inside the initialize function, listen for a click event on the "Deal button" and if clicked, fetch a new card using the appropriate API url
5.Create a render(hand) function that has a parameter 'hand' that represents the array of cards you want to show, and uses the .map and .join method on that array that was passed in in order to display the cards
6.If the user clicks on a card(s), that card(s) is selected/highlighted. This is done by adding a new boolean property to the card object called 'selected'
7.If the user clicks "Show selected cards" button, then only display the selected/highlighted cards by using the filter method
8.If the user clicks "Show discarded cards" button, then only display the non-selected/non-highlighted cards by using the filter method
9.BONUS +1: If the user refreshes the page, use localStorage to get the prior hand and display that instead
10.BONUS +1: Display a running total according to Blackjack rules (figure out how to change value of an Ace from 11 to 1 if needed)
11.BONUS 1+: Create a dealer/opponent who you can play against. It can be as simple as generating a random number, or it can be more complex.