From dedd2817e5bb0ef571e6e6312b7408480389ffc1 Mon Sep 17 00:00:00 2001
From: Your Name <cocochoco.story@gmail.com>
Date: Fri, 29 May 2026 21:23:02 +0300
Subject: [PATCH] add task solution

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

diff --git a/README.md b/README.md
index d24722b51..7dc38044e 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://OlgaDnepr.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..84afdcced 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,3 +1,28 @@
 'use strict';
 
-// write code here
+const inputs = document.querySelectorAll('form input');
+
+inputs.forEach((input) => {
+  const nameAttr = input.name;
+
+  if (!nameAttr) {
+    return;
+  }
+
+  const formattedName = nameAttr.replace(/([A-Z])/g, ' $1').trim();
+
+  const labelText =
+    formattedName.charAt(0).toUpperCase() + formattedName.slice(1);
+
+  const label = document.createElement('label');
+
+  label.classList.add('field-label');
+  label.setAttribute('for', input.id);
+  label.textContent = labelText;
+
+  input.placeholder = labelText;
+
+  const parentContainer = input.parentElement;
+
+  parentContainer.insertBefore(label, input);
+});
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%);
 }