Skip to main content

--description--

Placeholder text is what is displayed in your input element before your user has inputted anything.

You can create placeholder text like so:

<input type="text" placeholder="this is placeholder text">

Note: Remember that input elements are self-closing.

--instructions--

Set the placeholder value of your text input to "cat photo URL".

--hints--

You should add a placeholder attribute to the existing text input element.

assert($('input[placeholder]').length > 0);

You should set the value of your placeholder attribute to cat photo URL.

assert(
$('input') &&
$('input').attr('placeholder') &&
$('input')
.attr('placeholder')
.match(/cat\s+photo\s+URL/gi)
);

The finished input element should not have a closing tag.

assert(!code.match(/<input.*\/?>.*<\/input>/gi));

The finished input element should have valid syntax.

assert($('input[type=text]').length > 0);

--seed--

--seed-contents--

<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
<ul>
<li>catnip</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>

--solutions--

<h2>CatPhotoApp</h2>
<main>
<p>Click here to view more <a href="#">cat photos</a>.</p>

<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>

<p>Things cats love:</p>
<ul>
<li>catnip</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" placeholder="cat photo URL">
</main>