2020-07-24 09:13:46 -07:00
---
id: 5f0d4ab1b435f13ab6550052
2021-10-21 10:07:52 -07:00
title: Step 51
2020-07-24 09:13:46 -07:00
challengeType: 0
2021-10-21 10:07:52 -07:00
dashedName: step-51
2020-07-24 09:13:46 -07:00
---
2020-11-27 19:02:05 +01:00
# --description--
2020-07-24 09:13:46 -07:00
Next, you are going to add some new form `input` elements, so add another `fieldset` element directly below the current `fieldset` element.
2020-11-27 19:02:05 +01:00
# --hints--
2020-07-24 09:13:46 -07:00
2020-11-27 19:02:05 +01:00
Your new `fieldset` element should have an opening tag. Opening tags have this syntax: `<elementName>` .
```js
assert(document.querySelectorAll('fieldset').length >= 2);
```
You should only add one opening `fieldset` tag. Please remove any extras.
```js
assert(document.querySelectorAll('fieldset').length === 2);
```
Your new `fieldset` element should have a closing tag. Closing tags have a `/` just after the `<` character.
```js
assert(code.match(/< \/fieldset > /g).length >= 2);
```
You should only add one closing `fieldset` tag. Please remove any extras.
```js
assert(code.match(/< \/fieldset > /g).length === 2);
```
The second `fieldset` element should not be nested in the first `fieldset` element.
```js
const childrenOf1stFieldset = [
...document.querySelector('form > fieldset').children
];
const foundElems = childrenOf1stFieldset.filter((child) => {
return child.nodeName === 'FIELDSET';
});
assert(foundElems.length === 0);
```
Both `fieldset` elements should be above the text field and its associated `label` element. They are out of order.
```js
const formChildren = $('form')[0].children;
assert(
formChildren[0].nodeName === 'FIELDSET' & &
formChildren[1].nodeName === 'FIELDSET' & &
formChildren[2] & &
formChildren[2].nodeName === 'INPUT' & &
formChildren[2].getAttribute('type') === 'text'
);
```
Your new `fieldset` element should be below the existing `fieldset` element. You have them in the wrong order.
```js
const fieldsetChildren = [...document.querySelectorAll('fieldset')].map(
(elem) => elem.children
);
assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
2020-07-24 09:13:46 -07:00
```
2020-11-27 19:02:05 +01:00
# --seed--
2020-07-24 09:13:46 -07:00
2020-11-27 19:02:05 +01:00
## --seed-contents--
2020-07-24 09:13:46 -07:00
```html
< html >
< body >
< h1 > CatPhotoApp< / h1 >
< main >
< section >
< h2 > Cat Photos< / h2 >
<!-- TODO: Add link to cat photos -->
2020-07-24 23:16:42 -07:00
< p > Click here to view more < a target = "_blank" href = "https://freecatphotoapp.com" > cat photos< / a > .< / p >
2021-09-21 23:46:55 +09:00
< a href = "https://freecatphotoapp.com" > < img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt = "A cute orange cat lying on its back." > < / a >
2020-07-24 09:13:46 -07:00
< / section >
< section >
< h2 > Cat Lists< / h2 >
< h3 > Things cats love:< / h3 >
< ul >
< li > cat nip< / li >
< li > laser pointers< / li >
< li > lasagna< / li >
< / ul >
< figure >
2021-09-21 23:46:55 +09:00
< img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt = "A slice of lasagna on a plate." >
2020-07-24 09:13:46 -07:00
< figcaption > Cats < em > love< / em > lasagna.< / figcaption >
< / figure >
< h3 > Top 3 things cats hate:< / h3 >
< ol >
< li > flea treatment< / li >
< li > thunder< / li >
< li > other cats< / li >
< / ol >
< figure >
2021-09-21 23:46:55 +09:00
< img src = "https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt = "Five cats looking around a field." >
2020-07-24 09:13:46 -07:00
< figcaption > Cats < strong > hate< / strong > other cats.< / figcaption >
< / figure >
< / section >
< section >
< h2 > Cat Form< / h2 >
< form action = "https://freecatphotoapp.com/submit-cat-photo" >
2020-11-27 19:02:05 +01:00
--fcc-editable-region--
2020-07-24 09:13:46 -07:00
< fieldset >
< legend > Is your cat an indoor or outdoor cat?< / legend >
< label > < input id = "indoor" type = "radio" name = "indoor-outdoor" value = "indoor" > Indoor< / label >
< label > < input id = "outdoor" type = "radio" name = "indoor-outdoor" value = "outdoor" > Outdoor< / label >
< / fieldset >
< input type = "text" name = "catphotourl" placeholder = "cat photo URL" required >
< button type = "submit" > Submit< / button >
2020-11-27 19:02:05 +01:00
--fcc-editable-region--
2020-07-24 09:13:46 -07:00
< / form >
< / section >
< / main >
< / body >
< / html >
```
