freeCodeCamp/curriculum/challenges/spanish/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-t...

2.4 KiB

id title localeTitle challengeType guideUrl videoUrl
bad87fee1348bd9aedf08830 Add Placeholder Text to a Text Field Añadir texto de marcador de posición a un campo de texto 0 https://spanish.freecodecamp.org/guide/certificates/add-placeholder-text-to-a-text-field

Description

texto de marcador de posición es lo que se muestra en su elemento de input antes de que su usuario haya ingresado algo. Puede crear texto de marcador de posición de la siguiente manera: <input type="text" placeholder="this is placeholder text">

Instructions

Establezca el valor del placeholder de placeholder de su input texto en "URL de foto de gato".

Tests

tests:
  - text: Agregue un atributo de <code>placeholder</code> al elemento de <code>input</code> texto existente.
    testString: 'assert($("input[placeholder]").length > 0, "Add a <code>placeholder</code> attribute to the existing text <code>input</code> element.");'
  - text: Establezca el valor de su atributo de marcador de posición en &quot;URL de foto de gato&quot;.
    testString: 'assert($("input") && $("input").attr("placeholder") && $("input").attr("placeholder").match(/cat\s+photo\s+URL/gi), "Set the value of your placeholder attribute to "cat photo URL".");'
  - text: El elemento de <code>input</code> terminado debe tener una sintaxis válida.
    testString: 'assert($("input[type=text]").length > 0 && code.match(/<input((\s+\w+(\s*=\s*(?:".*?"|".*?"|[\^"">\s]+))?)+\s*|\s*)\/?>/gi), "The finished <code>input</code> element should have valid syntax.");'

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>
  <input type="text">
</main>

Solution

// solution required