#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 and we made already a createButtons stub which will be called when we set the state
0:11
when we reset the game. So let's make an array of buttons and loop over the alphabet an alphabet we defined here as a constant.
0:53
There are quite some things going on here. I loop over the alphabet, and I do it with enumerate and that's because every button has a unique key.
1:02
So we give it the index or the number of the iteration, as a unique identifier. Again, HTML uses class, but JSX uses className camelCase
1:14
to indicate a class so we can style the letter with CSS. And as you remember, I provided some CSS and here I give the buttons
1:26
a width and a height of 50 pixels and a greater font size, a background a nice rounded border, and some margin.
1:36
Every letter button has an onclick handler. This is going to call this matchcar which is a method I will define in a second.
1:45
And I will uppercase the letter as shown to the user. Those are buttons so they natively support clicks in the browser.
1:54
So now we have to define the matchcar helper to do something when a button in clicked. Again, I use an arrow function.
2:10
And for now, just balance what we get upon click. So the event should have a target and the target should have an inner HTML.
2:22
Let's see what this gives us. Nice, the alphabet has 26 buttons. I click a button, and it echoes the letter I clicked.
2:33
Let's make the game a little bit more narrow which I probably forgot in the CSS. So let's give this a zero outer margin on the right and the left side
2:46
and make the body a width of 800 pixels. You could even go lower, to 600, nice. In the next video, we're going to do the bulk of the work
3:02
because when we click a letter we want this letter to be matched with the letters in the mask or the movie we guessed
3:08
and reveal those letters if they match. And that involves, of course updating the state of the application.