​​React Challenge Webinar 2.2: Radio Group (React State)

​​Webinar video

​​Links

​​Pictures

​​
 
User-uploaded image: image.png
​​
User-uploaded image: robot+2.png
​​
​​
 
User-uploaded image: image.png
​​
User-uploaded image: image.png
​​

​​Assignments

​​1. Counter

​​Make a simple counter like this
​​
 
User-uploaded image: assignment-2.2.1-counter.gif
​​
​​Solution
​​
 
assignment-2.2.1-counter-solution - CodeSandbox
The online code editor tailored for web applications
assignment-2.2.1-counter-solution - CodeSandbox •
​​

​​

​​2. Card Deck

​​Use your result from the last webinar assignment, or fork this sandbox: https://codesandbox.io/s/assignment-222-card-deck-starter-7gbqe
​​
​​Requirements:
  1. ​​Create a Card​ component
  1. ​​Make a deck of cards
​​
 
User-uploaded image: assignment-2.2.2-card-deck.gif
​​
​​Hints
  • ​​Use the following array of cards (or feel free to use your own images)
​​const cards = [
​​  {
​​    image:
​​    "https://cdn.glitch.com/071e5391-90f7-476b-b96c-1f51f7106b0c%2Fbird_fat_black_medium.svg?v=1557968629951",
​​    backgroundColor: "#FF88AA"
​​  },
​​  {
​​    image:
​​    "https://cdn.glitch.com/071e5391-90f7-476b-b96c-1f51f7106b0c%2Fdesigner.svg?v=1560273527081",
​​    backgroundColor: "#66BB66"
​​  },
​​  {
​​    image:
​​    "https://cdn.glitch.com/071e5391-90f7-476b-b96c-1f51f7106b0c%2Fbird_strong_small.svg?v=1560032432704",
​​    backgroundColor: "#55CCFF"
​​  }
​​]
  • ​​Note the order of cards displayed in the browser is reversed. This is due to the way HTML works — the last item appears on the top. You can use cards.reverse()​ to fix that.
​​
​​Solution
​​
 
assignment-2.2.2-card-deck-solution - CodeSandbox
The online code editor tailored for web applications
assignment-2.2.2-card-deck-solution - CodeSandbox •
​​
​​

​​3. Card Deck Continued

​​Fork this sandbox: https://codesandbox.io/s/assignment-223-card-deck-thumbups-starter-s2cel
​​