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

Pretty sure his code is wrong!

I have pretty much copied his code letter by letter or rather copied and pasted it. When I hit the answer link it gives me a 404. This is the code I have. cards.js

const express = require('express');
const router = express.Router();
const { data } = require('../data/flashcardData.json');
const { cards } = data;

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

  const templateData = { id, text };

  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);
});

module.exports = router;

my card.pug file.

extends layout.pug

block content
  section#content
    h2= text
    if hint
      p
        i Hint: #{hint}
    a(href=`${id}?side=${sideToShow}`)= sideToShowDisplay

My app.js file

const express = require('express');
const bodyParser = require('body-parser');
const cookieParser = require('cookie-parser');

const app = express();

app.use(bodyParser.urlencoded({ extended: false }));
app.use(cookieParser());

app.set('view engine', 'pug');

const mainRoutes = require('./routes');
const cardRoutes = require('./routes/cards');

app.use(mainRoutes);
app.use('/cards', cardRoutes);

app.use((req, res, next) => {
  const err = new Error('Not Found');
  err.status = 404;
  next(err);
});

app.use((err, req, res, next) => {
  res.locals.error = err;
  const status = err.status || 500;
  res.status(status);
  res.render('error');
});

app.listen(3000, () => {
  console.log('The application is running on localhost:3000!');
});

PLEASE CAN SOMEONE HELP AS THIS IS DRIVING NUTS!

Neil McPartlin
Neil McPartlin
14,662 Points

Hi Brian. I have a working app based on Andrew's code. I switched my 3 files for your 3 and the app still works.

I read your conversation with Brian Anstett here...

https://teamtreehouse.com/community/getting-a-404-when-i-click-the-answer-link

... but you mention seeing ':id' twice in your 'answer' URL.

So have you solved this problem?

If not, when you visit this URL...

http://localhost:3000/cards/1?side=question

What do you see bottom left of your browser, when you rest your mouse over the Answer link.

I see...

http://localhost:3000/cards/1?side=answer

Brian Patterson
Brian Patterson
19,588 Points

Thank you, Neil McPartlin, for your comment. I am not sure why it did not work. The only way I got it to work was to edit the card.pug file with the following anchor tag.

a(href=`/cards/${id}?side=${sideToShow}`)= sideToShowDisplay

So I am a bit mystified why this works and his code doesn't.

Neil McPartlin
Neil McPartlin
14,662 Points

Do I understand correctly that if you revert that single line of code back to Andrew's code, namely...

a(href=`${id}?side=${sideToShow}`)= sideToShowDisplay

Then save card.pug, restart the server, visit this specific URL...

http://localhost:3000/cards/1?side=question

When you rest your mouse over the Answer link and look bottom left of your browser, you see...

http://localhost:3000/cards/1/1?side=answer

Brian Patterson
Brian Patterson
19,588 Points

Neil, I have put the following on the card.pug file.

a(href=`${id}?side=${sideToShow}`)= sideToShowDisplay

It seems to work now.

4 Answers

I have encountered the same problem as Brian. I'm guessing this is whats causing the issue:

Caution Previous versions of Pug/Jade supported an interpolation syntax such as:

a(href="/#{url}") Link

This syntax is no longer supported. Alternatives are found below. (Check our migration guide for more information on other incompatibilities between Pug v2 and previous versions.)

var url = 'pug-test.html';
a(href='/' + url) Link
Abigail Edwards
Abigail Edwards
2,890 Points

This was extremely frustrating as the code was not working, based on how many times you would click the Answer or Question link.

a(href=/cards/${id}?side=${sideToShow})= sideToShowDisplay

In the end I had to give it an absolute href link so that it didn't keep adding /id

The only way i got it to work is by doing this

a(href= id + '?side=' + sideToShow )= sideToDisplay
codingchewie
codingchewie
8,764 Points

Old Q&A but if you stumble across this trying to capitalize your first letter with minimal code this works:

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

  const templateData = { id, text }

  if (side === 'question') {
    templateData.hint = hint
    templateData.sideToShow = 'answer'
  }

  if (side === 'answer') templateData.sideToShow = 'question'

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

pug:

a(href=`/cards/${id}?side=${sideToShow}`)= `${sideToShow.charAt(0).toUpperCase()}${sideToShow.slice(1)}`