Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Flask Basics!
You have completed Flask Basics!
Preview
We'll draw the bear through the power of transparent images, CSS layering, and our handy `{% if %}` conditions in our templates.
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
So, we have our bear, and we can pick all
of our choices, but
0:00
only the only the color actually gets, you
know, referenced.
0:03
So, how do we draw the bear?
0:09
I like that.
I actually like that.
0:13
Let's go for the yellow.
0:14
Yeah, the yellow is pretty cool.
0:16
All right.
0:17
So, drawing the bear is a little bit more
complicated and
0:18
this is kind of just as a result of how
we're building this in HTML or CSS.
0:21
But it's pretty cool.
0:28
We're gonna go ahead and do it.
0:29
And, I know you'll be able to follow
along.
0:30
So, we have this bear ID div.
0:33
That's where we're drawing the bear.
0:38
That's, that's this big, yellow, currently
yellow, box.
0:39
And, inside that, we have these three
things, which is the bear's body,
0:43
the bear's head, and the bear's nose.
0:46
So, what we want to do is we need to layer
in some more items,
0:48
that will show off whatever it is that the
bear is wearing.
0:52
So, here after the body, we're gonna add a
new div with
0:59
a class of footwear, which I keep
mistyping, so watch out for that.
1:04
And, the source is gonna be
static/img/bear_items_footwear.
1:11
And, then, whatever has come out of here.
1:20
See, footwear.
1:24
[SOUND] So, there's a problem though.
1:25
What if they haven't picked any footwear?
1:30
So, let's add an if.
1:33
[SOUND].
1:34
So, if we get any footwear, then render
the tag.
1:38
Otherwise, just leave the tag off.
1:43
We've picked footwear.
1:45
We picked these sandals.
1:47
So, we should be able to refresh and see
the sandals on the bear.
1:48
Check it out, there's the bear sandals.
1:51
All right, awesome.
1:53
Okay, so now.
1:55
That's for footwear.
1:56
So now, let's add it for pants.
1:57
And, you know, we're going to do the exact
same thing, so lets just copy and paste.
2:00
So, if we can get pants, then we want to
have a class of pants.
2:05
We don't want bear items footwear, we want
bear items pants.
2:11
We want saves pants.
2:16
And, that's it.
All right, we've picked some pants too.
2:20
So, let's check out the pants.
2:22
Ey, there is our pants.
2:24
Cool.
All right.
2:26
Now, let's do the shirt.
2:28
So, we are again gonna change this.
2:33
So, we are gonna change this to shirts.
2:35
And, this to shirts.
2:38
Oh, I'm sorry.We're going to change that
to shirt.
2:40
Bear items, shirts, saves, shirts.
2:44
That's it.
All right.
2:50
We've picked a shirt already as well.
2:51
There's our shirt.
2:55
Cool!
Our bear's coming together.
2:57
All right.
2:59
So, we've done footwear, we've done pants,
we've done shirts.
3:00
We need to do glasses and the hat.
3:02
So, we've got the head, we need to put the
glasses above the head, so
3:04
it'll come after head.
3:09
And, we're gonna change this to glasses.
3:11
Glasses.
3:15
Bear items.
3:18
Glasses saves glasses.
3:21
[BLANK_AUDIO]
3:25
All right, refresh.
3:28
There's our cool blue glasses that we
picked.
3:30
And, the last thing we wanna is the hat.
3:33
The hat goes on top of everything, so it's
at the very bottom of the stack.
3:35
So, if we have a hat, then our class is
hat, bear item,
3:40
items hat, saves hat.
3:47
And, we have a hat, right?
3:53
Yeah, we picked the headband.
3:55
Refresh.
3:57
There's our headband.
3:58
All right.
So, that's pretty cool.
3:59
We have our background color working.
4:01
We have our, and let's see if we can
change our name.
4:03
What if we change the name here to
Kenneth?
4:05
And, we update.
4:07
Cool.
My bear is still called Kenneth.
4:09
And, if we were to change to like these
stripe-y pants, the sunglasses,
4:12
the yolo hat, and the purple shirt.
4:16
Boom, everything updates.
4:22
So, that is awesome.
4:24
We need to add some messages in though,
that tell the user what's going on.
4:26
Lets do that in the next video.
4:30
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