Solution by vilich-mykhailo · Pull Request #173 · mate-academy/node_form-data

vilich-mykhailo · 2026-01-05T18:27:39Z

No description provided.

mateacademy-ai-mentor

Review Summary

Good work setting up the server and handling the POST request to save the expense data. However, a couple of key requirements are missing, so this will need a few changes before it can be approved.

Here are the two main issues:

Missing HTML Form: The application must show an HTML form for users to input data. Your server currently only handles POST requests. You'll need to add a handler for GET requests that serves the HTML form file.
Incorrect Success Response: The server is returning raw JSON after a successful submission. The requirement is to return an "HTML page with well formatted JSON". To fix this, please set the Content-Type header to text/html and wrap the JSON response within an HTML structure, for example, inside a <pre> tag.

You're very close to a complete solution! Address these points and you'll be all set.

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-01-05T18:29:12Z

src/createServer.js

-  // Return instance of http.Server class
+  const server = new Server();
+
+  server.on('request', (req, res) => {


The request handler is missing a crucial part of the requirements. The application must also 'show an HTML form'. You should add logic here to handle GET requests to serve this form to the user.

mateacademy-ai-mentor · 2026-01-05T18:29:12Z

src/createServer.js

+        res.setHeader('Content-Type', 'application/json');
+        res.end(JSON.stringify(expense, null, 2));


According to the task description, the server should 'return an HTML page with well formatted JSON'. This implementation returns raw JSON. You should set the Content-Type to text/html and wrap the JSON string in HTML tags (e.g., inside a <pre> tag).

mateacademy-ai-mentor

Review Summary

Great job adding the index.html file! This is a big step forward. However, the server isn't yet configured to use it, and there are a few critical issues with data handling that prevent the application from working as required, so some changes are needed.

Here are the main things to address:

Serve the HTML Form: The server needs to handle GET requests to the root path (/) and respond with the content of your index.html file so users can see the form.
Parse Form Data: Your server expects JSON, but the HTML form sends data as application/x-www-form-urlencoded. This will cause a crash when you use JSON.parse(). You'll need to parse this form data first—Node's built-in URLSearchParams is great for this.
Save Valid JSON: After parsing the form data into an object, you must use JSON.stringify() to convert it back into a JSON string before writing it to db/expense.json.
Return an HTML Page: On a successful submission, the server must send back an HTML document that displays the saved JSON, not just the raw JSON data. Remember to set the Content-Type header to text/html.

You're very close to a complete solution. Keep up the great work!

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

mateacademy-ai-mentor · 2026-01-05T18:38:47Z

src/createServer.js

+  const server = new http.Server();
+
+  server.on('request', (req, res) => {
+    if (req.url !== '/add-expense') {


This routing logic only checks for a single URL and doesn't distinguish between HTTP methods like GET and POST. To meet the requirement of showing an HTML form, you'll need to handle GET requests (for example, to the root path /) to serve the index.html file. The form submission itself should be handled on a POST request to /add-expense.

mateacademy-ai-mentor · 2026-01-05T18:38:47Z

src/createServer.js

+      const data = JSON.parse(text);
+
+      if (!data['date'] || !data['title'] || !data['amount']) {
+        res.statusCode = 400;
+        res.end('Not full data');
+
+        return;
+      }
+
+      const writeStream = fs.createWriteStream(path.resolve('db/expense.json'));
+
+      writeStream.end(text);


The server expects JSON, but a standard HTML form sends data in application/x-www-form-urlencoded format. JSON.parse(text) will cause an error with this data. You'll need to parse the urlencoded string first (you can use the built-in URLSearchParams class or the querystring module). After parsing, you should construct a JavaScript object from the form data, stringify it to JSON, and then save that JSON string to the file, not the original raw text from the request.

mateacademy-ai-mentor · 2026-01-05T18:38:47Z

src/createServer.js

+        res.setHeader('Content-type', 'application/json');
+        res.statusCode = 200;
+        res.end(text);


The requirements state that the server must return an HTML page with the formatted JSON. The Content-Type should be text/html, and the response body should be an HTML document containing the JSON data (for example, inside a <pre> tag to preserve formatting). This was also mentioned in the previous review feedback.

mateacademy-ai-mentor · 2026-01-05T18:38:47Z

src/index.html

+  </head>
+  <body>
+    <h1>Expense Form</h1>
+    <form action="http://localhost:5701/add-expense" method="POST">


This form submits data in application/x-www-form-urlencoded format by default. However, your server code in createServer.js expects application/json because it uses JSON.parse(). To fix this, you'll need to use JavaScript to intercept the form's submit event, create a JSON object from the form data, and then send it using the Fetch API with the correct Content-Type header.

mateacademy-ai-mentor

Review Summary

I am approving your solution as an educational override so you can continue making progress. You've done a great job setting up the server to display the HTML form! However, the form submission is not yet working due to a couple of key issues.

The main problem is that the server tries to parse the form data as JSON, but it's sent in application/x-www-form-urlencoded format. You'll need to use a different method to parse this, such as URLSearchParams. Secondly, the success response after saving the data should be a full HTML page displaying the saved JSON, with the Content-Type header set to text/html.

Addressing these two points will make your application fully functional. Keep up the fantastic effort!

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Rate AI review example ↩

mateacademy-ai-mentor · 2026-01-05T18:42:23Z

src/createServer.js

+        let fields;
+
+        try {
+          fields = JSON.parse(body);


This parsing method isn't correct for the data sent by the HTML form. Forms using POST send data in application/x-www-form-urlencoded format (like date=...&title=...), which is not valid JSON. JSON.parse() will throw an error here.

You'll need to parse this string differently. Consider using Node's built-in URLSearchParams to handle this format.

mateacademy-ai-mentor · 2026-01-05T18:42:23Z

src/createServer.js

+        res.setHeader('Content-Type', 'application/json');
+        res.end(file);


The response for a successful submission needs two changes to meet the requirements:

The Content-Type header should be text/html.

The response body should be an HTML document that displays the saved JSON, not the raw JSON data itself. For example: res.end(
${file}
);

mateacademy-ai-mentor · 2026-01-05T18:42:23Z

src/createServer.js

+      return;
+    }
+
+    if (req.url !== '/' && req.url !== '/add-expense') {


This condition correctly routes GET / requests to show the form, but it also allows GET /add-expense to do the same, which is likely not intended. It's generally better to handle each route explicitly. For instance, you could check for req.method === 'GET' && req.url === '/' to serve the form, and then let other unhandled routes result in a 404.

add

86d7f23

mateacademy-ai-mentor suggested changes Jan 5, 2026

View reviewed changes

ad2

7c841cc

vilich-mykhailo requested a review from mateacademy-ai-mentor January 5, 2026 18:37

mateacademy-ai-mentor suggested changes Jan 5, 2026

View reviewed changes

add3

13c1ade

vilich-mykhailo requested a review from mateacademy-ai-mentor January 5, 2026 18:40

mateacademy-ai-mentor approved these changes Jan 5, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Solution#173

Solution#173
vilich-mykhailo wants to merge 3 commits intomate-academy:masterfrom
vilich-mykhailo:develop

vilich-mykhailo commented Jan 5, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Jan 5, 2026

Uh oh!

mateacademy-ai-mentor Jan 5, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Jan 5, 2026

Uh oh!

mateacademy-ai-mentor Jan 5, 2026

Uh oh!

mateacademy-ai-mentor Jan 5, 2026

Uh oh!

mateacademy-ai-mentor Jan 5, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Uh oh!

mateacademy-ai-mentor Jan 5, 2026

Uh oh!

mateacademy-ai-mentor Jan 5, 2026

Uh oh!

mateacademy-ai-mentor Jan 5, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		res.setHeader('Content-Type', 'application/json');
		res.end(JSON.stringify(expense, null, 2));

		res.setHeader('Content-Type', 'application/json');
		res.end(file);

Conversation

vilich-mykhailo commented Jan 5, 2026

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

mateacademy-ai-mentor left a comment

Choose a reason for hiding this comment

Review Summary

Footnotes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants