Adding Choice Buttons Exercise

[00:00:00]
>> 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:00:56]
This is a little bit what we're getting at. And as I said, there's other courses you can take including one that I have on functional programming first steps that talk more about that. But what we're starting to get at is something that looks a little bit more similar to the type of code you often see written in JavaScript frameworks.

[00:01:11]
Like for example react. And so if we start scrolling down now from our fetch message, we'll see that we have some functions that are already done for us like render buttons. Now this render keyword shows or word pops up a lot. And in web development, especially in JavaScript development, we're often what we wanna do, is we wanna compute a bunch of stuff, bunch of data that we need.

[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:25]
So this is just some high context around like, we're starting to move towards more of the vibe that you get when you're writing JavaScript with a framework like React, where these are separated. So what we've got here is a render buttons function that adds the multiple choice buttons to the page.

[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:34]
And we've got now a container in our document, Somewhere, a div that's got id="options", which is where our button elements are gonna go. But unlike in our previous example, we don't actually have any button elements on the page. What gives? Well, as with JavaScript, we can do whatever we want to the DOM.

[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.