Building an Accessible Memory Game with React - From Data Fetching to Error Handling

Building an Accessible Memory Game with React - From Data Fetching to Error Handling

freeCodeCamp.org via freeCodeCamp Direct link

1:42:58 - Identify selected & matched cards in MemoryCard

18 of 42
Previous
Next

18 of 42

1:42:58 - Identify selected & matched cards in MemoryCard

Class Central Classrooms beta

YouTube videos curated by Class Central.

Classroom Contents

Building an Accessible Memory Game with React - From Data Fetching to Error Handling

Automatically move to the next video in the Classroom when playback concludes
  1. 1 0:00:00 - Intro
  2. 2 0:06:00 - Boilerplate code
  3. 3 0:11:53 - Fetch data from API
  4. 4 0:17:18 - Store API data in state
  5. 5 0:21:19 - Aside: HTML entities
  6. 6 0:26:08 - Render memory cards with API data
  7. 7 0:30:45 - Issue with emojisData
  8. 8 0:33:29 - Get random emojis pt. 1
  9. 9 0:43:32 - Get random emojis pt. 2
  10. 10 0:49:32 - Duplicate and shuffle emojis
  11. 11 0:55:10 - Side note: Address future discrepancies
  12. 12 0:58:59 - Select a memory card pt. 1
  13. 13 1:05:22 - Select a memory card pt. 2
  14. 14 1:10:37 - Select a memory card pt. 3
  15. 15 1:20:16 - Detect matching cards
  16. 16 1:28:50 - Are all memory cards matched?
  17. 17 1:34:11 - Create EmojiButton component
  18. 18 1:42:58 - Identify selected & matched cards in MemoryCard
  19. 19 1:48:38 - Conditional memory card content
  20. 20 1:54:44 - Conditional memory card styling
  21. 21 2:04:33 - Disabled attribute & conditional event handler
  22. 22 2:12:01 - Aside: aria-label & aria-live
  23. 23 2:21:50 - Add aria-label to EmojiButton
  24. 24 2:31:00 - Side note: Renamed state variable
  25. 25 2:32:32 - Create AssistiveTechInfo component
  26. 26 2:41:29 - Aside: aria-atomic
  27. 27 2:47:52 - Make AssistiveTechInfo component accessible
  28. 28 2:50:46 - Create GameOver component
  29. 29 2:54:05 - Add button to GameOver component
  30. 30 3:02:07 - Accessibility issue in GameOver component
  31. 31 3:03:45 - Aside: Focus as an accessibility tool
  32. 32 3:14:14 - Make GameOver component accessible
  33. 33 3:18:11 - Identify error handling issue
  34. 34 3:21:10 - Handle errors with useState
  35. 35 3:26:52 - Create and render ErrorCard component
  36. 36 3:34:24 - Refactor App to use formData
  37. 37 3:42:18 - Create form elements
  38. 38 4:00:19 - Save form selections in state
  39. 39 3:57:44 - Refactor form pt. 1
  40. 40 4:05:15 - Refactor form pt. 2
  41. 41 4:12:13 - Improve accessibility of Form component
  42. 42 4:20:50 - Outro

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Sign up for free
Someone learning on their laptop while sitting on the floor.