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
This video covers one solution to the challenge.
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
How'd it go?
0:00
If you didn't get it all or found parts
to be challenging, that's perfectly okay.
0:01
As I said before,
you'll get used to this stuff.
0:05
And it'll become easier as you
gain more experience and practice.
0:08
If you had to refer back to the videos or
look something up, that's completely fine.
0:12
Okay, let's look at the first challenge.
0:16
It says show the hidden restaurant review
or use an animation method to reveal it.
0:18
If we look at our HTML, We can see that
this review has the class of review.
0:24
So I'll select that class in app.js.
0:32
I could reveal the review
using the show method and
0:38
that's a perfectly good solution.
0:41
But I'm going to use the fade in animation
instead, just to have a little fun.
0:43
So let's do that and
then we can save and preview.
0:51
And there you go, it fades in, great.
0:56
The second challenge reads, set the title
1:00
of the hidden restaurant review to
a different name, whatever you'd like.
1:03
Let's look and see what selector we need.
1:07
I could select the title
by tag name like this.
1:11
But remember, that would get and
change every h3 on the page.
1:18
So I'll need to be a little more specific.
1:22
I want the h3 inside of the div
with the class of review.
1:24
So I can write a descendant selector for
that.
1:29
Now I'll use the text method
to set the name of restaurant.
1:33
Let's make sure this works.
1:46
And it does, great.
1:49
The third challenge is to change the text
of the hidden restaurant review.
1:51
And the review needs to contain HTML such
as the strong tag or a span element.
1:56
To change the restaurant review,
I wrote another descendant selector,
2:04
this time targeting the paragraph tag
inside the div with the class of review.
2:09
And use the HTML method to get and
set the HTMLof the review.
2:16
So let's see what that
looks like really quick.
2:22
And there you go.
2:26
Number 4 asks us to change
the name of the app,
2:29
which is here in a span within the h1 tag.
2:33
So, again,
we'll need a descendant selector.
2:38
There is only one h1 one the page, so
I went ahead and selected by tag name and
2:44
then used a descendant selector.
2:48
Finally, I used a text
method to change the name.
2:51
For number 5, I selected the div by ID,
then chained together the following
2:58
methods passing the correct times
in milliseconds to each method.
3:03
And finally for number 6,
first I target the restaurant name and
3:13
the restaurant review
form input fields by ID.
3:17
And I use the val method
to get their values.
3:22
Then I saved the values to variable.
3:25
Now we need to get and
set the empty h3 and
3:28
paragraph text within the div
with the ID of new restaurant.
3:31
We want the restaurant name to
go inside this newRestaurant h3,
3:38
and the content of the review
to go into newRestaurant p.
3:44
I used the text method for both and
I passed in the variables I made above.
3:52
So let's save and test this.
4:00
And awesome, it works.
4:10
Remember, you may have done things a bit
differently, and that is totally okay.
4:12
This is just one solution.
4:17
Excellent work.
4:19
Remember to keep practicing,
and I'll see you next time.
4:20
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