Items6:27 with Kenneth Love
With the power of `for` loops and `if` conditions in our templates, we should be able to show the rest of the options available for creating our bears.
'Kay. So, we should have a lot more options down 0:00 here to pick from. 0:03 If we look at our options file, there's footwear and 0:04 glasses and hats, there's all sorts of stuff. 0:07 So, let's go down here and 0:09 let's add in the bit that's gonna show all of those options. 0:11 So, there's kind of a lot to this so let's just get started and 0:15 we're gonna go over it. 0:20 Most of this is stuff we've already done. 0:20 So, we're gonna do a loop. 0:23 So, we want to look at each of the categories, and then there's choices for 0:26 those categories in options.items. 0:30 All right? So, we're 0:35 just looping over the things that are in the I, options dictionary. 0:36 So now, inside here, I've got to do an if 0:42 because we have colors as one of our optional categories. 0:49 And, we don't want to be doing this if we're working on colors. 0:53 We want to skip colors. 0:58 I wish there was a better way of doing this. 1:00 I couldn't find one. 1:01 If you happen to find one, let me know about it. 1:02 All right. 1:04 So, we're gonna make our divs. 1:05 A div is gonna be grid-100, and it's a row. 1:07 And, we're gonna make it a new div, which is gonna be grid-20. 1:13 And, it's gonna have a p tag in it, which has a class of category-title. 1:21 And then, we're gonna print out the category, and we're gonna title case it. 1:30 All right. Let's see what 1:37 that does just for right now. 1:38 Refresh. 1:41 Cool, we've got shirts, pants, glasses, hat, footwear. 1:42 Blah, blah, blah. 1:46 All right. Cool. 1:46 So now, we need to add more to this. 1:48 Obviously. 1:52 So, we'll add a new grid here of 80, cuz 20 plus 80 is 100. 1:53 And, inside here, were gonna put a new input type of radio. 2:00 And, our ID is gonna be no underscore whatever the category is, so 2:05 like no foot wear. 2:10 And, were gonna give it a name of whatever that category is, and 2:12 were gonna give it a value of nothing,. 2:17 And then, if saves.getCategory comes back as nothing. 2:20 If it's a false value, then we're gonna check this one. 2:31 Cuz that way, if they haven't picked one, then we want nothing to show up. 2:38 And then, we're gonna put in the label for this. 2:43 [SOUND] And, that's the four, and 2:46 then, we're gonna put in an image, 2:51 and this is gonna be static/img/no-selection.svg. 2:57 And then, we're gonna close our label. 3:06 All right. 3:09 Tell me something is wrong. 3:11 What's wrong? 3:13 Nope. I didn't close the name. 3:16 There we go. All right. 3:19 Let's refresh this. 3:21 See what we get. 3:22 All right. Cool. 3:23 So, we have this. 3:24 No shirts, thing. 3:25 All right. So, 3:30 we have no shirts, no pants, no nothing selected. 3:31 All right. 3:35 That's true, we didn't build that stuff. 3:36 okay. 3:39 So now, what about all the rest of the choices. 3:40 Well, let's loop through those too. 3:44 So, for choice in choices, and we'll end that for. 3:46 So, for all the choices that are available, 3:53 we're basically gonna do this same thing. 3:55 So, let's do our input, of a radio button. 3:59 And, our id is going to be category, 4:05 and then choice, and then icon, 4:11 and then, oh, lets see. 4:17 And then, let's give a name of whatever the category is. 4:22 And, the value will be whatever the choice is. 4:28 [BLANK_AUDIO] 4:31 And again, we wanna have this if. 4:33 And so, if saves.get of whatever the category is, 4:37 is equal to whatever the choice is. 4:41 So, if in that category, they've selected this thing. 4:44 Then, we want to do checked. 4:48 And, we want to end our if. 4:52 End the input. 4:55 And then, make our label for equals 4:56 category dash choice underscore icon. 5:02 And, then again, we're gonna do our image. 5:10 And, it's gonna be a static img. 5:12 Whatever the category is, 5:16 hyphen, whatever the choice is, .svg. 5:20 So, this is where it comes in really handy having things named in 5:26 a predictable manner. 5:29 Okay, let's refresh. 5:32 Now, let's see what we get. 5:34 Wow, look at all those choices. 5:34 That's pretty awesome. 5:36 And, it should work. 5:38 So, let's find out. 5:41 So, I'm gonna give him an orange shirt, and 5:42 some black shorts, and some blue glasses, and a. 5:44 Cool headband and some sandals. 5:49 Update. 5:53 Hm. 5:57 Well, it saved. 5:58 It didn't give us any errors but I don't think things got checked. 6:01 So, lets look and see if we can figure out what we did differently. 6:05 I said choice, and not choices. 6:12 [NOISE] Hey, cool, there's our stuff checked. 6:14 So, we didn't draw the bear, but we checked everything. 6:19 Let's draw the bear in the next video. 6:24
You need to sign up for Treehouse in order to download course files.Sign up