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

Brian Patterson
Brian Patterson
19,585 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

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

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!