From ca2890dba4d7735faf124c14a6c212848d2fd92c Mon Sep 17 00:00:00 2001
From: sr xie <srxie@MacBook-Air-sr.netis.cc>
Date: Thu, 5 Nov 2026 17:56:43 +0200
Subject: [PATCH 1/2] Solution

---
 README.md            |  2 +-
 src/scripts/main.js  | 19 ++++++++++++++++++-
 src/styles/main.scss | 41 +++++++++++++++++++++++------------------
 3 files changed, 42 insertions(+), 20 deletions(-)

diff --git a/README.md b/README.md
index d24722b51..0567f1532 100644
--- a/README.md
+++ b/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://serg121192.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;
diff --git a/src/scripts/main.js b/src/scripts/main.js
index a765fdb1d..4db7e3740 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,3 +1,20 @@
 'use strict';
 
-// write code here
+const formInputs = document.querySelectorAll('form input');
+
+formInputs.forEach((input) => {
+  const labelElement = document.createElement('label');
+  const inputId = input.getAttribute('id');
+  const inputName = input.getAttribute('name');
+
+  labelElement.setAttribute('class', 'field-label');
+  labelElement.setAttribute('for', inputId);
+  labelElement.textContent = inputName;
+
+  input.insertAdjacentElement('beforebegin', labelElement);
+
+  input.setAttribute(
+    'placeholder',
+    inputName.charAt(0).toUpperCase() + inputName.slice(1),
+  );
+});
diff --git a/src/styles/main.scss b/src/styles/main.scss
index e19689df4..fffef1553 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -14,19 +14,20 @@ $blue: #617db7;
 }
 
 body {
-  background: lightgrey;
   font-family: sans-serif;
+  background: lightgrey;
 }
 
 .login-wrap {
   @include centered;
 
+  box-sizing: border-box;
   width: 450px;
   height: 530px;
   border-radius: 3px;
+
   background: #fff;
   box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
-  box-sizing: border-box;
 }
 
 form {
@@ -36,9 +37,9 @@ form {
 
 .field {
   position: relative;
-  padding: 40px $base-spacing 0;
-  width: 50%;
   box-sizing: border-box;
+  width: 50%;
+  padding: 40px $base-spacing 0;
 }
 
 .field--full {
@@ -47,29 +48,33 @@ form {
 
 .field-label {
   position: absolute;
-  width: 100%;
-  height: 100%;
   top: 0;
   left: 0;
-  padding: $base-spacing;
-  font-size: 11px;
-  text-transform: uppercase;
-  font-weight: 600;
+
   overflow: hidden;
-  border: 1px solid transparent;
   display: flex;
+
   box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+  padding: $base-spacing;
+  border: 1px solid transparent;
+
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
 }
 
 .field-text {
+  box-sizing: border-box;
+  width: 100%;
+  height: 40px;
+  padding: $base-spacing;
   border: 1px solid $normal-color;
   border-radius: 4px;
-  padding: $base-spacing;
-  height: 40px;
+
   font-size: 13px;
   color: $normal-color;
-  width: 100%;
-  box-sizing: border-box;
 }
 
 .field-button {
@@ -79,20 +84,20 @@ form {
 }
 
 .field-button--submit {
+  color: white;
   background: $green;
   box-shadow: inset 0 -5px 0 color.adjust($green, $lightness: -10%);
-  color: white;
 }
 
 .field-button--facebook {
+  color: white;
   background: $blue;
   box-shadow: inset 0 -5px 0 color.adjust($blue, $lightness: -10%);
-  color: white;
 }
 
 .login-row {
   width: 100%;
-  padding: $base-spacing;
   margin-top: 20px;
+  padding: $base-spacing;
   border-top: 1px solid color.adjust($normal-color, $lightness: 20%);
 }

From 5b03dc6955444684988695cd661a0cf8dfac2153 Mon Sep 17 00:00:00 2001
From: sr xie <srxie@MacBook-Air-sr.local>
Date: Thu, 5 Nov 2026 19:41:38 +0200
Subject: [PATCH 2/2] Solution fixed

---
 src/scripts/main.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/scripts/main.js b/src/scripts/main.js
index 4db7e3740..719dcc293 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -11,7 +11,7 @@ formInputs.forEach((input) => {
   labelElement.setAttribute('for', inputId);
   labelElement.textContent = inputName;
 
-  input.insertAdjacentElement('beforebegin', labelElement);
+  input.parentElement.appendChild(labelElement);
 
   input.setAttribute(
     'placeholder',