Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript Express Basics Parameters, Query Strings, and Modularizing Routes Randomize Cards

Brian Patterson
Brian Patterson
19,588 Points
Posted by Brian Patterson
Brian Patterson
19,588 Points

Again! Haven't a scooby do!

Again I haven't a scooby do what is going on here.

if (side === 'question') {
    templateData.hint = hint;
    templateData.sideToShow = 'answer';
    templateData.sideToShowDisplay = 'Answer';
  } else if ( side === 'answer' ){
    templateData.sideToShow = 'question';
    templateData.sideToShowDisplay = 'Question';
  }
  res.render('card', templateData);
});

what is ?

templateData.hint = hint;
    templateData.sideToShow = 'answer';
    templateData.sideToShowDisplay = 'Answer';

and what the hell is this?

templateData.sideToShow = 'question';
    templateData.sideToShowDisplay = 'Question';

And what does this mean?

a(href=`${id}?side=${sideToShow}`)=sideToShowDisplay
Lee Zamastil
Lee Zamastil
21,628 Points

You got me. Andrew or Joel should help out here. AFAIK this video is either out of order, or a necessary preceding video is missing.

Video #4 Adding Links ended with the simple challenge of having the hints show up only when the question side (and not the answer side) is displayed. I solved that with a minor change to cards.js of adding the side value to the template:

const templateData = { text, hint, side };

along with a small change from:

if hint

to:

if side === 'question' && hint

which seems to work just fine.

But… who cares?! This video #5 Randomize Cards has absolutely nothing to do with the prior video. Like you, I have no idea what the content of this video is in reference to.

1 Answer

Elliot Liebman
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Elliot Liebman
Full Stack JavaScript Techdegree Graduate 20,304 Points
Elliot Liebman
.a{fill-rule:evenodd;}techdegree seal-36
Elliot Liebman
Full Stack JavaScript Techdegree Graduate 20,304 Points

The sideToShow and sideToShowDisplay variable names are super confusing.

I used 'side' and 'otherSide' instead.

This is my code

router.get('/:id', (req, res) => {
  const { side } = req.query;
  const { id } = req.params;
  const text = cards[id][side];
  const { hint } = cards[id];

  const other = {
    question: 'answer',
    answer: 'question'
  }

  const otherSide = other[side];

  const templateData = { text, hint, side, otherSide };

  res.render('card', templateData);
});

using the 'other' object as a dictionary, you just pass in 'side' and you get the other side back. No need for all the confusing ifs and elses.

I gave side and otherSide to my templateData object, so I could use it in pug. Here's my pug template.

extends layout.pug

block content
  section#content
    h2= text
    if side === 'question'
      p 
        i Hint: #{hint}
  a(href=`?side=${otherSide}`) #{otherSide!

So no matter which side you're on, the link will send you to the other side. Hope this helps!