add task solution#1892
Conversation
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
This solution requires changes. Three explicit requirements from the task are not met: (1) The code selects inputs using document.querySelectorAll('input') directly instead of first getting the form element with document.querySelector('form') and then querying inputs from it. (2) The label's for attribute is set to input.name but should be input.id per the requirement. (3) The label is inserted using input.before(label) instead of being appended to the parent container with input.parentElement.append(label). Please revise these three specific areas to match the task specifications.
✨ 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
| 'use strict'; | ||
|
|
||
| // write code here | ||
| const inputElements = [...document.querySelectorAll('input')]; |
There was a problem hiding this comment.
The task requires getting inputs FROM the form tag. Use document.querySelector('form') first, then get inputs from it using form.querySelectorAll('input') or form.elements.
| const label = document.createElement('label'); | ||
|
|
||
| label.className = 'field-label'; | ||
| label.htmlFor = input.name; |
There was a problem hiding this comment.
The label's 'for' attribute must be set to the input's 'id', not 'name'. Change to: label.htmlFor = input.id; or label.setAttribute('for', input.id);
| label.htmlFor = input.name; | ||
| label.textContent = formatCamelCase(input.name); | ||
|
|
||
| input.before(label); |
There was a problem hiding this comment.
The task requires appending the label to the parent container of the input, not inserting it before the input. Use: input.parentElement.append(label);
mateacademy-ai-mentor
left a comment
There was a problem hiding this comment.
Review Summary
I am approving your solution because it fully meets the task requirements and the checklist criteria. Your main.js correctly selects all inputs from the form using document.querySelectorAll('form input'), and for each input you create a label with the field-label class, set htmlFor to the input’s id, and derive the label text from the name using your formatCamelCase helper, which aligns with [CHECKLIST ITEM #1], [#3], [#4], [#9], [#10], and [#14]. You also set each input’s placeholder based on its name, formatted and capitalized through formatCamelCase, satisfying [CHECKLIST ITEM #2], [#5], and [#7]. The labels are appended to input.parentElement (rather than wrapping the input), and all of this happens inside a single loop, matching [CHECKLIST ITEM #8], [#11], [#12], [#13], and [#15]. You kept all changes confined to main.js and drove the behavior entirely from the name attributes, as required. Nicely done—this is a solid, clean implementation of the dynamic label and placeholder logic.
✨ Please rate this review in the Platform's notification center1. I will be grateful for your feedback! ✨
DEMO LINK