3.2 KiB
3.2 KiB
id | title | challengeType | videoUrl | localeTitle |
---|---|---|---|---|
bad87fee1348bd9aede08835 | Nest Many Elements within a Single div Element | 0 | Anidar muchos elementos dentro de un único elemento div |
Description
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 que no se cierre automáticamente, puede abrir un elemento div
con <div>
y cerrarlo en otra línea con </div>
. Instructions
div
. Sugerencia: intente colocar la etiqueta div
apertura sobre el elemento p
"Things cats love" y la etiqueta div
cierre después de la etiqueta ol
cierre para que ambas listas estén dentro de una div
. Tests
tests:
- text: Anida tus elementos <code>p</code> dentro de tu elemento <code>div</code> .
testString: 'assert($("div").children("p").length > 1, "Nest your <code>p</code> elements inside your <code>div</code> element.");'
- text: Anida tu elemento <code>ul</code> dentro de tu elemento <code>div</code> .
testString: 'assert($("div").children("ul").length > 0, "Nest your <code>ul</code> element inside your <code>div</code> element.");'
- text: Anida tu elemento <code>ol</code> dentro de tu elemento <code>div</code> .
testString: 'assert($("div").children("ol").length > 0, "Nest your <code>ol</code> element inside your <code>div</code> element.");'
- text: Asegúrese de que su elemento <code>div</code> tiene una etiqueta de cierre.
testString: 'assert(code.match(/<\/div>/g) && code.match(/<\/div>/g).length === code.match(/<div>/g).length, "Make sure your <code>div</code> element has a closing tag.");'
Challenge Seed
<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>
<a href="#"><img src="https://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="/submit-cat-photo">
<label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
<label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
<label><input type="checkbox" name="personality" checked> Loving</label>
<label><input type="checkbox" name="personality"> Lazy</label>
<label><input type="checkbox" name="personality"> Energetic</label><br>
<input type="text" placeholder="cat photo URL" required>
<button type="submit">Submit</button>
</form>
</main>
Solution
// solution required