finish

src/scripts/main.js

@@ -1,3 +1,43 @@
 'use strict';
 
 // write code here
+const inputs = Array.from(document.querySelectorAll('form div input'));
+const fields = Array.from(document.querySelectorAll('.field'));
+
+function createLabel(inputsForLabel) {
+  const labels = inputsForLabel.map((input) => {
+    const label = document.createElement('label');
+
+    label.classList.add('field-label');
+
+    label.htmlFor = input.id;
+
+    label.textContent = input.name;
+
+    return label;
+  });
+
+  return labels;
+}
+
+const newLabels = createLabel(inputs);
+
+function addPlaceholders(inputsForPlaceholder) {
+  inputsForPlaceholder.forEach(
+    (item) =>
+      (item.placeholder = item.name[0].toUpperCase() + item.name.slice(1)),
+  );
+}
+
+addPlaceholders(inputs);
+
+function addLabels(newLabel) {
+  for (let i = 0; i < newLabel.length; i++) {
+    const element = newLabel[i];
+    const field = fields[i];
+
+    field.appendChild(element);
+  }
+}
+
+addLabels(newLabels);

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%);
 }