greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/curriculum/challenges/ukrainian/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md

17 KiB
Raw Blame History

id title challengeType forumTopicId dashedName
587d78af367417b2b2512b03 Створіть форму для опитування 14 301145 build-a-survey-form

--description--

Мета: Створити застосунок, функціонально схожий до https://survey-form.freecodecamp.rocks

Історія користувача:

  1. Ви повинні мати титул сторінки в елементі h1 з id зі значенням title
  2. Ви повинні мати коротке роз'яснення в елементі p з id зі значенням description
  3. Ви повинні мати елемент form з id зі значенням survey-form
  4. В елементі форми вам потрібно ввести своє ім'я в полі input, яке має id зі значенням name та type зі значенням text
  5. В елементі форми вам потрібно ввести свою електронну пошту в полі input, яке має id зі значенням email
  6. Якщо ви введете неправильно сформовану електронну адресу, то побачите помилку перевірки HTML5
  7. В формі ви можете ввести число в поле input, яке має id зі значенням number
  8. Якщо в полі введення чисел ви введете не число, то побачите помилку перевірки HTML5
  9. Якщо ви введете число поза межами діапазону чисел, що визначено атрибутами min та max, то побачите помилку перевірки HTML5
  10. Для імені, електронної пошти та полів введення чисел можна побачити відповідні елементи label в формі, що описують мету кожного поля відповідними ідентифікаторами: id="name-label", id="email-label" та id="number-label"
  11. Для імені, електронної пошти та полів введення чисел можна побачити текст заповнювача з описом або інструкцією до кожного поля
  12. В елементі форми ви повинні мати випадний елемент select з id зі значенням dropdown та принаймні два варіанти вибору
  13. В елементі форми ви можете вибрати опцію з групи принаймні двох радіокнопок, які згруповані з використанням атрибуту name
  14. В елементі форми ви можете вибрати декілька полів з серії прапорців, кожен з яких повинен мати атрибут value
  15. В елементі форми представлено textarea для додаткових коментарів
  16. В елементі форми представлено кнопку з id зі значенням submit для відправки всіх введень

Виконайте історію користувача та пройдіть тести, наведені нижче, щоб завершити цей проєкт. Оформте за власним стилем. Щасливого кодування!

Примітка: переконайтеся, що додали <link rel="stylesheet" href="styles.css"> до HTML для прив'язки з аркушем стилів та застосували CSS

--hints--

Ви повинні мати елемент h1 з id зі значенням title.

const el = document.getElementById('title')
assert(!!el && el.tagName === 'H1')

Ваш #title не повинен бути порожнім.

const el = document.getElementById('title')
assert(!!el && el.innerText.length > 0)

Ви повинні мати елемент p з id зі значенням description.

const el = document.getElementById('description')
assert(!!el && el.tagName === 'P')

Ваш #description не повинен бути порожнім.

const el = document.getElementById('description')
assert(!!el && el.innerText.length > 0)

Ви повинні мати елемент form з id зі значенням survey-form.

const el = document.getElementById('survey-form')
assert(!!el && el.tagName === 'FORM')

Ви повинні мати елемент input з id зі значенням name.

const el = document.getElementById('name')
assert(!!el && el.tagName === 'INPUT')

Ваш #name повинен мати type зі значенням text.

const el = document.getElementById('name')
assert(!!el && el.type === 'text')

Ваш #name повинен вимагати введення.

const el = document.getElementById('name')
assert(!!el && el.required)

Ваш #name повинен бути нащадком #survey-form.

const el = document.querySelector('#survey-form #name')
assert(!!el)

Ви повинні мати елемент input з id зі значенням email.

const el = document.getElementById('email')
assert(!!el && el.tagName === 'INPUT')

Ваш #email повинен мати type зі значенням email.

const el = document.getElementById('email')
assert(!!el && el.type === 'email')

Ваш #email повинен вимагати введення.

const el = document.getElementById('email')
assert(!!el && el.required)

Your #email should be a descendant of #survey-form.

const el = document.querySelector('#survey-form #email')
assert(!!el)

