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 DOM Manipulation: Modal

Well done!

You have completed Practice DOM Manipulation: Modal!

Sign up for Treehouse Back to Library

One Solution

2:26 with Rohald van Merode

This video covers one solution to the challenge

Resources

Related Discussions

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

Sign up

    Related Discussions

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

    Sign up

    Hey, how did it go? 0:00
    Did you manage to get that modal up and running? 0:01
    Don't worry if you didn't, this was a tricky one. 0:04
    Keep watching to see my solution and then go ahead and give it another try. 0:06
    I started by adding an event listener to the country's container. 0:10
    Then I'm trying to select the countryCard that was clicked using the closest method. 0:14
    If no card is clicked, as might happen if a user clicks between cards, 0:19
    I stop the code from executing with a return statement. 0:23
    If there is a countryCard, 0:27
    I'm using the dataset method to access the value of the data name attribute. 0:29
    I'm using the find method to get the corresponding information from 0:33
    the countries array. 0:37
    Finally, I call my displayCountryModal function and pass it the country object. 0:38
    The displayCountryModal function takes care of updating and 0:44
    displaying the modal's content. 0:47
    I'm dynamically creating the new content and 0:49
    setting the modal content to this generated HTML. 0:52
    To show the modal to the user, I'm adding the open class to the overlay. 0:56
    Now when clicking one of the country cards, 1:00
    the modal should show up as expected. 1:02
    Perfect, I've added an event listener to the closeButton to close the modal again. 1:04
    When clicked, the open class will be removed from the overlay. 1:10
    Great, the modal is showing up and can be closed by clicking the X. 1:16
    To improve the user experience, it would be nice if the user could also close 1:20
    the modal by clicking on the overlay. 1:24
    I've added an event listener to the overlay to add this functionality. 1:26
    To avoid the modal from closing if the user clicks on an element inside the modal 1:31
    itself, I've used a conditional to make sure the click occurred outside the modal. 1:36
    If so, the open class is removed. 1:41
    Looking at our page in the browser, the user can now close down the modal by 1:46
    clicking anywhere else on the screen then the modal itself. 1:50
    Finally, there's the functionality for 1:54
    the keyboard users to close the modal by pressing Escape. 1:57
    So I've set up an event listener listening for the key down event. 2:00
    If that event is triggered by the Escape key, 2:03
    the open class is removed from the overlay, and that is it. 2:07
    Congratulations on completing this practice session. 2:11
    If you hit some snags along the way, remember, practice makes perfect. 2:14
    Don't hesitate to start over and give it another go. 2:18
    Thanks for your participation, and happy coding. 2:21

    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