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 Handling Events in jQuery!
You have completed Practice Handling Events in jQuery!
Preview
This video covers one solution to the challenge.
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 you do?
0:00
If you got them all,
great, very well done.
0:01
If you found these challenging or
0:04
didn't get to every solution,
that's totally okay too.
0:05
It'll get easier with practice, and
0:09
sometimes just the act of seeing how
others go about solving a problem
0:11
can really help you learn how
to approach problems yourself.
0:15
So let's dive in.
0:18
The first challenge says, hide/show
the text inside the of the #helpText
0:20
span element when the user's mouse passes
over the text, How are these ranked?
0:25
Hint: use the jQuery toggle method.
0:30
Let's look at these elements in the HTML.
0:33
Here's the helpText paragraph.
0:41
You can see it has an id of helpText.
0:44
And here's the span
element nested within it.
0:48
The element on which we want to listen for
0:51
an event is the element
with the id of helpText.
0:54
So let's start by selecting that.
0:57
Now let's determine which
event we want to listen for.
1:04
Our hint is right here.
1:07
When the user's mouse passes over
the text, how are these ranked?
1:10
The event we want to use
is called mouseover.
1:17
So we could do this and
that's a perfectly acceptable answer, but
1:20
I'm going to use the on syntax.
1:25
Now that we're listening for
a mouseover on the helpText paragraph,
1:37
what do we wanna do when this event fires?
1:40
We wanna use the toggle method to show and
hide the text within the span element.
1:43
I'll start by selecting the text
inside of the span element and
1:49
then I'll use the toggle
method on my selection.
1:53
So I'm selecting this span element.
1:57
And toggle.
2:10
Let's refresh and
see if this works And it does.
2:14
The second challenge reads, append a new
restaurant to the restaurant list when
2:21
the user enters a value into
the new restaurant input and
2:26
clicks on the add new button.
2:29
So when this button is clicked,
2:34
we need to get the value of this input and
2:38
append it to this list.
2:44
Here's how I did that.
2:48
So I got the value from the input,
saved it to a variable, and
2:54
then used the append method to append the
value of this input to the unordered list.
2:58
Let's go ahead and save and
refresh and see if this works.
3:04
And it does.
3:10
But you may have noticed a small problem.
3:11
If we put something else here, if I append
just the text that's in this field,
3:14
I'm not actually appending
a new list item.
3:19
I'm only appending more text.
3:22
So we can use string concatenation
3:25
to add list item tags to
an item before we append it.
3:28
Now we can add new items to the list and
they will format correctly.
3:50
And, of course,
it's also fine if you use ES6 syntax,
3:57
which would look something like this.
4:01
And you can see that works just the same.
4:20
Now let's see what I did for
the third and final challenge.
4:24
Which reads,
4:27
add the class strike to the restaurant
name each time it's double clicked.
4:28
Use event delegation on
the ul element to listen for
4:32
a click event on the ul's list items.
4:36
I use event delegation here so
that we're listening for
4:43
a double click on any list item
with the unordered list element.
4:46
Then I pass in the event object.
4:51
Inside the event handler I
select the target of the event.
4:54
So the particular list
item that was clicked on.
4:59
Finally, I use the addClass method
to add the class of strike.
5:02
So let's save and test this.
5:08
And great, that works.
5:14
As a bonus I asked you to refactor
it using the this keyword.
5:16
As well as look up a method to
toggle the class on and off.
5:20
With some quick googling,
you can find a method called toggleClass.
5:24
So we can get rid of the event object
right here cuz we're not gonna use it,
5:28
and replace the selection
with the this keyword.
5:34
Then instead of addClass,
we can use toggleClass.
5:38
Now if we refresh, you can see that
you can toggle this style on and off.
5:46
Same goes if you add another restaurant.
5:57
Really great work.
6:02
These were challenging exercises,
so if you got some, most, or
6:03
all of them, be proud.
6:07
Remember, you may have approached
these problems differently, and
6:09
that is totally okay.
6:12
There are often many solutions
to a coding problem.
6:14
Keep practicing, and
I'll see you next time.
6:17
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