task complete

README.md

@@ -1,5 +1,5 @@
 1. Replace `<your_account>` with your Github username in the link
-    - [DEMO LINK](https://<your_account>.github.io/js_task_fix_form_DOM/)
+    - [DEMO LINK](https://manankin.github.io/js_task_fix_form_DOM/)
 2. Follow [this instructions](https://mate-academy.github.io/layout_task-guideline/)
     - Run `npm run test` command to test your code;
     - Run `npm run test:only -- -n` to run fast test ignoring linter;
@@ -22,10 +22,10 @@ You can read about placeholders and labels here:
 - [MDN Label tag](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
 
 ##### Steps to do this challenge:
-1) Get all `inputs` from `form` tag on the page.
-2) For each `input` element create element `label` with `class` `field-label` (it is needed to apply css styles) and `for` attribute where set `id` of current input. Set `textContent` for label rely on `input` name.
-3) For each `input` set `placeholder` based on `input` name. Capitalize it.
-4) Append `label` elements to the parent container of `input` (do not wrap inputs into the label in this task)
+DONE - 1) Get all `inputs` from `form` tag on the page.
+DONE - 2) For each `input` element create element `label` with `class` `field-label` (it is needed to apply css styles) and `for` attribute where set `id` of current input. Set `textContent` for label rely on `input` name.
+DONE - 3) For each `input` set `placeholder` based on `input` name. Capitalize it.
+DONE - 4) Append `label` elements to the parent container of `input` (do not wrap inputs into the label in this task)
 5) Done.
 
 Hints: p.2 and p.4 can be done in one loop

src/scripts/main.js

@@ -1,3 +1,32 @@
 'use strict';
 
-// write code here
+const inputs = document.querySelectorAll('input');
+
+inputs.forEach((input) => {
+  const id = input.getAttribute('id');
+  const label = document.createElement('label');
+
+  label.setAttribute('for', id);
+  label.classList.add('field-label');
+  label.textContent = capitalizeWords(input.getAttribute('name'));
+
+  const placeholderText = capitalizeWords(input.getAttribute('name'));
+
+  input.setAttribute('placeholder', placeholderText);
+
+  const parentForInput = input.parentNode;
+
+  parentForInput.insertBefore(label, input);
+});
+
+function splitInputName(string) {
+  return string.split(/(?=[A-Z])/);
+}
+
+function capitalizeWords(string) {
+  const words = splitInputName(string);
+
+  return words
+    .map((word) => word.slice(0, 1).toUpperCase() + word.slice(1))
+    .join(' ');
+}