One Solution6:20 with Treasure Porth
This video covers one solution to the challenge.
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 up