From 11e0b49abf69418a2698c8f06829a97aee2c52b7 Mon Sep 17 00:00:00 2001
From: annbisha <annskaylove@gmail.com>
Date: Tue, 21 Apr 2026 12:15:26 +0300
Subject: [PATCH 1/3] done

---
 README.md           | 25 ++++++++++++++-----------
 src/scripts/main.js | 19 ++++++++++++++++++-
 2 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/README.md b/README.md
index d24722b51..7ea812ee3 100644
--- a/README.md
+++ b/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://github.com/annbisha.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
 
diff --git a/src/scripts/main.js b/src/scripts/main.js
index a765fdb1d..638994e77 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,3 +1,20 @@
 'use strict';
 
-// write code here
+'use strict';
+
+const inputs = document.querySelectorAll('.field input');
+
+inputs.forEach((input) => {
+  const inputName = input.name;
+
+  const labelText = inputName[0].toUpperCase() + inputName.slice(1);
+
+  input.placeholder = labelText;
+
+  const label = document.createElement('label');
+  label.classList.add('field-label');
+  label.setAttribute('for', input.id);
+  label.textContent = labelText;
+
+  input.parentElement.appendChild(label);
+});

From 36ead3566b1cce9f9afb7b99b68cebb0d62d8d40 Mon Sep 17 00:00:00 2001
From: annbisha <annskaylove@gmail.com>
Date: Tue, 21 Apr 2026 12:21:08 +0300
Subject: [PATCH 2/3] done

---
 src/scripts/main.js | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/scripts/main.js b/src/scripts/main.js
index 638994e77..efbc2c249 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,8 +1,7 @@
 'use strict';
 
-'use strict';
-
-const inputs = document.querySelectorAll('.field input');
+const form = document.querySelector('form');
+const inputs = form.querySelectorAll('input');
 
 inputs.forEach((input) => {
   const inputName = input.name;
@@ -16,5 +15,5 @@ inputs.forEach((input) => {
   label.setAttribute('for', input.id);
   label.textContent = labelText;
 
-  input.parentElement.appendChild(label);
+  input.parentElement.insertBefore(label, input);
 });

From 9a3b55a426aabaad18e8306be3272db50d18f448 Mon Sep 17 00:00:00 2001
From: annbisha <annskaylove@gmail.com>
Date: Tue, 21 Apr 2026 12:27:04 +0300
Subject: [PATCH 3/3] done

---
 src/scripts/main.js | 32 +++++++++++++++++++++-----------
 1 file changed, 21 insertions(+), 11 deletions(-)

diff --git a/src/scripts/main.js b/src/scripts/main.js
index efbc2c249..8a1930646 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,19 +1,29 @@
 'use strict';
 
-const form = document.querySelector('form');
-const inputs = form.querySelectorAll('input');
+const forms = document.querySelectorAll('form');
 
-inputs.forEach((input) => {
-  const inputName = input.name;
+forms.forEach((form) => {
+  const inputs = form.querySelectorAll('input');
 
-  const labelText = inputName[0].toUpperCase() + inputName.slice(1);
+  inputs.forEach((input) => {
+    const inputName = input.name;
 
-  input.placeholder = labelText;
+    if (!input.id) {
+      input.id = inputName;
+    }
 
-  const label = document.createElement('label');
-  label.classList.add('field-label');
-  label.setAttribute('for', input.id);
-  label.textContent = labelText;
+    const labelText = inputName[0].toUpperCase() + inputName.slice(1);
 
-  input.parentElement.insertBefore(label, input);
+    // placeholder
+    input.placeholder = labelText;
+
+    // label
+    const label = document.createElement('label');
+    label.classList.add('field-label');
+    label.htmlFor = input.id;
+    label.textContent = labelText;
+
+    // вставляем в родителя
+    input.parentElement.insertBefore(label, input);
+  });
 });