add solution

.editorconfig

@@ -8,3 +8,4 @@ charset = utf-8
 trim_trailing_whitespace = true
 insert_final_newline = true
 end_of_line = lf
+quote_type = single

.github/workflows/test.yml

@@ -11,7 +11,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     steps:
       - uses: actions/checkout@v2

README.md

@@ -1,9 +1,9 @@
 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://dimarogkov.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;
-    - Run `npm run test:only -- -l` to run fast test with additional info in console ignoring linter.
+   - Run `npm run test` command to test your code;
+   - Run `npm run test:only -- -n` to run fast test ignoring linter;
+   - Run `npm run test:only -- -l` to run fast test with additional info in console ignoring linter.
 
 ### Task: Auth form fix
 
@@ -12,21 +12,24 @@ Look at this form... Looks like something is missing here. Labels? Placeholders?
 ![Preview](./src/images/preview.png)
 
 Your task is to make script, which fixes problems in this form.
-1) Add `<label>` for inputs.
-2) Add placeholders for each input.
+
+1. Add `<label>` for inputs.
+2. Add placeholders for each input.
 
 Rely on the `name` of the input when writing your script.
 
 You can read about placeholders and labels here:
+
 - [MDN Placeholder attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#attr-placeholder)
 - [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)
-5) Done.
+
+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)
+5. Done.
 
 Hints: p.2 and p.4 can be done in one loop
 

package.json

@@ -22,7 +22,7 @@
     "@mate-academy/bemlint": "^0.1.1",
     "@mate-academy/eslint-config": "*",
     "@mate-academy/linthtml-config": "*",
-    "@mate-academy/scripts": "^1.2.10",
+    "@mate-academy/scripts": "^1.3.2",
     "@mate-academy/stylelint-config": "0.0.11",
     "@parcel/transformer-sass": "2.10.2",
     "backstopjs": "^6.2.2",

src/scripts/main.js

@@ -1,3 +1,37 @@
+/* eslint-disable max-len */
 'use strict';
 
-// write code here
+addEventListener('DOMContentLoaded', () => {
+  const fixFormInit = () => {
+    const fields = document.querySelectorAll('.field');
+
+    if (fields.length) {
+      const getPlaceholder = (inputName) => {
+        return inputName.charAt(0).toUpperCase() + inputName.slice(1);
+      };
+
+      const getLabel = (labelId, labelName) => {
+        const label = document.createElement('label');
+
+        label.classList.add('field-label');
+        label.textContent = labelName;
+        label.for = labelId;
+
+        return label;
+      };
+
+      fields.forEach((field) => {
+        const input = field.querySelector('.field-text');
+        const inputName = input.name;
+        const inputPlaceholder = getPlaceholder(inputName);
+        const inputId = input.id;
+        const label = getLabel(inputId, inputName);
+
+        input.placeholder = inputPlaceholder;
+        field.prepend(label);
+      });
+    }
+  };
+
+  fixFormInit();
+});