Conversation
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Good effort in setting up the Node.js server and HTML form. However, I am requesting changes because several critical issues are preventing the application from working as required.
Here are the key things to fix:
- Form Submission URL: The form in
src/index.htmlsubmits to/submit, but your server insrc/createServer.jslistens for POST requests on/add-expense. These need to match for the submission to work. - Server Errors:
- The server tries to load
index.htmlfrom an incorrect path (public/index.html). It should point tosrc/index.htmlto display the form. - The server incorrectly tries to parse the form data with
JSON.parse(). Standard form data isx-www-form-urlencodedand requires a different parser, like Node's built-inquerystringmodule.
- The server tries to load
- Incorrect Response Format: After a successful submission, the server must return an HTML page that displays the JSON, not a raw JSON response. You'll need to set the
Content-Typeheader totext/htmland send back an HTML string.
Please address these points to get the application fully functional.
✨ Please rate this review in the Platform's notification center1. 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 button2 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 tag3.
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.
Footnotes
| <title>Document</title> | ||
| </head> | ||
| <body> | ||
| <form action="/submit" method="POST"> |
There was a problem hiding this comment.
The action attribute of the form is set to /submit, but the server (createServer.js) is configured to handle POST requests on the /add-expense endpoint. This mismatch will cause a '404 Not Found' error upon submission. You need to update this URL to match the server's endpoint.
| // Return instance of http.Server class | ||
| return http.createServer((req, res) => { | ||
| if (req.method === 'GET' && req.url === '/') { | ||
| const fileStream = fs.createReadStream('public/index.html'); |
There was a problem hiding this comment.
The path to index.html appears to be incorrect. Based on the provided file structure, index.html is located in the src directory, not public. This will cause an error and prevent the form from being displayed.
| req.on('data', (chunck) => (body += chunck)); | ||
|
|
||
| req.on('end', () => { | ||
| const data = JSON.parse(body); |
There was a problem hiding this comment.
HTML forms submitted with the default enctype send data as application/x-www-form-urlencoded, not as a JSON string. Using JSON.parse() on this data will result in an error. You should use a tool like Node's built-in querystring module or the URLSearchParams class to parse the form data correctly.
| res.writeHead(200, { 'Content-Type': 'application/json' }); | ||
| res.end(JSON.stringify(expense)); |
There was a problem hiding this comment.
The task requires returning an 'HTML page with well formatted JSON'. Your implementation returns a raw JSON response. You need to change the Content-Type to text/html and construct an HTML string that includes the JSON data, perhaps inside a <pre> tag to preserve formatting.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
Great job fixing the form's submission URL and the path for serving index.html! The application now correctly displays the form.
However, this requires a couple of changes as two critical issues from the previous review still need to be addressed:
-
Incorrect Form Data Parsing: In
src/createServer.js, the server still usesJSON.parse()on the request body. Standard HTML forms send data inx-www-form-urlencodedformat (e.g.,key1=value1&key2=value2), which causes a parsing error. Please use a different method, like Node's built-inquerystringmodule, to handle this format. -
Incorrect Response Format: After a successful submission, the server sends a raw JSON response. The requirement is to return an HTML page that displays the saved data. You'll need to set the
Content-Typeheader totext/htmland wrap the JSON string in HTML, perhaps using a<pre>tag to keep it nicely formatted.
You're very close to completing the task. Keep up the great work!
✨ Please rate this review in the Platform's notification center1. 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 button2 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 tag3.
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.
Footnotes
| req.on('data', (chunck) => (body += chunck)); | ||
|
|
||
| req.on('end', () => { | ||
| const data = JSON.parse(body); |
There was a problem hiding this comment.
The body of a standard form submission is in x-www-form-urlencoded format (e.g., key1=value1&key2=value2), not JSON. Using JSON.parse() here will cause a syntax error when the form is submitted. You need to parse this URL-encoded string. Consider using Node's built-in querystring module or the URLSearchParams class.
| res.writeHead(200, { 'Content-Type': 'application/json' }); | ||
| res.end(JSON.stringify(expense)); |
There was a problem hiding this comment.
The task requires returning an HTML page that displays the saved JSON data. Currently, you're sending a raw JSON response with Content-Type: application/json. You should set the Content-Type to text/html and construct an HTML string to send back. A good way to display the JSON is inside <pre> tags to preserve formatting.
mateacademy-ai-mentor
left a comment
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I'm approving this submission as an educational step to help you progress, but the application isn't fully functional yet due to two critical issues with how the form submission is handled. You've done an excellent job setting up the server and serving the initial form!
However, the server currently tries to parse the form data with JSON.parse(), which causes a crash because HTML forms send data in a different format (application/x-www-form-urlencoded). You'll need to use a different tool, like Node's built-in querystring module, to handle this.
Additionally, after a successful submission, the server must respond with an HTML page displaying the saved data, not raw JSON. This involves setting the Content-Type header to text/html and wrapping your JSON string in HTML tags (e.g., <pre>).
You are very close to the solution! Focus on these two areas, and you'll have it working perfectly. Keep up the great effort!
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
Footnotes
| req.on('data', (chunck) => (body += chunck)); | ||
|
|
||
| req.on('end', () => { | ||
| const data = JSON.parse(body); |
There was a problem hiding this comment.
The HTML form sends data in the x-www-form-urlencoded format (like date=...&title=...), not as a JSON string. Using JSON.parse() on this format will cause a syntax error.
You should use a different method to parse this kind of data. Consider using Node's built-in querystring module or the URLSearchParams class.
| res.writeHead(200, { 'Content-Type': 'application/json' }); | ||
| res.end(JSON.stringify(expense)); |
There was a problem hiding this comment.
According to the task description, the server must return an HTML page that displays the saved data, not a raw JSON response.
You'll need to change the Content-Type to text/html and send back an HTML string that includes the formatted JSON data (e.g., by wrapping JSON.stringify(expense, null, 2) inside a <pre> tag).
| <div style="margin-top: 5px"> | ||
| <button type="submit">Submit</button> | ||
| </div> | ||
| </form> |
There was a problem hiding this comment.
The request body from an HTML form with enctype="application/x-www-form-urlencoded" is not a JSON string. It's a URL-encoded string (e.g., key1=value1&key2=value2). Using JSON.parse() here will cause a crash.
You need to parse this specific format. Consider using Node.js's built-in querystring module or the URLSearchParams class.
2 participants
No description provided.