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 introduces the challenge relating to "Basic jQuery Methods" that you'll be working to complete.
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
[MUSIC]
0:00
Hey, Treasure here.
0:09
In this session, you'll Practice Using
Basic jQuery Methods to get set and
0:10
animate different elements with jQuery.
0:15
Practice is a great way to help
solidify what you have just learned and
0:18
to start to get that syntax down.
0:21
This practice session assumes that you've
completed at least the first part of
0:23
the three part jQuery basics course.
0:27
So if you haven't done that,
I strongly recommend you do so first.
0:30
You can find a link to the course
videos in the teacher's notes below,
0:34
as well as links to documentation that
will help you review what you've learnt.
0:37
To get started,
all you need to do is open workspaces,
0:41
then the index.html and app.js files.
0:44
If you want to complete these
challenges in your own text editor
0:49
you can download the files below.
0:53
You'll follow the commented steps
to complete each challenge.
0:55
Here's what the project looks
like before you begin and
0:59
here's what it should look
like when you're finished.
1:03
Let's look at the HTML.
1:17
For these challenges,
1:19
your job will be to find the elements
you're trying to target with jQuery.
1:21
Determine how to select them and then use
a jQuery method to accomplish the task.
1:25
There are a few elements on this
page that start out hidden.
1:30
The first challenge ask
you to write jQuery to
1:33
reveal the hidden restaurant review.
1:36
You can see here that we have
a div with the class of review.
1:42
So you may want to start by selecting
that class in your app jsFile.
1:46
The second challenge asks you to
give the restaurant a new name.
1:50
As you can see, the restaurant
name is between these h3 tags.
1:55
For the third challenge,
you'll change the text of the restaurant
1:58
review to anything you'd like as
long as the text includes HTML tags.
2:03
For the fourth challenge,
you'll target and
2:09
change the name of the app
between these span tags.
2:11
Fifth, you're given a series of steps to
write an animation sequence to reveal and
2:15
animate this flash message.
2:20
Finally, in this provided event listener
you'll follow the steps to write
2:29
some code allowing the user to
enter a restaurant review and
2:34
title into the form inputs on the right.
2:38
And have the title and
review appear on the left.
2:42
You'll get the values from the form input
fields and use them to set the title and
2:47
text of the empty elements nested within
the div with the ID of new restaurant.
2:52
Keep in mind that you're not adding new
restaurants to a list in this exercise.
3:02
We'll do that in a later practice session.
3:07
That means that if you enter
different values into this form
3:10
they will replace the values on
the left and that's totally fine.
3:14
So you can see if I change this and
press Submit again,
3:27
over here it's replaced so
we're not adding to the list.
3:31
Have fun and
3:36
don't worry too much if you can't
recall everything you've just learned.
3:37
You can consult the teacher's notes for
help and resources.
3:41
And don't be afraid to do some Googling
to find method name or remember syntax.
3:44
You'll remember more and
more as you continue to practice coding
3:49
until eventually it will
become second nature.
3:52
Just keep coding and keep practicing.
3:55
After you have done your best to complete
the challenges watch the next video.
3:58
And I will walk you through the solution.
4:01
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