The Next card link

Question

Hi. I clicked on the Next card link but the page won't work and localhost isn't sending any data.

app.js:

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((err, req, res, next) => {
  res.locals.error = err;
  res.status(err.status);
  res.render("error", err);
});

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

index.pug:

extends layout.pug

block content
  section#content
    p
      a(href="/cards") Begin!

card.pug:

extends layout.pug

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

layout.pug:

doctype html
html(lang="en")
  head
    title Flash Cards
  body
    include includes/header.pug
    if name
      h2 Welcome, #{name}!
      form(action="/goodbye", method="post")
        button(type="submit") Goodbye
    block content
    include includes/footer.pug

goodbye.pug:

extends layout

block content
  form(action="/goodbye", method="post")
    button Goodbye!

error.pug:

extends layout

block content
  h1= error.message
  h2= error.status
  pre= error.stack

I would appreciate any help please.

Answer 1 · 2018-04-02T08:20:22Z

April 2, 2018 8:20am

ooo wait!

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

  if (!side) {
    res.redirect("/cards/${id}?side=question");
  }

you are trying to access the value of id in the redirect, but you aren't using a template literal. could that be it?

Answer 2 · 2018-03-30T10:46:00Z

March 30, 2018 10:46am

ok think i found the problem:

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

  if (!side) {
    res.redirect("/cards/${id}?side=question");
  }

in your route handler here you are setting const {id} to req.params. this should be set to req.params.id

let me know if that works!

Answer 3 · 2018-03-30T10:29:30Z

March 30, 2018 10:29am

Hi Sean! can we see the routes file?

Answer 4 · 2018-03-30T10:39:24Z

March 30, 2018 10:39am

Hi Natalie.

My index.js:

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

router.get("/", (req, res) => {
  const name = req.cookies.username;
  if (name) {
    res.render("index", {name});
  } else {
    res.redirect("/hello");
  }
  res.render("index", {name: name});
});

router.get("/hello", (req, res) => {
  const name = req.cookies.username;
  if (name) {
    res.redirect("/");
  } else {
    res.render("hello");
  }
});

router.post("/hello", (req, res) => {
  res.cookie("username", req.body.username);
  res.redirect("/");
});

router.post("/goodbye", (req, res) => {
  res.clearCookie("username");
  res.redirect("/hello");
});

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

module.exports = router;

cards.js:

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

router.get("/", (req, res) => {
  const numberOfCards = cards.length;
  const flashcardId = Math.floor(Math.random() * numberOfCards);
  res.redirect(`/cards/${flashcardId}`);
});

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

  if (!side) {
    res.redirect("/cards/${id}?side=question");
  }

  const name = req.cookies.username;
  const text = cards[id][side];
  const {hint} = cards[id];

  const templateData = {id, text, name};

  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;

Answer 5 · 2018-03-30T10:41:28Z

March 30, 2018 10:41am

so to render the next card the link route should be /cards/:id, but your link in the pug file is only to /cards

Answer 6 · 2018-03-30T10:43:47Z

March 30, 2018 10:43am

are there any errors in your terminal?

Answer 7 · 2018-03-30T11:18:58Z

March 30, 2018 11:18am

Hi Natalie. Thanks for your help so far.

I added .id to the end of that line.

It's still not working. The error message in my terminal is:

RangeError: Invalid status code: undefined

Answer 8 · 2018-04-02T14:17:29Z

April 2, 2018 2:17pm

Hello Sean. Natalie find your problem. The wrong in the cards.js section of res.redirect(/cards/${flashcardId}?side=question). You lost the query string. Have a nice day!

Answer 9 · 2018-04-02T17:46:23Z

April 2, 2018 5:46pm

Hi Natalie and Adam. Thank you both for replying. I took Easter off as well so no problem. And Natalie, I appreciate your help.

I'm very sorry but it's still not working. Is this what you were talking about?

router.get("/", (req, res) => {
  const numberOfCards = cards.length;
  const flashcardId = Math.floor(Math.random() * numberOfCards);
  res.redirect(`/cards/${flashcardId}?side=question`);
});

I typed in the URL http://localhost:3000/cards/ and http://localhost:3000/cards/3?side=question.

The message I got was:

