3.9 KiB
id | title | challengeType | videoUrl | forumTopicId | dashedName |
---|---|---|---|---|---|
bad87fee1348bd9aede08835 | Anida muchos elementos dentro de un solo elemento div | 0 | https://scrimba.com/p/pVMPUv/cNW4kC3 | 18246 | nest-many-elements-within-a-single-div-element |
--description--
El elemento div
, también conocido como elemento de división, es un contenedor de propósito general para otros elementos.
El elemento div
es probablemente el elemento HTML más utilizado de todos.
Al igual que cualquier otro elemento sin cierre automático, puedes abrir un elemento div
con <div>
y cerrarlo en otra línea con </div>
.
--instructions--
Anida "Things cats love"" y "Top 3 Things cats hate" moviendo todo dentro de un solo elemento div
.
Sugerencia: Intenta poner tu etiqueta de apertura div
por encima de tu elemento p
"Things cats love" y tu etiqueta de cierre de div
después de cerrar ol
para que ambas listas estén dentro de un div
.
--hints--
Tus elementos p
deben anidarse dentro de tu elemento div
.
assert($('div').children('p').length > 1);
Tu elemento ul
debe anidarse dentro de tu elemento div
.
assert($('div').children('ul').length > 0);
Tu elemento ol
debe anidarse dentro de tu elemento div
.
assert($('div').children('ol').length > 0);
Tu elemento div
debe tener una etiqueta de cierre.
assert(
code.match(/<\/div>/g) &&
code.match(/<\/div>/g).length === code.match(/<div>/g).length
);
--seed--
--seed-contents--
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
--solutions--
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://www.bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
<div>
<p>Things cats love:</p>
<ul>
<li>cat nip</li>
<li>laser pointers</li>
<li>lasagna</li>
</ul>
<p>Top 3 things cats hate:</p>
<ol>
<li>flea treatment</li>
<li>thunder</li>
<li>other cats</li>
</ol>
</div>
<form action="https://www.freecatphotoapp.com/submit-cat-photo">
<label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
<label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
<label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
<label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
<label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>