2.2 KiB
id, title, challengeType, dashedName
| id | title | challengeType | dashedName |
|---|---|---|---|
| 5dfa22d1b521be39a3de7be0 | Step 12 | 0 | step-12 |
--description--
You can turn any text into a link, such as the text inside of a p element.
<p>I think <a href="https://www.freecodecamp.org">freeCodeCamp</a> is great.</p>
In the text of your p element, turn the words cat photos into a link by adding opening and closing anchor (a) tags around these words. Then set the href attribute to https://freecatphotoapp.com
--hints--
You should nest a new anchor (a) element within the p element.
const nestedAnchor = document.querySelector(`p > a`);
assert.isNotNull(nestedAnchor)
The link's href value should be https://freecatphotoapp.com. You have either omitted the href value or have a typo.
assert(
document.querySelector('p > a').href === 'https://freecatphotoapp.com/'
);
The link's text should be cat photos. You have either omitted the text or have a typo.
const nestedAnchor = document.querySelector('p > a');
const innerContent = nestedAnchor.innerHTML;
assert.isTrue(innerContent.trim() === 'cat photos');
The text inside your anchor element has extra leading or trailing whitespace. The only space in the anchor text should be between the word cat and the word photos.
const nestedAnchor = document.querySelector('p > a');
const innerContent = nestedAnchor.innerHTML;
assert.isNotTrue(/^\s+|\s+$/.test(innerContent));
After nesting the anchor (a) element, the only p element content visible in the browser should be See more cat photos in our gallery. Double check the text, spacing, or punctuation of both the p and nested anchor element.
assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
--seed--
--seed-contents--
<html>
<body>
<main>
<h1>CatPhotoApp</h1>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
--fcc-editable-region--
<p>See more cat photos in our gallery.</p>
--fcc-editable-region--
<a href="https://freecatphotoapp.com">link to cat pictures</a>
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
</main>
</body>
</html>