Transcript from the "Adding Choice Buttons Exercise" Lesson
>> What we need to do now is we have two more TODOs to work through. And they're gonna require us to put all of our tools to use. We are going to scroll down and take a look at what's happening in our file. So, so far, we've implemented some helper functions.
[00:00:19] So far, we haven't actually done anything in our script here, we've just declared a bunch of functions. If you'll notice, what we've got here is a style of writing code that has a lot more functions going on that before where we had a lot of just like lines of code one after another.
[00:00:36] And this is starting to get at what we mentioned at the beginning. That writing code in a functional style, where you're trying to do everything with functions and you're trying to make those functions as independent from values in the rest of the program that might be changing over time as possible.
[00:01:36] And then we want to render or display it on the screen, in the webpage, in the browser in many cases, for the viewer to see. And we tend to unlike in our quiz example where we were kind of computing the data we need and rendering it to the text of elements at the same time, Here in this new program, we're splitting up that work a little bit.
[00:02:02] So we're doing the data fetching and the transformations on that data like turning a string into some other string or getting a list of choices. We're doing that work in one part of our program, and then we're displaying that, or actually putting it up in the page and another part of our program.
[00:02:43] We noticed, In our starter, there's nothing here, there's no buttons, we need some. In the finished one, we had buttons and we have a picture. So we need to add all that stuff. And so what we've got here, and this is just because we already know how to do this, we're not gonna walk through it.
[00:03:07] We were rendering some buttons. We're creating a button handler function that's doing something very similar to what we were doing before with the correct and incorrect classes, based on a comparison to the correct answer. And it's also just adding one incorrect button and one correct button, if we need to show that the correct answer was somewhere else, but you know how all that works now.
[00:03:56] We can even create entirely new elements that didn't exist before. So that's what we're gonna do. We're going to create, we're gonna take each of the choices in our choices array. Which is gonna be an argument to this render buttons function. Because that's some data that we've already computed, and we're gonna pass it in to our render buttons function.
[00:04:20] And we also know what the correct answer is. And that's how we're figuring out what to do with our button handler. So what we're gonna do is we're gonna loop over our choices in our choice array somehow. And then create for each element, a button element whose name, and value, and text content properties are all like poodle standard, or beagle, or whatever the thing is for that choice.
[00:04:46] And then we're gonna attach a click event listener. And finally, we're gonna actually insert my element into the page. So in order to do this, we're gonna need a way to actually create a new element in the DOM. And perhaps shockingly, that is called createElement. So we can call Document.createElement button to create a new button element, and then mess with its properties.