Ви повинні мати елемент input з id зі значенням number.

const el = document.getElementById('number')
assert(!!el && el.tagName === 'INPUT')

Ваш #number повинен бути нащадком #survey-form.

const el = document.querySelector('#survey-form #number')
assert(!!el)

Ваш #number повинен мати type зі значенням number.

const el = document.getElementById('number')
assert(!!el && el.type === 'number')

Ваш #number повинен мати атрибут min з числовим значенням.

const el = document.getElementById('number')
assert(!!el && el.min && isFinite(el.min))

Ваш #number повинен мати атрибут max з числовим значенням.

const el = document.getElementById('number')
assert(!!el && el.max && isFinite(el.max))

Ви повинні мати елемент label з id зі значенням name-label.

const el = document.getElementById('name-label')
assert(!!el && el.tagName === 'LABEL')

Ви повинні мати елемент label з id зі значенням email-label.

const el = document.getElementById('email-label')
assert(!!el && el.tagName === 'LABEL')

Ви повинні мати елемент label з id зі значенням number-label.

const el = document.getElementById('number-label')
assert(!!el && el.tagName === 'LABEL')

Ваш #name-label повинен містити текст, який описує введені дані.

const el = document.getElementById('name-label')
assert(!!el && el.innerText.length > 0)

Ваш #email-label повинен містити текст, який описує введені дані.

const el = document.getElementById('email-label')
assert(!!el && el.innerText.length > 0)

Ваш #number-label повинен містити текст, який описує введені дані.

const el = document.getElementById('number-label')
assert(!!el && el.innerText.length > 0)

Ваш #name-label повинен бути нащадком #survey-form.

const el = document.querySelector('#survey-form #name-label')
assert(!!el)

Ваш #email-label повинен бути нащадком #survey-form.

const el = document.querySelector('#survey-form #email-label')
assert(!!el)

Ваш #number-label повинен бути нащадком #survey-form.

const el = document.querySelector('#survey-form #number-label')
assert(!!el)

Ваш #name повинен мати атрибут placeholder та значення.

const el = document.getElementById('name')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)

Ваш #email повинен мати атрибут placeholder та значення.

const el = document.getElementById('email')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)

Ваш #number повинен мати атрибут placeholder та значення.

const el = document.getElementById('number')
assert(!!el && !!el.placeholder && el.placeholder.length > 0)

Ви повинні мати поле select з id зі значенням dropdown.

const el = document.getElementById('dropdown')
assert(!!el && el.tagName === 'SELECT')

Ваш #dropdown повинен мати щонайменше два елементи option з можливістю вибору (не відключені).

const els = document.querySelectorAll('#dropdown option:not([disabled])')
assert(els.length >= 2)

Ваш #dropdown повинен бути нащадком #survey-form.

const el = document.querySelector('#survey-form #dropdown')
assert(!!el)

Ви повинні мати щонайменше два елементи input з type зі значенням radio (радіокнопки).

const els = document.querySelectorAll('input[type="radio"]')
assert(els.length >= 2)

Ви повинні мати щонайменше дві радіокнопки, які є нащадками #survey-form.

const els = document.querySelectorAll('#survey-form input[type="radio"]')
assert(els.length >= 2)

Всі радіокнопки повинні мати атрибут value та значення.

const els1 = document.querySelectorAll('input[type="radio"]')
const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])')
assert(els1.length > 0 && els2.length === 0)

Всі радіокнопки повинні мати атрибут name та значення.

const els1 = document.querySelectorAll('input[type="radio"]')
const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])')
assert(els1.length > 0 && els2.length === 0)

В кожній групі радіокнопок повинно бути щонайменше 2 радіокнопки.

const radioButtons = document.querySelectorAll('input[type="radio"]');
const groups = {}

if (radioButtons) {
  radioButtons.forEach(el => {
    if (!groups[el.name]) groups[el.name] = []
    groups[el.name].push(el)
  })
}

const groupKeys = Object.keys(groups)

groupKeys.forEach(key => {
  if (groups[key].length < 2) assert(false)
})

assert(groupKeys.length > 0)

