This course has been updated! We now recommend you take the AWS for Front-End Engineers (ft. S3, Cloudfront & Route 53) course.

Check out a free preview of the full Zero to Production Node.js on Amazon Web Services course:
The "Exercise 6 Solution Part 2" Lesson is part of the full, Zero to Production Node.js on Amazon Web Services course featured in this preview video. Here's what you'd learn in this lesson:

Kevin continues looking at the solution to Exercise 6. In this part he implements the light and dark themes for the Todo user interface. He also adds two radio buttons for toggling between the light and dark themes.

Get Unlimited Access Now

Transcript from the "Exercise 6 Solution Part 2" Lesson

[00:00:00]
>> [MUSIC]

[00:00:03]
>> Kevin Whinnery: So that was the fix that we had submitted for completing that particular issue, and that was awesome. It looks like we might have some other ones here.
>> Kevin Whinnery: Okay, so we have a,
>> Kevin Whinnery: Slightly different one here. It looks like this was maybe not the theme piece.

[00:00:31] So we can actually do that together right now, since I don't think we have a pull request for the theme challenge specifically. So the other issue that we that we had open was the ability to change the current CSS class of the component.
>> Kevin Whinnery: Let's see here.
>> Kevin Whinnery: Based on some kind of selector, or a radio button, or something that would indicate that we wanna change the current theme of the object.

[00:01:13] So let's go ahead and implement that here together. So at the end of the day, what we'd want to do, here is the the todoapp section, which is the container for the entire interface. And if we look at our todo controller here, the element that we are binding to is this todoapp, which I'm sure many of you already figured out.

[00:01:45] Let me back out the changes here, cuz I haven't done that. So what we want to do is conditionally add a class to this section that kind of contains all of our component. Based on the property of a View model that we'll update through some kind of user interface component.

[00:02:08] So the way that View provides to do this is a couple of things. One thing you could do is you could have a Mustache template here which will put the value of a View model property directly into the class list of the element here. So I could have a themeClass like View model property, and I could drop it directly in the class list there.

[00:02:44] The other thing that I can do, is I can use a bind directive. Which is a little bit more flexible if you have to do complex things with the classes that you're adding based on the state of the model. So one of the ways that we have to do that is with this v-bind directive.

[00:03:09] We can bind the class of that object to be the result of an array of properties, or of an object with properties that we can toggle true or false, indicating whether or not that class should be selected. So in this case, I'll pass in an array of potential model properties.

[00:03:32] In this case, I'll just call it dark, because by default we'll assume that the light theme is essentially the default, and just add some additional styles for the dark theme.
>> Kevin Whinnery: So what we're gonna, excuse we'll do that, we'll actually just call that theme. So we'll be setting up property based on the View model.

[00:04:02] So now I think that's pretty much all we're gonna have to do here in the markup. If we go to the into the actual view, we're gonna add another property called theme. And this is actually where we'll set the default, so the CSS theme for light will be the value by default.

[00:04:22] Or we could actually not have a light theme class at all, and just leave it empty. But we'll have a light theme class, just in case we decide we wanna add some properties for that later. So now what we need to do, actually I lied, we do need to go back to the markup a little bit.

[00:04:43] So down at the bottom here, at the section that has the filters, we'll do something just quick and dirty. There's a few ways you could do this, you could do like an input radio button. Which maybe I will do right now, input radio with a name of a theme, and a value of, say, light.

[00:05:15]
>> Kevin Whinnery: And we'll default that to checked.
>> Kevin Whinnery: And in addition, we're going to bind that to that theme property that we just created.
>> Kevin Whinnery: So that's gonna be our radio option for the light theme. And then we're gonna do something similar for the dark theme.
>> Kevin Whinnery: Although this time, it's not going to be checked, and the value is going to be dark.

[00:05:52]
>> Kevin Whinnery: So we've updated our view model to track this new property called theme. We have a little bit of user interface here to allow people to select a radio button based on their current preference. It's gonna start updating the model, which should start toggling this class up here at the top.

[00:06:19] So let's fire that up, make sure that that worked.
>> Kevin Whinnery: And again, because I was spamming my database, we're gonna have a long way to scroll down to the bottom. But there is our light theme and our dark theme, which doesn't seem to be updating the way that I had thought.

