Preview
Video Player
00:00
00:00
Introducing the Practice
4:04This video introduces the challenge relating to "Basic jQuery Methods" that you'll be working to complete.
[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