Introducing the Practice4:04 with Treasure Porth
This video introduces the challenge that you'll be working to complete.
[MUSIC] 0:00 Hey, Treasure here. 0:09 In this session, you'll Practice Using Basic jQuery Methods to get set and 0:10 animate different elements with jQuery. 0:15 Practice is a great way to help solidify what you have just learned and 0:18 to start to get that syntax down. 0:21 This practice session assumes that you've completed at least the first part of 0:23 the three part jQuery basics course. 0:27 So if you haven't done that, I strongly recommend you do so first. 0:30 You can find a link to the course videos in the teacher's notes below, 0:34 as well as links to documentation that will help you review what you've learnt. 0:37 To get started, all you need to do is open workspaces, 0:41 then the index.html and app.js files. 0:44 If you want to complete these challenges in your own text editor 0:49 you can download the files below. 0:53 You'll follow the commented steps to complete each challenge. 0:55 Here's what the project looks like before you begin and 0:59 here's what it should look like when you're finished. 1:03 Let's look at the HTML. 1:17 For these challenges, 1:19 your job will be to find the elements you're trying to target with jQuery. 1:21 Determine how to select them and then use a jQuery method to accomplish the task. 1:25 There are a few elements on this page that start out hidden. 1:30 The first challenge ask you to write jQuery to 1:33 reveal the hidden restaurant review. 1:36 You can see here that we have a div with the class of review. 1:42 So you may want to start by selecting that class in your app jsFile. 1:46 The second challenge asks you to give the restaurant a new name. 1:50 As you can see, the restaurant name is between these h3 tags. 1:55 For the third challenge, you'll change the text of the restaurant 1:58 review to anything you'd like as long as the text includes HTML tags. 2:03 For the fourth challenge, you'll target and 2:09 change the name of the app between these span tags. 2:11 Fifth, you're given a series of steps to write an animation sequence to reveal and 2:15 animate this flash message. 2:20 Finally, in this provided event listener you'll follow the steps to write 2:29 some code allowing the user to enter a restaurant review and 2:34 title into the form inputs on the right. 2:38 And have the title and review appear on the left. 2:42 You'll get the values from the form input fields and use them to set the title and 2:47 text of the empty elements nested within the div with the ID of new restaurant. 2:52 Keep in mind that you're not adding new restaurants to a list in this exercise. 3:02 We'll do that in a later practice session. 3:07 That means that if you enter different values into this form 3:10 they will replace the values on the left and that's totally fine. 3:14 So you can see if I change this and press Submit again, 3:27 over here it's replaced so we're not adding to the list. 3:31 Have fun and 3:36 don't worry too much if you can't recall everything you've just learned. 3:37 You can consult the teacher's notes for help and resources. 3:41 And don't be afraid to do some Googling to find method name or remember syntax. 3:44 You'll remember more and more as you continue to practice coding 3:49 until eventually it will become second nature. 3:52 Just keep coding and keep practicing. 3:55 After you have done your best to complete the challenges watch the next video. 3:58 And I will walk you through the solution. 4:01
You need to sign up for Treehouse in order to download course files.Sign up