- Forms 6:51
- Forms 3 questions
- Cookies 7:27
- Cookies 4 questions
- Set a Cookie 3 objectives
- Starting the Builder 6:02
- Create a JSON String 2 objectives
- Parse a JSON string 1 objective
- Items 6:27
- Looping Through Items 1 objective
- Drawing the Bear 4:32
- Loop Nested Items 2 objectives
- Flash Messages 5:28
- Flash a Message 3 objectives
- Outro 0:26
- Review: Flask Basics 8 questions
Preview
Video Player
00:00
00:00
Items
6:27With 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