[00:06:56]
>> Kevin Whinnery: Let's see here, name theme, value dark.
>> Kevin Whinnery: Actually, you know what? This is gonna change that to be a Boolean and rather than a string. So that's not exactly what I want in this instance.
>> Kevin Whinnery: All right.
>> Kevin Whinnery: What did I goof up there? Let's see
>> Kevin Whinnery: Yeah, I'm not sure.

[00:07:36] That kinda matches my node over there. So I'm gonna have to dig into that.
>> Speaker 2: [INAUDIBLE] it needs a checkbox.
>> Speaker 3: Does it need to be checkboxed instead of radio?
>> Kevin Whinnery: No, I think the radio is what I want, because I only want one of these to be selected at any given time.

[00:07:51]
>> Speaker 2: Yeah, good point.
>> Kevin Whinnery: What is weirding me out a little bit is the fact that I can't update it. It could be some z-indexing stuff. I'll just, as a Hail Mary, try this and then I will leave you alone to debug this. I do wanna show you how this works though, so I'll do this over the break.

[00:08:15] All right, so there, I think it might have been like a z-indexing issue in the CSS, cuz I am able to start it, click it now. So now, if everything worked according to plan, if I inspect this component.
>> Kevin Whinnery: Open up the body, there is the current class, and.

[00:08:45]
>> Kevin Whinnery: That's not exactly doing what I thought it would do. Let's see, value dark.
>> Kevin Whinnery: All right, so that binding isn't working exactly the way I wanted here. I thought that, I'm gonna have to figure out why it is. Man, that is a bummer. But the idea is, we are going to be toggling this property.

[00:09:12] That's gonna be updating the class on that DOM element, and then we can add CSS styles to make that work. So during the during the next break I'll debug that. I'll check my gist that I had set up for that, figure out why that's not working, and we'll cover that when we when we come back.

[00:09:34] But the next piece that we are gonna tackle was starting to dig into socket I/O little bit. Yes, question.
>> Speaker 4: A quick question about, this a little a while ago, but what about the allDone input? Did you mean?
>> Kevin Whinnery: Done input.
>> Speaker 4: They're just asking, what about the allDone input?

[00:09:54]
>> Kevin Whinnery: Yeah, so.
>> Speaker 4: I can ask them to clarify if.
>> Kevin Whinnery: Yeah what is the allDone, what do we mean by the allDone input?
>> Speaker 4: I'll ask them.
>> Kevin Whinnery: Okay.
>> Speaker 5: The main section, right above the to do's header is bound to an allDone View model. Line 25, I think.

[00:10:23]
>> Speaker 4: I think maybe, is that the completed stuff?
>> Kevin Whinnery: View model, allDone.
>> Speaker 4: Alt toggle all. It's if you you wanna mark all of them as [CROSSTALK].
>> Kevin Whinnery: Yeah, so that is essentially, I think that's gonna be like a Boolean toggle, let's take a look at that.
>> Speaker 4: Maybe it's just saying that it's not saving to the database.

[00:10:42]
>> Kevin Whinnery: The allDone is not saving to the database. That's a good question. I'm not sure off the dome what that's supposed to do, cuz the allDone, this is code that I took from the To Do MVC implementation is not actually a model object. You know what it is?

[00:11:06] I think it's probably a computed property. So allDone is this computed property here, which has a getter and a setter. So it can be treated as if it is a property of the View model associated with the component. And then when it's called in the view, like it is over here, the get function is called.

[00:11:32] So this check box is toggled based on whether or not all of the current to do items have been completed. So that's where that's coming from, it's one of these computed properties.
>> Speaker 6: [COUGH] Did want to save all of them after doing that, you'd just update this for each call back to mark them as modified and [INAUDIBLE].

[00:12:02]
>> Kevin Whinnery: Yes, yes that's what we would do. So you would, in addition to completed for each of them, you would also mark them as modified, and they would all go to the server. Based on the current implementation. So the setter is what happens on change. So if I were to click this check box, then that's when the setter logic gets executed.