ContextQMD
Back to Freecodecamp

Step 31

curriculum/challenges/english/blocks/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md

latest3.3 KB
Original Source

--description--

Add the text I accept the terms and conditions immediately after the input element in the newly added label. Then link the text terms and conditions to the following location:

md
https://www.freecodecamp.org/news/terms-of-service/

--hints--

You should add I accept the terms and conditions text to the label following the third fieldset.

js
assert.equal(document.querySelector('fieldset:nth-child(3) + label')?.innerText.trim(), 'I accept the terms and conditions');

You should use an a element to link to the terms and conditions.

js
assert.exists(document.querySelector('fieldset:nth-child(3) + label a'));

You should put the new text immediately after the input element in the label.

js
assert.exists(document.querySelector('fieldset:nth-child(3) + label > input + a'));

You should give the a element an href of https://www.freecodecamp.org/news/terms-of-service/.

js
assert.match(document.querySelector('fieldset:nth-child(3) + label > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/);

You should only wrap the a element around the text terms and conditions.

js
assert.equal(document.querySelector('fieldset:nth-child(3) + label > input + a')?.textContent.trim(), 'terms and conditions');

The text inside your anchor element has extra leading or trailing whitespace. The only spaces in the anchor text should be between the words terms, and, and conditions.

js
const nestedAnchor = document.querySelector('fieldset:nth-child(3) + label > input + a')?.textContent;
const innerContent = nestedAnchor?.innerHTML;
assert.isNotTrue(/^\s+|\s+$/.test(innerContent));

--seed--

--seed-contents--

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Registration Form</title>
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <h1>Registration Form</h1>
    <p>Please fill out this form with the required information</p>
    <form method="post" action='https://register-demo.freecodecamp.org'>
      <fieldset>
        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
      </fieldset>
      <fieldset>
        <legend>Account type (required)</legend>
        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" checked /> Personal</label>
        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business</label>
      </fieldset>
      <fieldset></fieldset>
--fcc-editable-region--
      <label for="terms-and-conditions"><input id="terms-and-conditions" type="checkbox" required /></label>
--fcc-editable-region--
      <input type="submit" value="Submit" />
    </form>
  </body>
</html>
css
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
}

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