diff --git a/README.md b/README.md index d24722b51..8bdc8260c 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ 1. Replace `` with your Github username in the link - - [DEMO LINK](https://.github.io/js_task_fix_form_DOM/) + - [DEMO LINK](https://ybriukhovetska.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..c718e10fb 100644 --- a/src/scripts/main.js +++ b/src/scripts/main.js @@ -1,3 +1,43 @@ 'use strict'; -// write code here +const forms = document.querySelectorAll('form'); + +function capitalize(value) { + if (!value) { + return ''; + } else { + const word = value[0].toUpperCase() + value.slice(1); + + return word; + } +} + +for (const form of forms) { + const inputs = form.querySelectorAll('input'); + + for (const input of inputs) { + if ( + [ + 'submit', + 'button', + 'reset', + 'hidden', + 'image', + 'file', + 'checkbox', + 'radio', + ].includes(input.type) + ) { + continue; + } + + const label = document.createElement('label'); + + label.classList.add('field-label'); + + label.htmlFor = input.id; + label.textContent = capitalize(input.name); + input.placeholder = capitalize(input.name); + input.parentNode.insertBefore(label, input); + } +}