Making a Card API Project | Day 17

This a An Exercise Problem From the Colt Steele React Course

Problem Statement ->
Build an app that displays a deck of cards, one card at a time. When the page loads, send a request to https://deckofcardsapi.com/api/deck/new/shuffle to create a ne…


This content originally appeared on DEV Community and was authored by Web.Developer.io

This a An Exercise Problem From the Colt Steele React Course

Problem Statement ->
Build an app that displays a deck of cards, one card at a time. When the page loads, send a request to https://deckofcardsapi.com/api/deck/new/shuffle to create a new deck. Store the Deck ID it gives you, so you can make further requests to retreive each card image. Add a button to your app that allows a user to draw a new card.

When a user clicks the button, send another request to the API, this time to https://deckofcardsapi.com/api/deck/${deck_id}/draw/. (make sure to use your actual deck ID). Use the data included in the response to display a new card image, and make sure to include an informative alt attribute.

Every time the user clicks, the app should display a new card until the deck is empty. Make sure to tell the user there are no cards left!

Here’s how this might look (with styling added):

Cards Project

This app Consists of 3 Component App,Deck,Cards
Deck Component is Stateful and stores all the State and pass it to the Cards using the Props.

Solution 👇
https://github.com/Developer-io-web/Card-api-Project

Happy Coding 🙂


This content originally appeared on DEV Community and was authored by Web.Developer.io


Print Share Comment Cite Upload Translate Updates
APA

Web.Developer.io | Sciencx (2022-01-24T19:37:16+00:00) Making a Card API Project | Day 17. Retrieved from https://www.scien.cx/2022/01/24/making-a-card-api-project-day-17/

MLA
" » Making a Card API Project | Day 17." Web.Developer.io | Sciencx - Monday January 24, 2022, https://www.scien.cx/2022/01/24/making-a-card-api-project-day-17/
HARVARD
Web.Developer.io | Sciencx Monday January 24, 2022 » Making a Card API Project | Day 17., viewed ,<https://www.scien.cx/2022/01/24/making-a-card-api-project-day-17/>
VANCOUVER
Web.Developer.io | Sciencx - » Making a Card API Project | Day 17. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/01/24/making-a-card-api-project-day-17/
CHICAGO
" » Making a Card API Project | Day 17." Web.Developer.io | Sciencx - Accessed . https://www.scien.cx/2022/01/24/making-a-card-api-project-day-17/
IEEE
" » Making a Card API Project | Day 17." Web.Developer.io | Sciencx [Online]. Available: https://www.scien.cx/2022/01/24/making-a-card-api-project-day-17/. [Accessed: ]
rf:citation
» Making a Card API Project | Day 17 | Web.Developer.io | Sciencx | https://www.scien.cx/2022/01/24/making-a-card-api-project-day-17/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.