2020-07-24 16:13:46 +00:00
---
id: 5f05a1d8e233dff4a68508d8
title: Part 46
challengeType: 0
2021-01-13 02:31:00 +00:00
dashedName: part-46
2020-07-24 16:13:46 +00:00
---
2020-11-27 18:02:05 +00:00
# --description--
2020-07-24 16:13:46 +00:00
Nest a another radio button with the option `Outdoor` in a new `label` element. The new radio button should be placed after the first one. Also, set its `id` attribute value to `outdoor` .
2020-11-27 18:02:05 +00:00
# --hints--
2020-07-24 16:13:46 +00:00
2020-11-27 18:02:05 +00:00
You will need to add a new `label` element in which to nest your new radio button. Make sure it has both an opening and closing tag.
```js
assert(
document.querySelectorAll('label').length === 2 & &
code.match(/< \/label \>/ g ). length = == 2
);
```
The text ` Outdoor` should be located directly to the right of your new `radio` button. Make sure there is a space between the element and the text. You have either omitted the text or have a typo.
```js
const radioButtons = [...$('input')];
assert(
radioButtons.filter((btn) =>
btn.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Outdoor/i)
).length
);
```
Your new radio button and associated label should be below the first one. You have them in the wrong order.
```js
const collection = [
...document.querySelectorAll('input[type="radio"]')
].map((node) => node.nextSibling.nodeValue.replace(/\s+/g, ''));
assert(collection.indexOf('Indoor') < collection.indexOf ( ' Outdoor ' ) ) ;
```
Your new radio button should have an `id` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
```js
assert($('input')[1].hasAttribute('id'));
```
Your new radio element should have an `id` attribute with the value `outdoor` . You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks.
```js
assert($('input')[1].id.match(/^outdoor$/));
2020-07-24 16:13:46 +00:00
```
2020-11-27 18:02:05 +00:00
# --seed--
2020-07-24 16:13:46 +00:00
2020-11-27 18:02:05 +00:00
## --seed-contents--
2020-07-24 16:13:46 +00:00
```html
< html >
< body >
< h1 > CatPhotoApp< / h1 >
< main >
< section >
< h2 > Cat Photos< / h2 >
<!-- TODO: Add link to cat photos -->
2020-07-25 06:16:42 +00:00
< p > Click here to view more < a target = "_blank" href = "https://freecatphotoapp.com" > cat photos< / a > .< / p >
< a href = "https://freecatphotoapp.com" > < img src = "https://bit.ly/fcc-relaxing-cat" alt = "A cute orange cat lying on its back." > < / a >
2020-07-24 16:13:46 +00: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 >
< img src = "https://bit.ly/fcc-lasagna" alt = "A slice of lasagna on a plate." >
< 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 >
< img src = "https://bit.ly/fcc-cats" alt = "Five cats looking around a field." >
< 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 18:02:05 +00:00
--fcc-editable-region--
2020-07-24 16:13:46 +00:00
< label > < input id = "indoor" type = "radio" > Indoor< / label >
2020-11-27 18:02:05 +00:00
--fcc-editable-region--
2020-07-24 16:13:46 +00:00
< input type = "text" name = "catphotourl" placeholder = "cat photo URL" required >
< button type = "submit" > Submit< / button >
< / form >
< / section >
< / main >
< / body >
< / html >
```