gitadmin/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-05-28 18:26:54 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): do not require trailing slash in cat photo 12 (#51470)

Browse Source
This commit is contained in:
Riya Dhawan
2023-09-06 00:44:37 +05:30
committed by GitHub
parent 59a726fb1d
commit 2e7d900538
1 changed files with 7 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+7 -11
View File
@@ -10,10 +10,10 @@ dashedName: step-12
You can turn any text into a link, such as the text inside of a `p` element.
``` html
<p>I think <a href="https://www.freecodecamp.org/">freeCodeCamp</a> is great.</p>
<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/`
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--
@@ -21,22 +21,22 @@ In the text of your `p` element, turn the words `cat photos` into a link by addi
You should nest a new anchor (`a`) element within the `p` element.
```js
assert($('p > a').length);
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.
```js
const nestedAnchor = $('p > a')[0];
assert(
nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com'
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.
```js
const nestedAnchor = $('p > a')[0];
const nestedAnchor = document.querySelector(`p > a`);
assert(
nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
);
@@ -45,11 +45,7 @@ assert(
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.
```js
const pText = document
.querySelector('p')
.innerText.toLowerCase()
.replace(/\s+/g, ' ');
assert(pText.match(/see more cat photos in our gallery\.?$/));
assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
```
# --seed--