From c099f189d4062748b6d13f3fb66f0afd4f87f806 Mon Sep 17 00:00:00 2001
From: ILLYA SMYK <smykillya@gmail.com>
Date: Thu, 28 May 2026 20:21:54 +0200
Subject: [PATCH 1/3] add task solution

---
 src/scripts/main.js  | 12 +++++++++++-
 src/styles/main.scss | 41 +++++++++++++++++++++++------------------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/scripts/main.js b/src/scripts/main.js
index a765fdb1d..d2b86fcb2 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,3 +1,13 @@
 'use strict';
 
-// write code here
+const inputs = [...document.querySelectorAll('input')];
+
+for (const input of inputs) {
+  const label = document.createElement('label');
+
+  label.classList.add('field-label');
+  label.setAttribute('for', input.id);
+  label.textContent = input.name;
+  input.placeholder = input.name[0].toLocaleUpperCase() + input.name.slice(1);
+  input.before(label);
+}
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 3beed6514ce6590eddf8c85c8825a3c5b6c59337 Mon Sep 17 00:00:00 2001
From: ILLYA SMYK <smykillya@gmail.com>
Date: Thu, 28 May 2026 20:30:47 +0200
Subject: [PATCH 2/3] add final task solution

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

diff --git a/src/scripts/main.js b/src/scripts/main.js
index d2b86fcb2..f2e8fc54c 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,6 +1,8 @@
 'use strict';
 
-const inputs = [...document.querySelectorAll('input')];
+const form = document.querySelector('form');
+
+const inputs = [...form.querySelectorAll('input')];
 
 for (const input of inputs) {
   const label = document.createElement('label');
@@ -9,5 +11,5 @@ for (const input of inputs) {
   label.setAttribute('for', input.id);
   label.textContent = input.name;
   input.placeholder = input.name[0].toLocaleUpperCase() + input.name.slice(1);
-  input.before(label);
+  input.parentElement.append(label);
 }

From 94f557ccb63dad557d556d247bd0080badf2e9fd Mon Sep 17 00:00:00 2001
From: ILLYA SMYK <smykillya@gmail.com>
Date: Thu, 28 May 2026 20:37:23 +0200
Subject: [PATCH 3/3] add task solution2

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

diff --git a/src/scripts/main.js b/src/scripts/main.js
index f2e8fc54c..77495dffb 100644
--- a/src/scripts/main.js
+++ b/src/scripts/main.js
@@ -1,15 +1,17 @@
 'use strict';
 
-const form = document.querySelector('form');
+const forms = [...document.querySelectorAll('form')];
 
-const inputs = [...form.querySelectorAll('input')];
+for (const form of forms) {
+  const inputs = [...form.querySelectorAll('input')];
 
-for (const input of inputs) {
-  const label = document.createElement('label');
+  for (const input of inputs) {
+    const label = document.createElement('label');
 
-  label.classList.add('field-label');
-  label.setAttribute('for', input.id);
-  label.textContent = input.name;
-  input.placeholder = input.name[0].toLocaleUpperCase() + input.name.slice(1);
-  input.parentElement.append(label);
+    label.classList.add('field-label');
+    label.setAttribute('for', input.id);
+    label.textContent = input.name;
+    input.placeholder = input.name[0].toUpperCase() + input.name.slice(1);
+    input.parentElement.append(label);
+  }
 }