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

James Crosslin
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
James Crosslin
Full Stack JavaScript Techdegree Graduate 16,882 Points
Posted by James Crosslin
.a{fill-rule:evenodd;}techdegree seal-36
James Crosslin
Full Stack JavaScript Techdegree Graduate 16,882 Points

My solution to adding the question and answer links

I felt like Chalkey's solution was needlessly wordy. All the logic can be handled without creating new variables and with 2 lines of code on the pug template. Of course you have to start by including the id parameter, but that's the only change in cards.js. Since we only have two options, just provide two link options in a conditional you've placed on card.pug. It also fits in well with the conditional that we already had for the hint if you did it this way. Easy peasy.

card.pug

extends layout

block content
  section#content
    h2= text
    if side === 'question'
      p
        i Hint: #{hint}
      a(href=`${id}?side=answer`) Answer
    else
      a(href=`${id}?side=question`) Question

cards.js

const express = require("express")
const router = express.Router()

const {
  data,
  data: { cards }
} = require("../data/flashcardData.json")

router.get("/:id", (req, res) => {
  const { side } = req.query
  const { id } = req.params

  res.locals = {
    id,
    side,
    text: cards[id][side],
    hint: cards[id].hint
  }
  res.render(`card`)
})

module.exports = router

1 Answer

Richard Clarke
Richard Clarke
11,945 Points
Richard Clarke
Richard Clarke
11,945 Points

I think normally its best to handle the logic in the JS file where possible. this is how i handled mine

router.get('/:id', (req, res) => { const {side} = req.query const {id} = req.params

res.render('card', {
    text: cards[id][side],
    id: id, 
    otherSide: (side==='question')? 'answer':'question', 
    linkText: (side==='question')? 'Answer':'Question', 
    hint: (side ==='question')? cards[id].hint:''
});

});

a(href=/cards/${id}?side=${otherSide})= linkText