Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
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.
This video doesn't have any notes.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
'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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up