3.7 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5f0d48e7b435f13ab6550051 | Paso 50 | 0 | step-50 |
--description--
El elemento legend actúa como una leyenda/descripción, para el contenido del elemento fieldset. Le da a los usuarios un contexto sobre lo que deben ingresar en esa parte del formulario.
Añade un elemento legend con el texto Is your cat an indoor or outdoor cat? sobre ambos botones de radio (radio button).
--hints--
Tu elemento legend debe tener una etiqueta de apertura. Las etiquetas de apertura tienen esta sintaxis: <elementName>.
assert(document.querySelector('legend'));
Tu elemento legend debe tener una etiqueta de cierre. Las etiquetas de cierre tiene una / después del carácter <.
assert(code.match(/<\/legend\>/));
Tu elemento legend debe estar inmediatamente debajo de la etiqueta de apertura del elemento fieldset y arriba de la etiqueta de apertura del elemento label del primer botón de radio (radio button). No está en la posición correcta.
const fieldsetElem = document.querySelector('fieldset');
const fieldsetElemChildren = fieldsetElem.children;
assert(
fieldsetElem.firstElementChild.nodeName === 'LEGEND' &&
fieldsetElemChildren[1].nodeName === 'LABEL' &&
fieldsetElemChildren[1].children[0].nodeName === 'INPUT' &&
fieldsetElemChildren[1].children[0].id === 'indoor'
);
El texto de tu elemento legend debe ser Is your cat an indoor or outdoor cat?. Probablemente olvidaste añadir el texto, tienes un error tipográfico o no está entre las etiquetas de apertura y cierre del elemento legend.
const extraSpacesRemoved = document
.querySelector('legend')
.innerText.replace(/\s+/g, ' ');
assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
--seed--
--seed-contents--
<html>
<body>
<h1>CatPhotoApp</h1>
<main>
<section>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
<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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
</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://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" 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://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" 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">
--fcc-editable-region--
<fieldset>
<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>
--fcc-editable-region--
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</section>
</main>
</body>
</html>