Flash Cards
Not Found
404
Error: Not Found
    at router.use (C:\Users\user\Desktop\treehouse\routes\index.js:34:15)
    at Layer.handle [as handle_request] (C:\Users\user\Desktop\treehouse\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\user\Desktop\treehouse\node_modules\express\lib\router\index.js:317:13)
    at C:\Users\user\Desktop\treehouse\node_modules\express\lib\router\index.js:284:7
    at Function.process_params (C:\Users\user\Desktop\treehouse\node_modules\express\lib\router\index.js:335:12)
    at next (C:\Users\user\Desktop\treehouse\node_modules\express\lib\router\index.js:275:10)
    at Function.handle (C:\Users\user\Desktop\treehouse\node_modules\express\lib\router\index.js:174:3)
    at router (C:\Users\user\Desktop\treehouse\node_modules\express\lib\router\index.js:47:12)
    at Layer.handle [as handle_request] (C:\Users\user\Desktop\treehouse\node_modules\express\lib\router\layer.js:95:5)
    at trim_prefix (C:\Users\user\Desktop\treehouse\node_modules\express\lib\router\index.js:317:13)
An app to help you study

Nothing came up in the command prompt.

I looked at my index.js file and found this:

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

Answer 10 · 2018-04-02T18:18:25Z

April 2, 2018 6:18pm

try putting that error block in app.js just above your general error handler

Answer 11 · 2018-04-02T18:47:36Z

April 2, 2018 6:47pm

In index.js please cut the last router.use((req, res, next) function and past into app.js file from the bottom to the third place.

Answer 12 · 2018-04-02T19:07:23Z

April 2, 2018 7:07pm

I've put the router.use block in the app.js file, third from the bottom. The block immediately below that is

app.use((err, req, res, next) => {
  res.locals.error = err;
  res.status(err.status);
  res.render("error", err);
});

Immediately above the router.use block:

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

Answer 13 · 2018-04-02T19:27:11Z

April 2, 2018 7:27pm

I don't understand but i uploaded my solution on github. https://github.com/trAApex/mysolution

Answer 14 · 2018-04-02T21:09:27Z

April 2, 2018 9:09pm

Sorry Adam, a typo on my part. I've edited my last post. Thank you.

Answer 15 · 2018-04-02T21:18:19Z

April 2, 2018 9:18pm

So your code is run? I will not give up. I will find the error in code.

Answer 16 · 2018-04-02T21:47:00Z

April 2, 2018 9:47pm

Hi @adambeer. It's still not running. In the prompt, the error message:

ReferenceError: router is not defined
at app.js:19:1

Now here's the line in question:

router.use((req, res, next) => { // <== This line
  const err = new Error("Not Found");
  err.status = 404;
  next(err);
});

I'm looking at your code now and comparing it with mine. I've noticed some differences between our respective app.js files.

Here's mine:

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.use(express.static("public"));

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

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

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

router.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;
  res.status(err.status);
  res.render("error", err);
});

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

And yours:

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

// tells express which template engine to use
app.set('view engine', 'pug');
app.use('/static', express.static('public'));

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;
    res.status(err.status);
    res.render('error', err);
});

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

Your solution, is it the final product? Have you finished this course? I only ask because I haven't.

Answer 17 · 2018-04-03T06:00:57Z

April 3, 2018 6:00am

Yes, I've finished course. This is the final product.

Answer 18 · 2018-04-03T06:04:36Z

April 3, 2018 6:04am

Please fix the router.use function to app.use

Answer 19 · 2018-04-03T12:31:38Z

April 3, 2018 12:31pm

You do not need the goodbye.pug file. You copied it into the layout.pug file. And delete your eleventh rows in app.js. Unnecessary the res.render("index", {name: name}); . I can't see anything else difference. I used ' ' and not " " but this isnt problem. And now don't work?

Answer 20 · 2018-04-03T13:43:25Z

April 3, 2018 1:43pm

Hi Adam. Thanks for your help. I've deleted the goodbye.pug file and the res.render line. Still the same error as before.

Answer 21 · 2018-04-03T13:56:24Z

April 3, 2018 1:56pm

Hi Sean! Please upload your project files to github. I check it.

Answer 22 · 2018-04-03T17:22:12Z

April 3, 2018 5:22pm

I don't know how.

Answer 23 · 2018-04-03T18:05:44Z

April 3, 2018 6:05pm

Search your folder with git bash.You get in. In your folder use git init command, after use git add command and add your folders one by one without node_modules folder. After git commit -m "Your message". And now make new repository in github and copy the link. Now in git bash use gut remote add origin (+ your repository url), after git push -u origin master. And then you uploaded yours files to gitfub. And please share your link.

