Preview
Video Player
00:00
00:00
Introducing the Practice
2:12This video introduces the challenge relating to "Handling Events in jQuery" that you'll be working to complete.
[MUSIC]
0:00
In this session, you'll practice
handling events with jQuery.
0:09
Practice is one of the best ways to help
you remember what you've just learned.
0:13
So let's get started.
0:16
This practice session assumes that you've
completed the jQuery Basics course.
0:18
So if you haven't done that,
I recommend you do so first.
0:22
You can find a link to the course
videos in the teacher's notes below,
0:25
as well as links to documentation that
will help you review what you've learned.
0:29
To get started open workspaces,
then the index.html and app.js files.
0:33
If you wanna complete these
challenges in your own text editor,
0:40
you can download the project files below.
0:42
Follow the commented steps in
app.js to complete each challenge.
0:45
For the first challenge, you'll write
an Event Listener that hides or
0:51
shows this helper text when the user's
mouse passes over the text that reads,
0:56
How are these ranked?
1:00
This requires a method
you haven't used yet, but
1:02
I've noted in the instructions
which method you'll wanna use.
1:05
The second challenge asks you to write
jQuery so that when a user enters a value
1:09
into this input and clicks the #addNew
button, a new restaurant appears at
1:14
the end of the list Finally,
the last challenge asks you
1:19
to add the class strike to the restaurant
name each time it's double clicked.
1:25
This class has some CSS styles applied to
it that will make the restaurant title
1:32
look gray and crossed out.
1:37
You'll need to use event delegation
to accomplish this task.
1:39
If you're up for a bonus challenge, write
challenge 3 using the this keyword and
1:43
look for a jQuery method that will let
you toggle the .strike class on and off.
1:48
Have fun and remember that you can
consult the teacher's notes for help and
1:54
resources, or do some googling to
find method names or remember syntax.
1:57
You'll remember more and
more as you continue to practice coding.
2:02
After you've done your best to complete
the challenges, watch the next video and
2:06
I'll walk you through my solution.
2:10