solution

[uselessmorning]

• DEMO LINK

[mateacademy-ai-mentor]

Review Summary

I am requesting changes because one core requirement is not yet met and this can break expected behavior in tests. In src/scripts/main.js you currently use document.querySelectorAll('input'), which grabs every input in the page; the task explicitly requires processing only the inputs inside the form element, so you should instead select via the form (for example const form = document.querySelector('form'); const inputs = form.querySelectorAll('input');). Another critical point is that labels must have their for attribute set to the input’s id, but you are using newLabel.htmlFor = input.id without ensuring input.id exists; add a step before this line to assign an id when missing (e.g. use the input’s name so if (!input.id) input.id = input.name;). These two issues directly affect correctness and accessibility and are likely part of the checklist and automated tests, so they need to be fixed before this can pass. As a minor, optional improvement, you could also capitalize the label text derived from input.name to better match the placeholder style. Overall your main loop and label/placeholder logic are solid, and with these adjustments your solution should fully satisfy the task requirements.

---

✨ 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.

Footnotes

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

The code selects all inputs in the document: document.querySelectorAll('input'). The task requires getting all inputs from the form tag. Use the form as the root (for example const form = document.querySelector('form'); const inputs = form.querySelectorAll('input'); or document.querySelectorAll('form input')) so only form inputs are processed. This addresses step 1 in the task description.

[mateacademy-ai-mentor]

You set newLabel.htmlFor = input.id. If an input lacks an id this will produce an empty for attribute and not link the label to the input. Ensure each input has an id (for example if (!input.id) input.id = input.name;) before setting htmlFor, which satisfies the requirement to set the for attribute to the input's id.

[mateacademy-ai-mentor]

Minor suggestion: you set newLabel.textContent = input.name. While not required, capitalizing the label text (e.g. input.name[0].toUpperCase() + input.name.slice(1)) would match the placeholder style and improve visual consistency—consider this if you want labels and placeholders to appear consistent.

[mateacademy-ai-mentor]

Review Summary

I am approving your solution because it correctly implements all the required behavior for labels and placeholders and aligns with the task checklist. Your script scopes inputs to the form elements, ensures each input has an id, creates a <label> with the field-label class and htmlFor pointing to the input’s id, and inserts the label before the input without altering the layout. You also correctly derive both the label text and the placeholder from input.name and capitalize them as required, and you’ve done this in a single loop as hinted in the task.

For potential future robustness (not required for this task), you could guard against cases where input.name is missing or empty before doing input.name[0], and consider how duplicate id values might behave if multiple forms share the same input names. Another small, optional enhancement would be to make label text more human-friendly for names like first-name or firstName by inserting spaces. Overall, your implementation meets the functional requirements and can be confidently accepted as is—nice work.

---

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

Footnotes

1. Rate AI review example ↩