2.9 KiB
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5ef9b03c81a63668521804da | Paso 41 | 0 | step-41 |
--description--
Utiliza el elemento button para crear un botón cliqueable. Por ejemplo, <button>Click Here</button> crea un botón con el texto Click Here.
Añade un elemento button con el texto Submit debajo del elemento input. El comportamiento predeterminado de un botón sin atributos en un formulario es enviar la información a la ubicación especificada en el atributo action del formulario.
--hints--
Tu elemento button debe tener una etiqueta de apertura. Las etiquetas de apertura tienen esta sintaxis: <elementName>.
assert(document.querySelector('button'));
Tu elemento button debe tener una etiqueta de cierre. Las etiquetas de cierre tiene una / después del carácter <.
assert(code.match(/<\/button\>/));
El texto de tu elemento button debe ser Submit. Probablemente no has añadido el texto o tienes un error tipográfico.
assert(document.querySelector('button').innerText.toLowerCase() === 'submit');
Tu elemento button debe estar debajo del elemento input. Los tienes en el orden incorrecto.
const collection = [...document.querySelectorAll('input, button')].map(
(node) => node.nodeName
);
assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
--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--
<input type="text" name="catphotourl" placeholder="cat photo URL" required>
--fcc-editable-region--
</form>
</section>
</main>
</body>
</html>