Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Handling Events in jQuery

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Introducing the Practice

2:12 with Treasure Porth

This video introduces the challenge relating to "Handling Events in jQuery" that you'll be working to complete.

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    [MUSIC] 0:00
    In this session, you'll practice handling events with jQuery. 0:09
    Practice is one of the best ways to help you remember what you've just learned. 0:13
    So let's get started. 0:16
    This practice session assumes that you've completed the jQuery Basics course. 0:18
    So if you haven't done that, I recommend you do so first. 0:22
    You can find a link to the course videos in the teacher's notes below, 0:25
    as well as links to documentation that will help you review what you've learned. 0:29
    To get started open workspaces, then the index.html and app.js files. 0:33
    If you wanna complete these challenges in your own text editor, 0:40
    you can download the project files below. 0:42
    Follow the commented steps in app.js to complete each challenge. 0:45
    For the first challenge, you'll write an Event Listener that hides or 0:51
    shows this helper text when the user's mouse passes over the text that reads, 0:56
    How are these ranked? 1:00
    This requires a method you haven't used yet, but 1:02
    I've noted in the instructions which method you'll wanna use. 1:05
    The second challenge asks you to write jQuery so that when a user enters a value 1:09
    into this input and clicks the #addNew button, a new restaurant appears at 1:14
    the end of the list Finally, the last challenge asks you 1:19
    to add the class strike to the restaurant name each time it's double clicked. 1:25
    This class has some CSS styles applied to it that will make the restaurant title 1:32
    look gray and crossed out. 1:37
    You'll need to use event delegation to accomplish this task. 1:39
    If you're up for a bonus challenge, write challenge 3 using the this keyword and 1:43
    look for a jQuery method that will let you toggle the .strike class on and off. 1:48
    Have fun and remember that you can consult the teacher's notes for help and 1:54
    resources, or do some googling to find method names or remember syntax. 1:57
    You'll remember more and more as you continue to practice coding. 2:02
    After you've done your best to complete the challenges, watch the next video and 2:06
    I'll walk you through my solution. 2:10

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up