DEV Community

Cover image for Making a Card API Project | Day 17
Jayant
Jayant

Posted on

2 1 1

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 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 πŸ™‚

Image of Datadog

The Essential Toolkit for Front-end Developers

Take a user-centric approach to front-end monitoring that evolves alongside increasingly complex frameworks and single-page applications.

Get The Kit

Top comments (1)

Collapse
 
jay818 profile image
Jayant β€’

Day 17 Completed

The Most Contextual AI Development Assistant

Pieces.app image

Our centralized storage agent works on-device, unifying various developer tools to proactively capture and enrich useful materials, streamline collaboration, and solve complex problems through a contextual understanding of your unique workflow.

πŸ‘₯ Ideal for solo developers, teams, and cross-company projects

Learn more

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay