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