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
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