Files
freeCodeCamp/curriculum/challenges/english/01-responsive-web-design/registration-form/part-021.md
Shaun Hamilton 4a605c5cd2 feat(curriculum): add registration form practice project (#42876)
* feat(curriculum): add registration-form practice project

* add parts 001-006

* add parts 007-009

* add parts 010-013

* add parts 014-024, fix 013

* add parts 025-043

* add parts 043-046

* add parts 0047-057 without tests

* fix tests and adjust index.md file I do not understand

* add css tests to parts 037-040

* add tests parts 040-057

* remove space around ERM

* add true assertion until document iframe is fixed

* add critical review suggestions

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>

* use clear, Tom-like language for 038

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>

* change order to match author's age

* apply suggestions with personal pazzaz

* add that thing Nich forgets

* use innerText

Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>

Co-authored-by: Tom <20648924+moT01@users.noreply.github.com>
Co-authored-by: gikf <60067306+gikf@users.noreply.github.com>
Co-authored-by: Nicholas Carrigan (he/him) <nhcarrigan@gmail.com>
2021-10-14 15:33:13 -07:00

1.7 KiB

id, title, challengeType, dashedName
id title challengeType dashedName
60f852f645b5310a8264f555 Part 21 0 part-21

--description--

Let us go to the next part of the registration form. This section will ask for the type of account the user is opening, and will confirm the user has read the terms and conditions.

Start by adding three label elements to the second fieldset.

--hints--

You should add three label elements to the second fieldset.

assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3);

The label elements should be siblings.

assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('label + label + label'));

--seed--

--seed-contents--

<!DOCTYPE html>
<html>
  <head>
    <title>freeCodeCamp Registration Form Project</title>
	  <link rel="stylesheet" type="text/css" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form action='https://fcc-registration-form.com'>
      <fieldset>
        <label>Enter Your First Name: <input type="text" required /></label>
        <label>Enter Your Last Name: <input type="text" required /></label>
        <label>Enter Your Email: <input type="email" required /></label>
        <label>Create a New Password: <input type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
--fcc-editable-region--
      <fieldset>

      </fieldset>
--fcc-editable-region--
      <fieldset></fieldset>
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
	color: #f5f6f7;
}

label {
	display: block;
	margin: 0.5rem 0;
}