#100DaysOfWeb in Python Transcripts
Chapter: Days 41-44: React: JavaScript user interfaces
Lecture: Creating letter buttons with event handlers

Login or purchase this course to watch this video and the rest of the course contents.
0:00 The next step is to create the alphabetic letter buttons
0:05 and we made already a createButtons stub
0:07 which will be called when we set the state
0:10 when we reset the game.
0:13 So let's make an array of buttons
0:20 and loop over the alphabet
0:24 an alphabet we defined here as a constant.
0:52 There are quite some things going on here.
0:54 I loop over the alphabet, and I do it with enumerate
0:58 and that's because every button has a unique key.
1:01 So we give it the index
1:03 or the number of the iteration, as a unique identifier.
1:08 Again, HTML uses class, but JSX uses className camelCase
1:13 to indicate a class so we can style the letter with CSS.
1:18 And as you remember, I provided some CSS
1:22 and here I give the buttons
1:25 a width and a height of 50 pixels
1:29 and a greater font size, a background
1:32 a nice rounded border, and some margin.
1:35 Every letter button has an onclick handler.
1:39 This is going to call this matchcar
1:41 which is a method I will define in a second.
1:44 And I will uppercase the letter as shown to the user.
1:48 Those are buttons
1:49 so they natively support clicks in the browser.
1:53 So now we have to define the matchcar helper
1:57 to do something when a button in clicked.
2:04 Again, I use an arrow function.
2:09 And for now, just balance what we get upon click.
2:13 So the event should have a target
2:16 and the target should have an inner HTML.
2:21 Let's see what this gives us.
2:22 Nice, the alphabet has 26 buttons.
2:26 I click a button, and it echoes the letter I clicked.
2:32 Let's make the game a little bit more narrow
2:35 which I probably forgot in the CSS.
2:39 So let's give this a zero outer margin
2:43 on the right and the left side
2:45 and make the body a width of 800 pixels.
2:53 You could even go lower, to 600, nice.
2:58 In the next video, we're going to do the bulk of the work
3:01 because when we click a letter
3:03 we want this letter to be matched
3:05 with the letters in the mask or the movie we guessed
3:07 and reveal those letters if they match.
3:10 And that involves, of course
3:11 updating the state of the application.