Shuffle and Deal Five Cards
With a deck of cards, shuffle, deal a five-card hand, and display it with a reveal animation. The button, the hand container, and the card CSS (including the animation) are given, in an HTML/CSS/JS template and a React one.
Requirements
- Build a standard 52-card deck;
Deal 5shuffles once and deals from the remaining deck, reshuffling when fewer than five cards remain. - Shuffle uniformly —
arr.sort(() => Math.random() - 0.5)is the classic wrong answer. - Render each card with its rank and suit, red suits in red, and stagger the reveal animation across the five cards.
- Show how many cards are left in the deck.
Hints
Hint 1
Pure logic first, no DOM: createDeck from SUITS × RANKS, an in-place Fisher–Yates shuffle (swap i with a random j ≤ i, from the end down), and deal via splice so the deck really shrinks.
Hint 2
Make every deal produce fresh nodes so the CSS animation restarts: hand.replaceChildren(...cards.map(renderCard)) in vanilla, or a deal counter folded into each card's key in React; set animationDelay per index for the stagger.
Hint 3
Keep the deck between deals — a closure variable in vanilla, a useRef in React, since it never needs to trigger a render — and rebuild and reshuffle it when fewer than five cards remain.