2.0 KiB
2.0 KiB
id, title, challengeType, isHidden
| id | title | challengeType | isHidden |
|---|---|---|---|
| 5dfa22d1b521be39a3de7be0 | Part 12 | 0 | true |
Description
Turn the words cat photos located inside p element into a link by replacing the words with the anchor element added previously. The p element should show the same text in the browser, but the words cat photos should now be a link. There should only be one link showing in the app.
Tests
tests:
- text: Your code should only contain one anchor (`a`) element. Remove any extra anchor elements.
testString: assert( document.querySelectorAll('a').length === 1 );
- text: Your anchor (`a`) element should be nested within the `p` element.
testString: assert( $('p > a').length);
- text: The link's text should be `cat photos`. You have either omitted the text or have a typo.
testString: const nestedAnchor = $('p > a')[0];
assert(
nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com' &&
nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
);
- text: After nesting the anchor (`a`) element, the only `p` element content visible in the browser should be `Click here to view more cat photos.` Double check the text, spacing, or punctuation of both the `p` and nested anchor element.
testString: |
const pText = document.querySelector('p').innerText.toLowerCase().replace(/\s+/g, ' ');
assert( pText.match(/click here to view more cat photos\.?$/) );
Challenge Seed
<html>
<body>
<h1>CatPhotoApp</h1>
<main>
<h2>Cat Photos</h2>
<!-- TODO: Add link to cat photos -->
--fcc-editable-region--
<p>Click here to view more cat photos.</p>
<a href="https://freecatphotoapp.com">cat photos</a>
--fcc-editable-region--
<img src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back.">
</main>
</body>
</html>