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 trialBrian Patterson
19,588 PointsPretty 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!
Brian Patterson
19,588 PointsThank 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
14,662 PointsDo 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...
Brian Patterson
19,588 PointsNeil, I have put the following on the card.pug file.
a(href=`${id}?side=${sideToShow}`)= sideToShowDisplay
It seems to work now.
4 Answers
Serban Lupea
7,432 PointsI 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
2,890 PointsThis 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
Oussama AIT BAZIZ
Full Stack JavaScript Techdegree Graduate 14,781 PointsThe only way i got it to work is by doing this
a(href= id + '?side=' + sideToShow )= sideToDisplay
codingchewie
8,764 PointsOld 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)}`
Neil McPartlin
14,662 PointsNeil McPartlin
14,662 PointsHi 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