Ви повинні мати щонайменше два елементи input з type зі значенням checkbox (прапорцями), що є нащадками #survey-form.

const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
assert(els.length >= 2)

Всі прапорці всередині #survey-form повинні мати атрибут value та значення.

const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])')
assert(els1.length > 0 && els2.length === 0)

Ви повинні мати щонайменше один елемент textarea, що є нащадком #survey-form.

const el = document.querySelector('#survey-form textarea')
assert(!!el)

Ви повинні мати елемент input або button з id зі значенням submit.

const el = document.getElementById('submit')
assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))

Ваш #submit повинен мати type зі значенням submit.

const el = document.getElementById('submit')
assert(!!el && el.type === 'submit')

Ваш #submit повинен бути нащадком #survey-form.

const el = document.querySelector('#survey-form #submit')
assert(!!el)

--seed--

--seed-contents--

--solutions--

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
    <title>Survey Form</title>
  </head>
  <body>
    <h1>Survey Form</h1>
    <p>The card below was built as a sample survey form for freeCodeCamp.</p>
    <main id="main">
      <h1 id="title">Join the Togepi Fan Club!</h1>
      <p id="description">
        Enter your information here to receive updates about club activities,
        our monthly newsletter, and other email communications.
      </p>
      <form id="survey-form" action="#">
        <label for="name" id="name-label"
          ><p>Name:</p>
          <input type="text" id="name" placeholder="e.g. John Smith" required />
        </label>
        <label for="email" id="email-label"
          ><p>Email:</p>
          <input
            type="email"
            id="email"
            placeholder="e.g. john.smith@email.com"
            required
          />
        </label>
        <label for="age" id="number-label"
          ><p>Age<em>(optional)</em>:</p>
          <input
            type="number"
            id="number"
            placeholder="e.g. 19"
            min="18"
            max="99"
          />
        </label>
        <label for="interest" id="interest-label"
          ><p>What are you most interested in?</p>
          <select id="dropdown">
            <option selected disabled hidden></option>
            <option id="battles">Battling</option>
            <option id="breeding">Breeding</option>
            <option id="catching">Completing my Pokedex</option>
            <option id="exploring">Exploring new regions</option>
          </select>
        </label>
        <p>Who is your favourite Pokemon?</p>
        <label for="togepi">
          <input
            id="togepi"
            type="radio"
            name="favorite"
            value="togepi"
          />Togepi!
        </label>
        <label for="pikachu">
          <input
            id="pikachu"
            type="radio"
            name="favorite"
            value="pikachu"
          />Pikachu
        </label>
        <label for="other">
          <input id="other" type="radio" name="favorite" value="other" />Other
        </label>
        <p>Which communications do you want to receive?</p>
        <label for="newsletter">
          <input
            id="newsletter"
            type="checkbox"
            name="communications"
            value="newsletter"
          />Newsletter
        </label>
        <label for="events">
          <input
            id="events"
            type="checkbox"
            name="communications"
            value="events"
          />Event updates
        </label>
        <label for="updates">
          <input
            id="updates"
            type="checkbox"
            name="communications"
            value="updates"
          />Club updates
        </label>
        <p>Any other information you would like to share?</p>
        <textarea id="additional-information" rows="4" cols="50">
You can provide comments, suggestions, or feedback here.</textarea
        >
        <p>
          <em
            >Please note: This form is a proof of concept. Submitting the form
            will not actually transmit your data.</em
          >
        </p>
        <button type="Submit" id="submit">Submit</button>
      </form>
    </main>
  </body>
  <footer>
    <a href="../">Return to Project List</a> |
    <a href="https://www.nhcarrigan.com">Return to HomePage</a>
  </footer>
</html>

main {
  text-align: center;
  background-color: #92869c;
  background-blend-mode: lighten;
  max-width: 500px;
  margin: 20px auto;
  border-radius: 50px;
  box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
  color: black;
}
body {
  text-align: center;
  background: #3a3240;
  color: white;
}
input, textarea, select, button {
  background: #3a3240;
  color: white;
}
a {
  color: white;
}