diff --git a/src/scripts/main.js b/src/scripts/main.js index a765fdb1d..77495dffb 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1,17 @@ 'use strict'; -// write code here +const forms = [...document.querySelectorAll('form')]; + +for (const form of forms) { + const inputs = [...form.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].toUpperCase() + input.name.slice(1); + input.parentElement.append(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%); }