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 Practice Basic jQuery Methods!
You have completed Practice Basic jQuery Methods!
Preview
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