One Solution4:23 with Treasure Porth
This video covers one solution to the challenge.
How'd it go? 0:00 If you didn't get it all or found parts to be challenging, that's perfectly okay. 0:01 As I said before, you'll get used to this stuff. 0:05 And it'll become easier as you gain more experience and practice. 0:08 If you had to refer back to the videos or look something up, that's completely fine. 0:12 Okay, let's look at the first challenge. 0:16 It says show the hidden restaurant review or use an animation method to reveal it. 0:18 If we look at our HTML, We can see that this review has the class of review. 0:24 So I'll select that class in app.js. 0:32 I could reveal the review using the show method and 0:38 that's a perfectly good solution. 0:41 But I'm going to use the fade in animation instead, just to have a little fun. 0:43 So let's do that and then we can save and preview. 0:51 And there you go, it fades in, great. 0:56 The second challenge reads, set the title 1:00 of the hidden restaurant review to a different name, whatever you'd like. 1:03 Let's look and see what selector we need. 1:07 I could select the title by tag name like this. 1:11 But remember, that would get and change every h3 on the page. 1:18 So I'll need to be a little more specific. 1:22 I want the h3 inside of the div with the class of review. 1:24 So I can write a descendant selector for that. 1:29 Now I'll use the text method to set the name of restaurant. 1:33 Let's make sure this works. 1:46 And it does, great. 1:49 The third challenge is to change the text of the hidden restaurant review. 1:51 And the review needs to contain HTML such as the strong tag or a span element. 1:56 To change the restaurant review, I wrote another descendant selector, 2:04 this time targeting the paragraph tag inside the div with the class of review. 2:09 And use the HTML method to get and set the HTMLof the review. 2:16 So let's see what that looks like really quick. 2:22 And there you go. 2:26 Number 4 asks us to change the name of the app, 2:29 which is here in a span within the h1 tag. 2:33 So, again, we'll need a descendant selector. 2:38 There is only one h1 one the page, so I went ahead and selected by tag name and 2:44 then used a descendant selector. 2:48 Finally, I used a text method to change the name. 2:51 For number 5, I selected the div by ID, then chained together the following 2:58 methods passing the correct times in milliseconds to each method. 3:03 And finally for number 6, first I target the restaurant name and 3:13 the restaurant review form input fields by ID. 3:17 And I use the val method to get their values. 3:22 Then I saved the values to variable. 3:25 Now we need to get and set the empty h3 and 3:28 paragraph text within the div with the ID of new restaurant. 3:31 We want the restaurant name to go inside this newRestaurant h3, 3:38 and the content of the review to go into newRestaurant p. 3:44 I used the text method for both and I passed in the variables I made above. 3:52 So let's save and test this. 4:00 And awesome, it works. 4:10 Remember, you may have done things a bit differently, and that is totally okay. 4:12 This is just one solution. 4:17 Excellent work. 4:19 Remember to keep practicing, and I'll see you next time. 4:20
You need to sign up for Treehouse in order to download course files.Sign up