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 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