freeCodeCamp

3.2 KiB

Raw Blame History

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

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 que no se cierre automáticamente, puede abrir un elemento div con <div> y cerrarlo en otra línea con </div> .

Instructions

Anida las listas de "Cosas que los gatos aman" y "Cosas que los gatos odian", todo dentro de un único elemento 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

3.2 KiB Raw Blame History