"Animations and Transitions " was retired on December 9, 2019.

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

Express Basics

Well done!

You have completed Express Basics!

Sign up for Treehouse Back to Library

Randomize Cards

2:49 with Andrew Chalkley and Joel Kraft

Randomizing the cards the user sees will help them learn the material better. In this video, you'll be challenged to implement that feature!

This video doesn't have any notes.

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

    How did it go? 0:00
    Hopefully you were able to at least work out parts of the solution. 0:01
    Let me show you my solution. 0:04
    Here's the card.pug template. 0:07
    I've entered an anchor element at the bottom of the page. 0:09
    For the href, the parts of the URL that will 0:12
    change from card to card is the id and the sideToShow. 0:17
    I assigned a template literal to the href and 0:25
    added those values in for interpolation. 0:31
    The text contents of the link should either show question or 0:34
    answer depending on where the link is pointing. 0:37
    You could have used the same variable that you used in the query string, 0:42
    since it's the same word. 0:46
    I wanted mine capitalized, so I created a new variable 0:49
    named sideToShowDisplay to hold the capitalized text. 0:53
    Next, I needed to pass in these values into the template. 0:59
    In cards.js, I passed in the id to the template data. 1:04
    Then, I assign values to sideToShow and 1:12
    sideToshowDisplay based on which side the URL points to. 1:15
    If it's the question in the query string, it should point to the answer. 1:22
    Then I added an else if clause to do the opposite. 1:29
    Don't worry if you weren't able to complete this challenge. 1:37
    Coding takes practice, and practice is what you're getting right now. 1:41
    One thing I like to do when something isn't clicking is to erase it all and 1:46
    start over. 1:51
    Even though you saw a solution, 1:53
    it can still be a challenge to reimplement something from scratch. 1:55
    That process may help you learn. 1:59
    Let's do another challenge now. 2:02
    This one will combine what you know about creating routes, 2:05
    redirections, route parameters, and of course JavaScript. 2:08
    I'll show you what you'll build. 2:13
    In the browser, when I type the URL slash cards, 2:15
    and hit Enter, I'm being redirected to a specific random card. 2:21
    I'll do it again, and I'm at a different card. 2:28
    Giving users a way to study random cards can help them learn. 2:32
    To complete this challenge, you'll need to create a new route, 2:36
    write some logic to find a random card, and redirect the user to view that card. 2:40
    Good luck, and I'll show you my solution next. 2:45

    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