Why routing matters in Express - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a basic route that responds with 'Hello World!'.

Express

app.[1]('/', (req, res) => {
  res.send('Hello World!');
});

Drag options to blanks, or click blank then click option'

Apost

Bget

Clisten

Duse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'post' instead of 'get' for a simple page request.

Using 'listen' which is for starting the server, not routing.

The get method defines a route that listens for GET requests on the specified path.

2fill in blank

medium

Complete the code to add a route that handles POST requests to '/submit'.

Express

app.[1]('/submit', (req, res) => {
  res.send('Form submitted');
});

Drag options to blanks, or click blank then click option'

Aput

Bget

Cpost

Ddelete

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' instead of 'post' for data submission routes.

Confusing 'put' or 'delete' which are for updating or deleting data.

The post method is used to handle POST requests, typically for submitting data.

3fill in blank

hard

Fix the error in the route definition to correctly handle a DELETE request.

Express

app.[1]('/item/:id', (req, res) => {
  res.send(`Deleted item ${req.params.id}`);
});

Drag options to blanks, or click blank then click option'

Adelete

Bget

Cput

Dpost

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' or 'post' instead of 'delete' for deletion routes.

Confusing 'put' which is for updating data.

The delete method handles DELETE requests, used to remove resources.

4fill in blank

hard

Fill both blanks to create a route that updates an item using PUT and sends a JSON response.

Express

app.[1]('/item/:id', (req, res) => {
  res.[2]({ message: `Updated item ${req.params.id}` });
});

Drag options to blanks, or click blank then click option'

Aput

Bsend

Cjson

Dget

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'get' instead of 'put' for updates.

Using res.send() instead of res.json() when sending JSON.

The put method handles update requests, and json sends a JSON response.

5fill in blank

hard

Fill all three blanks to create a route that handles GET requests with a dynamic parameter and sends a custom message.

Express

app.[1]('/user/:name', (req, res) => {
  const userName = req.params.[2];
  res.[3](`Hello, ${userName}!`);
});

Drag options to blanks, or click blank then click option'

Aget

Bname

Csend

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'id' instead of 'name' for the parameter.

Using 'post' instead of 'get' for the route method.

Using res.json() instead of res.send() for a simple text message.

The get method handles GET requests, req.params.name accesses the dynamic URL part, and res.send() sends the response.

Practice

1. Why is routing important in an Express application?

easy

A. It connects different URLs to specific code that sends responses.

B. It styles the webpage with CSS automatically.

C. It stores data permanently in a database.

D. It compiles JavaScript into machine code.

Solution

1. Step 1: Understand routing purpose

   Routing links URLs to the code that handles requests and sends responses.

2. Step 2: Eliminate unrelated options

   Styling, data storage, and compilation are not routing tasks.

3. Final Answer:

   It connects different URLs to specific code that sends responses. -> Option A

4. Quick Check:

   Routing = URL to response code [OK]

Hint: Routing matches URLs to code that sends responses [OK]

Common Mistakes:

• Confusing routing with styling or database tasks
• Thinking routing compiles code
• Believing routing stores data

2. Which of the following is the correct way to define a GET route for the path /home in Express?

easy

A. app.get('/home', (req, res) => { res.send('Welcome'); });

B. app.route('/home').get = (req, res) => { res.send('Welcome'); };

C. app.get('/home') { res.send('Welcome'); }

D. app.get('/home', res.send('Welcome'));

Solution

1. Step 1: Recall Express GET route syntax

   The correct syntax is app.get(path, callback) where callback has (req, res).

2. Step 2: Check each option

   app.get('/home', (req, res) => { res.send('Welcome'); }); matches correct syntax; others have syntax errors or misuse.

3. Final Answer:

   app.get('/home', (req, res) => { res.send('Welcome'); }); -> Option A

4. Quick Check:

   Correct GET route syntax = app.get('/home', (req, res) => { res.send('Welcome'); }); [OK]

Hint: Use app.get(path, (req, res) => {}) for GET routes [OK]

Common Mistakes:

• Missing arrow function or callback syntax
• Assigning instead of calling methods
• Passing response directly without function

3. What will be the output when a user visits /about given this Express code?

app.get('/about', (req, res) => {
  res.send('About us page');
});
app.get('/contact', (req, res) => {
  res.send('Contact page');
});

medium

A. 404 Not Found error

B. Contact page

C. Server crash due to missing route

D. About us page

Solution

1. Step 1: Identify the route for '/about'

   The code defines app.get('/about') to send 'About us page'.

2. Step 2: Match URL to route

   Visiting '/about' triggers the first route, sending 'About us page'.

3. Final Answer:

   About us page -> Option D

4. Quick Check:

   URL '/about' matches route sending 'About us page' [OK]

Hint: Match URL to route path to find output [OK]

Common Mistakes:

• Confusing '/about' with '/contact' route
• Expecting 404 when route exists
• Assuming server crashes without reason

4. Identify the error in this Express routing code:

app.get('/hello', (req, res) => {
  res.send('Hello World');
});
app.get('/hello') {
  res.send('Hi again');
}

medium

A. First route is missing a response.

B. Routes cannot have the same path '/hello'.

C. Second route has incorrect syntax; missing callback function.

D. res.send() cannot be used inside app.get().

Solution

1. Step 1: Check syntax of second route

   The second app.get('/hello') lacks a callback function and uses braces incorrectly.

2. Step 2: Verify other options

   First route is correct; duplicate routes are allowed; res.send() is valid inside app.get().

3. Final Answer:

   Second route has incorrect syntax; missing callback function. -> Option C

4. Quick Check:

   Syntax error in second route = Second route has incorrect syntax; missing callback function. [OK]

Hint: Check for callback function syntax in routes [OK]

Common Mistakes:

• Thinking duplicate routes are invalid
• Believing res.send() is disallowed
• Ignoring missing arrow function or callback

5. You want to create an Express app that responds with 'Hello, user!' when visiting /user/:name, where :name is any username. Which code correctly implements this dynamic routing?

hard

A. app.get('/user/name', (req, res) => { res.send('Hello, name!'); });

B. app.get('/user/:name', (req, res) => { res.send(`Hello, ${req.params.name}!`); });

C. app.get('/user/:name', (req, res) => { res.send('Hello, user!'); });

D. app.get('/user/:name', (req, res) => { res.send(req.query.name); });

Solution

1. Step 1: Understand dynamic route parameter usage

   Express uses :name to capture dynamic parts in req.params.name.

2. Step 2: Check each option

   app.get('/user/:name', (req, res) => { res.send(`Hello, ${req.params.name}!`); }); uses req.params.name correctly to personalize the message. The static '/user/name' option sends fixed text, the dynamic path with fixed 'Hello, user!' ignores the parameter, and req.query.name is for query strings (?name=foo), not path parameters (/user/foo).

3. Final Answer:

   app.get('/user/:name', (req, res) => { res.send(`Hello, ${req.params.name}!`); }); -> Option B

4. Quick Check:

   Dynamic param in path = req.params.name [OK]

Hint: Use req.params for dynamic URL parts [OK]

Common Mistakes:

• Using static path instead of dynamic parameter
• Accessing req.query instead of req.params
• Ignoring dynamic parameter in response