Answer 24 · 2018-04-03T18:44:56Z

April 3, 2018 6:44pm

Hi. I've opened the git bash. I added the folder I'm using. I can't add the files inside it.

Here's the link:

https://github.com/SeanFl42/Treehouse-Express-Basics.git

Answer 25 · 2018-04-05T15:58:29Z

April 5, 2018 3:58pm

Hi Sean Flanagan!

It looks like the GitHub repository you linked to is empty. Could you please update it with the latest files so I can have a look and help out? :)

Answer 26 · 2018-04-05T18:19:13Z

April 5, 2018 6:19pm

Hi Guil.

I've tried updating the repository but I don't know how to.

I typed in

git add app.js

and I got

fatal: Unable to create 'C:/Users/user/.git/index.lock': File exists.

Another git process seems to be running in this repository, e.g.
an editor opened by 'git commit'. Please make sure all processes
are terminated then try again. If it still fails, a git process
may have crashed in this repository earlier:
remove the file manually to continue.

Answer 27 · 2018-04-05T18:30:11Z

April 5, 2018 6:30pm

Sean Flanagan,

Deleting index.lock usually solves this issue. Check out this post. You could also zip up your files and email them to me at guil@teamtreehouse in the meantime.

Answer 28 · 2018-04-05T18:39:45Z

April 5, 2018 6:39pm

I tried

git log app.js

Output:

fatal: your current branch 'Stage4Video1' does not have any commits yet

Stage4Video1 is Stage 4 Video 1 of the Gulp Basics course:

https://teamtreehouse.com/library/putting-multiple-tasks-together

Answer 29 · 2018-04-05T21:16:15Z

April 5, 2018 9:16pm

Hey Sean Flanagan,

I think your issue is here:

if (!side) {
  res.redirect("/cards/${id}?side=question");
}

The path inside res.redirect() should be a template literal. Try replacing the double quotes with backticks. Let me know if that works for you. :)

if (!side) {
  res.redirect(`/cards/${id}?side=question`);
}

Answer 30 · 2018-04-05T23:15:46Z

April 5, 2018 11:15pm

Thanks for posting the output. To get past the error, try this modification to your error route handler in app.js:

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

That could help prevent that RangeError when the status code is undefined. Let me know what the output is after that.

Answer 31 · 2018-04-06T13:38:56Z

April 6, 2018 1:38pm

Hi Guil.

I typed in the URL http://localhost:3000/cards/undefined?side=question and got a very long series of error messages in the command prompt.

Error: can't set headers after they are sent.

Answer 32 · 2018-04-06T14:09:50Z

April 6, 2018 2:09pm

Hi Sean! Check this link. How do you make new repo and upload your files to GitHub. It is just few minutes. https://www.youtube.com/watch?v=9RqXo6VD-jw

Welcome to the Treehouse Community

Looking to learn something new?

Sean Flanagan

Sean Flanagan

The Next card link

32 Answers

Natalie Cluer

Natalie Cluer

Natalie Cluer

Natalie Cluer

Natalie Cluer

Natalie Cluer

Sean Flanagan

Sean Flanagan

Natalie Cluer

Natalie Cluer

Natalie Cluer

Natalie Cluer

Sean Flanagan

Sean Flanagan

Natalie Cluer

Natalie Cluer

Adam Beer

Adam Beer

Sean Flanagan

Sean Flanagan

Natalie Cluer

Natalie Cluer

Adam Beer

Adam Beer

Sean Flanagan

Sean Flanagan

Adam Beer

Adam Beer

Sean Flanagan

Sean Flanagan

Adam Beer

Adam Beer

Sean Flanagan

Sean Flanagan

Adam Beer

Adam Beer

Adam Beer

Adam Beer

Sean Flanagan

Sean Flanagan

Adam Beer

Adam Beer

Sean Flanagan

Sean Flanagan

Adam Beer

Adam Beer

Sean Flanagan

Sean Flanagan

Adam Beer

Adam Beer

Sean Flanagan

Sean Flanagan

Guil Hernandez

Guil Hernandez

Sean Flanagan

Sean Flanagan

Adam Beer

Adam Beer

Guil Hernandez

Guil Hernandez

Sean Flanagan

Sean Flanagan

Guil Hernandez

Guil Hernandez

Sean Flanagan

Sean Flanagan

Guil Hernandez

Guil Hernandez

Sean Flanagan

Sean Flanagan

Adam Beer

Adam Beer