mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-01-08 21:02:25 -05:00
chore(curriculum): update cat photo app workshop to match RWD with IDs and everything (#56844)
This commit is contained in:
Ilenia
@@ -10,164 +10,172 @@
|
||||
"superBlock": "front-end-development",
|
||||
"challengeOrder": [
|
||||
{
|
||||
"id": "66731cd027ef3acb155669f5",
|
||||
"id": "5dc174fcf86c76b9248c6eb2",
|
||||
"title": "Step 1"
|
||||
},
|
||||
{
|
||||
"id": "6690b9626a66f51257ae5a91",
|
||||
"id": "5dc1798ff86c76b9248c6eb3",
|
||||
"title": "Step 2"
|
||||
},
|
||||
{
|
||||
"id": "6690b9a24f5b0f1300040c76",
|
||||
"id": "5dc17d3bf86c76b9248c6eb4",
|
||||
"title": "Step 3"
|
||||
},
|
||||
{
|
||||
"id": "6690ba16cf76f613b4e36197",
|
||||
"id": "5dc17dc8f86c76b9248c6eb5",
|
||||
"title": "Step 4"
|
||||
},
|
||||
{
|
||||
"id": "6690bb0b4062b114997f708a",
|
||||
"id": "5dc2385ff86c76b9248c6eb7",
|
||||
"title": "Step 5"
|
||||
},
|
||||
{
|
||||
"id": "6690bd5ad96139157eedf697",
|
||||
"id": "5dc23991f86c76b9248c6eb8",
|
||||
"title": "Step 6"
|
||||
},
|
||||
{
|
||||
"id": "6690be42942f421648b119eb",
|
||||
"id": "5dc23f9bf86c76b9248c6eba",
|
||||
"title": "Step 7"
|
||||
},
|
||||
{
|
||||
"id": "6690be902f051416f668962b",
|
||||
"id": "5dc24073f86c76b9248c6ebb",
|
||||
"title": "Step 8"
|
||||
},
|
||||
{
|
||||
"id": "6690bebfd5c918179ea4fd3a",
|
||||
"id": "5dc24165f86c76b9248c6ebc",
|
||||
"title": "Step 9"
|
||||
},
|
||||
{
|
||||
"id": "6690beec809b4f184cab6914",
|
||||
"id": "5dc24614f86c76b9248c6ebd",
|
||||
"title": "Step 10"
|
||||
},
|
||||
{
|
||||
"id": "669840900adeba35e4ebb917",
|
||||
"id": "5ddbd81294d8ddc1510a8e56",
|
||||
"title": "Step 11"
|
||||
},
|
||||
{
|
||||
"id": "669840c70aea8936930dba35",
|
||||
"id": "671b6e873249bb35c9debfcf",
|
||||
"title": "Step 12"
|
||||
},
|
||||
{
|
||||
"id": "6698410269ace0373ec812b6",
|
||||
"id": "671141f948cbab359e74cc93",
|
||||
"title": "Step 13"
|
||||
},
|
||||
{
|
||||
"id": "6698417821794837f14ca275",
|
||||
"id": "671141feba228a35cefba82d",
|
||||
"title": "Step 14"
|
||||
},
|
||||
{
|
||||
"id": "6698419d8f52cf3891f34853",
|
||||
"id": "5dfa2407b521be39a3de7be1",
|
||||
"title": "Step 15"
|
||||
},
|
||||
{
|
||||
"id": "66984218720e29393b1adad2",
|
||||
"id": "671144cdcc01d73f7dd79dc9",
|
||||
"title": "Step 16"
|
||||
},
|
||||
{
|
||||
"id": "6698429ba5761b39f8aad814",
|
||||
"id": "5dfa30b9eacea3f48c6300ad",
|
||||
"title": "Step 17"
|
||||
},
|
||||
{
|
||||
"id": "669842cee55b683aa13ee758",
|
||||
"id": "5f07be6ef7412fbad0c5626b",
|
||||
"title": "Step 18"
|
||||
},
|
||||
{
|
||||
"id": "669842f261665d3b4a42df81",
|
||||
"id": "5f07c98cdb9413cbd4b16750",
|
||||
"title": "Step 19"
|
||||
},
|
||||
{
|
||||
"id": "66984330a510e63bf0787898",
|
||||
"id": "5dfa3589eacea3f48c6300ae",
|
||||
"title": "Step 20"
|
||||
},
|
||||
{
|
||||
"id": "6698440c54c8823cc60af8bc",
|
||||
"id": "5dfa371beacea3f48c6300af",
|
||||
"title": "Step 21"
|
||||
},
|
||||
{
|
||||
"id": "6698444102ebd53d78cf66f8",
|
||||
"id": "5dfa37b9eacea3f48c6300b0",
|
||||
"title": "Step 22"
|
||||
},
|
||||
{
|
||||
"id": "66984484deb84b3e21e5b3d7",
|
||||
"id": "5dfb5ecbeacea3f48c6300b1",
|
||||
"title": "Step 23"
|
||||
},
|
||||
{
|
||||
"id": "66984535d474083eec6bb8da",
|
||||
"id": "5dfb6250eacea3f48c6300b2",
|
||||
"title": "Step 24"
|
||||
},
|
||||
{
|
||||
"id": "6698457295f6403fa49050b8",
|
||||
"id": "5dfb655eeacea3f48c6300b3",
|
||||
"title": "Step 25"
|
||||
},
|
||||
{
|
||||
"id": "6698458e123b4f403936994d",
|
||||
"id": "5dfb6a35eacea3f48c6300b4",
|
||||
"title": "Step 26"
|
||||
},
|
||||
{
|
||||
"id": "669845af34899240d9196258",
|
||||
"id": "5ef9b03c81a63668521804d0",
|
||||
"title": "Step 27"
|
||||
},
|
||||
{
|
||||
"id": "66984881117baa41da8bbde0",
|
||||
"id": "5ef9b03c81a63668521804d1",
|
||||
"title": "Step 28"
|
||||
},
|
||||
{
|
||||
"id": "669848cd668e7242872f4861",
|
||||
"id": "5ef9b03c81a63668521804d2",
|
||||
"title": "Step 29"
|
||||
},
|
||||
{
|
||||
"id": "66984905e95af5432faa28b1",
|
||||
"id": "5ef9b03c81a63668521804d3",
|
||||
"title": "Step 30"
|
||||
},
|
||||
{
|
||||
"id": "6698491eff5f2e43c20c6503",
|
||||
"id": "5efada803cbd2bbdab94e332",
|
||||
"title": "Step 31"
|
||||
},
|
||||
{
|
||||
"id": "6698496716e821448ba724a6",
|
||||
"id": "5efae0543cbd2bbdab94e333",
|
||||
"title": "Step 32"
|
||||
},
|
||||
{
|
||||
"id": "66984e0cb4febb50c3794edf",
|
||||
"id": "5efae16e3cbd2bbdab94e334",
|
||||
"title": "Step 33"
|
||||
},
|
||||
{
|
||||
"id": "66984e8ab54bee517207be42",
|
||||
"id": "5ef9b03c81a63668521804d4",
|
||||
"title": "Step 34"
|
||||
},
|
||||
{
|
||||
"id": "66984ec64a3652522e81c678",
|
||||
"id": "5ef9b03c81a63668521804e7",
|
||||
"title": "Step 35"
|
||||
},
|
||||
{
|
||||
"id": "66984eef66cc1752d93b53f5",
|
||||
"id": "5ef9b03c81a63668521804e8",
|
||||
"title": "Step 36"
|
||||
},
|
||||
{
|
||||
"id": "66984fe8efbd8c53a78c9b62",
|
||||
"id": "5ef9b03c81a63668521804e9",
|
||||
"title": "Step 37"
|
||||
},
|
||||
{
|
||||
"id": "66985068aeb06e54562df39e",
|
||||
"id": "5ef9b03c81a63668521804ea",
|
||||
"title": "Step 38"
|
||||
},
|
||||
{
|
||||
"id": "669850ce0ccf395511ff4254",
|
||||
"id": "5ef9b03c81a63668521804eb",
|
||||
"title": "Step 39"
|
||||
},
|
||||
{
|
||||
"id": "6698510677b5e655ba8c1017",
|
||||
"id": "5ef9b03c81a63668521804ec",
|
||||
"title": "Step 40"
|
||||
},
|
||||
{
|
||||
"id": "5ef9b03c81a63668521804ee",
|
||||
"title": "Step 41"
|
||||
},
|
||||
{
|
||||
"id": "62bb4009e3458a128ff57d5d",
|
||||
"title": "Step 42"
|
||||
}
|
||||
],
|
||||
"helpCategory": "HTML-CSS"
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 66731cd027ef3acb155669f5
|
||||
id: 5dc174fcf86c76b9248c6eb2
|
||||
title: Step 1
|
||||
challengeType: 0
|
||||
dashedName: step-1
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6690b9626a66f51257ae5a91
|
||||
id: 5dc1798ff86c76b9248c6eb3
|
||||
title: Step 2
|
||||
challengeType: 0
|
||||
dashedName: step-2
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6690b9a24f5b0f1300040c76
|
||||
id: 5dc17d3bf86c76b9248c6eb4
|
||||
title: Step 3
|
||||
challengeType: 0
|
||||
dashedName: step-3
|
||||
@@ -9,7 +9,7 @@ dashedName: step-3
|
||||
|
||||
The `p` element is used to create a paragraph of text on websites. Create a `p` element below your `h2` element and give it the following text:
|
||||
|
||||
`See more cat photos in our gallery.`
|
||||
`Everyone loves cute cats online!`
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -25,13 +25,13 @@ Your `p` element should have a closing tag. Closing tags have a `/` just after t
|
||||
assert.match(code, /<\/p\>/);
|
||||
```
|
||||
|
||||
Your `p` element's text should be `See more cat photos in our gallery.` You have either omitted the text or have a typo.
|
||||
Your `p` element's text should be `Everyone loves cute cats online!` You have either omitted the text or have a typo.
|
||||
|
||||
```js
|
||||
const extraSpacesRemoved = document
|
||||
.querySelector('p')
|
||||
.innerText.replace(/\s+/g, ' ');
|
||||
assert.match(extraSpacesRemoved, /see more cat photos in our gallery\.?$/i);
|
||||
assert.match(extraSpacesRemoved, /everyone loves cute cats online!$/i);
|
||||
```
|
||||
|
||||
Your `p` element should be below the `h2` element. You have them in the wrong order.
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6690ba16cf76f613b4e36197
|
||||
id: 5dc17dc8f86c76b9248c6eb5
|
||||
title: Step 4
|
||||
challengeType: 0
|
||||
dashedName: step-4
|
||||
@@ -53,7 +53,7 @@ Your comment should be above the `p` element. You have them in the wrong order.
|
||||
assert.match(
|
||||
code
|
||||
.replace(/\s/g, ''),
|
||||
/<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
|
||||
/<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
|
||||
);
|
||||
```
|
||||
|
||||
@@ -68,11 +68,9 @@ assert.match(
|
||||
<h2>Cat Photos</h2>
|
||||
--fcc-editable-region--
|
||||
|
||||
<p>See more cat photos in our gallery.</p>
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6690bb0b4062b114997f708a
|
||||
id: 5dc2385ff86c76b9248c6eb7
|
||||
title: Step 5
|
||||
challengeType: 0
|
||||
dashedName: step-5
|
||||
@@ -56,7 +56,7 @@ Your `main` element's closing tag should be below the `p` element. You have them
|
||||
const mainNode = document.querySelector('main');
|
||||
const pNode = document.querySelector('p');
|
||||
assert.isTrue(mainNode.contains(pNode));
|
||||
assert.match(pNode.textContent.toLowerCase(), /see more cat photos in our gallery/);
|
||||
assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online/);
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -71,7 +71,7 @@ assert.match(pNode.textContent.toLowerCase(), /see more cat photos in our galler
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>See more cat photos in our gallery.</p>
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6690bd5ad96139157eedf697
|
||||
id: 5dc23991f86c76b9248c6eb8
|
||||
title: Step 6
|
||||
challengeType: 0
|
||||
dashedName: step-6
|
||||
@@ -71,14 +71,14 @@ Your code should have a `p` element. You have removed the `p` element from an ea
|
||||
assert.exists(document.querySelector('p'));
|
||||
```
|
||||
|
||||
The text of the `p` element should be `See more cat photos in our gallery.` Do not change the text, spacing, or punctuation of the `p` element.
|
||||
The text of the `p` element should be `Everyone loves cute cats online!` Do not change the text, spacing, or punctuation of the `p` element.
|
||||
|
||||
```js
|
||||
assert.match(
|
||||
document
|
||||
.querySelector('p')
|
||||
.innerText.toLowerCase(),
|
||||
/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/
|
||||
/everyone\s+loves\s+cute\s+cats\s+online!$/
|
||||
);
|
||||
```
|
||||
|
||||
@@ -100,11 +100,9 @@ assert.match(code.toLowerCase(), /-->\s*\n\s{6}<p>/);
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>See more cat photos in our gallery.</p>
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
</main>
|
||||
--fcc-editable-region--
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6690be42942f421648b119eb
|
||||
id: 5dc23f9bf86c76b9248c6eba
|
||||
title: Step 7
|
||||
challengeType: 0
|
||||
dashedName: step-7
|
||||
@@ -52,12 +52,10 @@ assert.isBelow(collection.indexOf('P'), collection.indexOf('IMG'));
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
--fcc-editable-region--
|
||||
<p>See more cat photos in our gallery.</p>
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
|
||||
--fcc-editable-region--
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6690be902f051416f668962b
|
||||
id: 5dc24073f86c76b9248c6ebb
|
||||
title: Step 8
|
||||
challengeType: 0
|
||||
dashedName: step-8
|
||||
@@ -62,7 +62,7 @@ assert.match(code, /<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curr
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>See more cat photos in our gallery.</p>
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
--fcc-editable-region--
|
||||
<img>
|
||||
--fcc-editable-region--
|
||||
@@ -70,5 +70,3 @@ assert.match(code, /<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curr
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6690bebfd5c918179ea4fd3a
|
||||
id: 5dc24165f86c76b9248c6ebc
|
||||
title: Step 9
|
||||
challengeType: 0
|
||||
dashedName: step-9
|
||||
@@ -54,7 +54,7 @@ assert.match(altText, /A cute orange cat lying on its back\.?$/i);
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>See more cat photos in our gallery.</p>
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
|
||||
--fcc-editable-region--
|
||||
@@ -62,5 +62,3 @@ assert.match(altText, /A cute orange cat lying on its back\.?$/i);
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 6690beec809b4f184cab6914
|
||||
id: 5dc24614f86c76b9248c6ebd
|
||||
title: Step 10
|
||||
challengeType: 0
|
||||
dashedName: step-10
|
||||
@@ -75,7 +75,7 @@ assert.notMatch(
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
--fcc-editable-region--
|
||||
<p>See more cat photos in our gallery.</p>
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
@@ -83,5 +83,3 @@ assert.notMatch(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
---
|
||||
id: 669840900adeba35e4ebb917
|
||||
id: 5ddbd81294d8ddc1510a8e56
|
||||
title: Step 11
|
||||
challengeType: 0
|
||||
dashedName: step-11
|
||||
@@ -15,7 +15,7 @@ Here is an example of a link with the text `click here to go to freeCodeCamp.org
|
||||
<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>
|
||||
```
|
||||
|
||||
Add the anchor text `link to cat pictures` to the anchor element. This will become the link's text.
|
||||
Add the anchor text `cat photos` to the anchor element. This will become the link's text.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -31,12 +31,12 @@ Your anchor (`a`) element should have a closing tag. Closing tags have a `/` jus
|
||||
assert.match(code, /<\/a\>/);
|
||||
```
|
||||
|
||||
Your anchor (`a`) element's text should be `link to cat pictures`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
|
||||
Your anchor (`a`) element's text should be `cat photos`. Make sure to put the link text between the anchor (`a`) element's opening tag and closing tag.
|
||||
|
||||
```js
|
||||
assert.equal(
|
||||
document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
|
||||
'link to cat pictures'
|
||||
'cat photos'
|
||||
);
|
||||
```
|
||||
|
||||
@@ -51,7 +51,7 @@ assert.equal(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>See more cat photos in our gallery.</p>
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
--fcc-editable-region--
|
||||
<a href="https://freecatphotoapp.com"></a>
|
||||
--fcc-editable-region--
|
||||
@@ -60,5 +60,3 @@ assert.equal(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6698417821794837f14ca275
|
||||
title: Step 14
|
||||
id: 5dfa2407b521be39a3de7be1
|
||||
title: Step 15
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
dashedName: step-15
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -24,7 +24,7 @@ Add a `target` attribute with the value `_blank` to the anchor (`a`) element's o
|
||||
Your `p` element should have a nested anchor (`a`) element with the text `cat photos`. You may have deleted it or have a typo.
|
||||
|
||||
```js
|
||||
const anchor = document.querySelector('p > a');
|
||||
const anchor = document.querySelectorAll('p > a')[1];
|
||||
assert.equal(
|
||||
anchor?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos'
|
||||
);
|
||||
@@ -33,13 +33,13 @@ assert.equal(
|
||||
Your anchor (`a`) element does not have a `target` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
|
||||
|
||||
```js
|
||||
assert.isTrue(document.querySelector('a').hasAttribute('target'));
|
||||
assert.isTrue(document.querySelectorAll('a')[1].hasAttribute('target'));
|
||||
```
|
||||
|
||||
The value of the `target` attribute should be `_blank`. You have either omitted the value or have a typo. Remember that attribute values should be surrounded with quotation marks.
|
||||
|
||||
```js
|
||||
assert.equal(document.querySelector('a').getAttribute('target'), '_blank');
|
||||
assert.equal(document.querySelectorAll('a')[1].getAttribute('target'), '_blank');
|
||||
```
|
||||
|
||||
# --seed--
|
||||
@@ -53,6 +53,7 @@ assert.equal(document.querySelector('a').getAttribute('target'), '_blank');
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
--fcc-editable-region--
|
||||
<p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
--fcc-editable-region--
|
||||
@@ -61,5 +62,3 @@ assert.equal(document.querySelector('a').getAttribute('target'), '_blank');
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6698419d8f52cf3891f34853
|
||||
title: Step 15
|
||||
id: 5dfa30b9eacea3f48c6300ad
|
||||
title: Step 17
|
||||
challengeType: 0
|
||||
dashedName: step-15
|
||||
dashedName: step-17
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -33,38 +33,38 @@ assert.equal(
|
||||
Your anchor (`a`) element should have an opening tag. Opening tags have this syntax: `<elementName>`.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(document.querySelectorAll('a').length, 2);
|
||||
assert.isAtLeast(document.querySelectorAll('a').length, 3);
|
||||
```
|
||||
|
||||
You are missing a closing (`a`) tag after the image.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('a'), 2);
|
||||
assert.lengthOf(document.querySelectorAll('a'), 3);
|
||||
```
|
||||
|
||||
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
|
||||
|
||||
```js
|
||||
assert.isAtLeast(code.match(/<\/a>/g).length, 2);
|
||||
assert.isAtLeast(code.match(/<\/a>/g).length, 3);
|
||||
```
|
||||
|
||||
You should only add one closing anchor (`a`) tag. Please remove any extras.
|
||||
|
||||
```js
|
||||
assert.lengthOf(code.match(/<\/a>/g), 2);
|
||||
assert.lengthOf(code.match(/<\/a>/g), 3);
|
||||
```
|
||||
|
||||
Your anchor (`a`) element does not have an `href` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names.
|
||||
|
||||
```js
|
||||
assert.isTrue(document.querySelector('a').hasAttribute('href'));
|
||||
assert.isTrue(document.querySelectorAll('a')[2].hasAttribute('href'));
|
||||
```
|
||||
|
||||
Your anchor (`a`) element should link to `https://freecatphotoapp.com`. You have either omitted the URL or have a typo.
|
||||
|
||||
```js
|
||||
assert.equal(
|
||||
document.querySelectorAll('a')[1].getAttribute('href'),
|
||||
document.querySelectorAll('a')[2].getAttribute('href'),
|
||||
'https://freecatphotoapp.com'
|
||||
);
|
||||
```
|
||||
@@ -85,7 +85,7 @@ assert.equal(document.querySelector('img').parentNode.nodeName, 'A');
|
||||
<main>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
--fcc-editable-region--
|
||||
<img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
|
||||
@@ -94,5 +94,3 @@ assert.equal(document.querySelector('img').parentNode.nodeName, 'A');
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 669842cee55b683aa13ee758
|
||||
title: Step 18
|
||||
id: 5dfa3589eacea3f48c6300ae
|
||||
title: Step 20
|
||||
challengeType: 0
|
||||
dashedName: step-18
|
||||
dashedName: step-20
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -58,7 +58,7 @@ assert.equal(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -71,5 +71,3 @@ assert.equal(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 669842f261665d3b4a42df81
|
||||
title: Step 19
|
||||
id: 5dfa371beacea3f48c6300af
|
||||
title: Step 21
|
||||
challengeType: 0
|
||||
dashedName: step-19
|
||||
dashedName: step-21
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -66,7 +66,7 @@ assert.equal(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -80,5 +80,3 @@ assert.equal(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984330a510e63bf0787898
|
||||
title: Step 20
|
||||
id: 5dfa37b9eacea3f48c6300b0
|
||||
title: Step 22
|
||||
challengeType: 0
|
||||
dashedName: step-20
|
||||
dashedName: step-22
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -43,7 +43,7 @@ assert.equal(secondSectionLastElemNode.nodeName, 'UL');
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -58,5 +58,3 @@ assert.equal(secondSectionLastElemNode.nodeName, 'UL');
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6698440c54c8823cc60af8bc
|
||||
title: Step 21
|
||||
id: 5dfb5ecbeacea3f48c6300b1
|
||||
title: Step 23
|
||||
challengeType: 0
|
||||
dashedName: step-21
|
||||
dashedName: step-23
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -65,7 +65,7 @@ assert.lengthOf(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -82,5 +82,3 @@ assert.lengthOf(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6698444102ebd53d78cf66f8
|
||||
title: Step 22
|
||||
id: 5dfb6250eacea3f48c6300b2
|
||||
title: Step 24
|
||||
challengeType: 0
|
||||
dashedName: step-22
|
||||
dashedName: step-24
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -71,7 +71,7 @@ assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -91,5 +91,3 @@ assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984484deb84b3e21e5b3d7
|
||||
title: Step 23
|
||||
id: 5dfb655eeacea3f48c6300b3
|
||||
title: Step 25
|
||||
challengeType: 0
|
||||
dashedName: step-23
|
||||
dashedName: step-25
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -52,7 +52,7 @@ assert.equal(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -75,5 +75,3 @@ assert.equal(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984535d474083eec6bb8da
|
||||
title: Step 24
|
||||
id: 5dfb6a35eacea3f48c6300b4
|
||||
title: Step 26
|
||||
challengeType: 0
|
||||
dashedName: step-24
|
||||
dashedName: step-26
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -79,7 +79,7 @@ assert.match(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -102,5 +102,3 @@ assert.match(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6698457295f6403fa49050b8
|
||||
title: Step 25
|
||||
id: 5ef9b03c81a63668521804d0
|
||||
title: Step 27
|
||||
challengeType: 0
|
||||
dashedName: step-25
|
||||
dashedName: step-27
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -62,7 +62,7 @@ assert.match(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -85,5 +85,3 @@ assert.match(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6698458e123b4f403936994d
|
||||
title: Step 26
|
||||
id: 5ef9b03c81a63668521804d1
|
||||
title: Step 28
|
||||
challengeType: 0
|
||||
dashedName: step-26
|
||||
dashedName: step-28
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -54,7 +54,7 @@ assert.equal(secondSectionLastElemNode.previousElementSibling.nodeName, 'FIGURE'
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -78,5 +78,3 @@ assert.equal(secondSectionLastElemNode.previousElementSibling.nodeName, 'FIGURE'
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 669845af34899240d9196258
|
||||
title: Step 27
|
||||
id: 5ef9b03c81a63668521804d2
|
||||
title: Step 29
|
||||
challengeType: 0
|
||||
dashedName: step-27
|
||||
dashedName: step-29
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -74,7 +74,7 @@ assert.lengthOf([...document.querySelectorAll('ol')], 1);
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -100,5 +100,3 @@ assert.lengthOf([...document.querySelectorAll('ol')], 1);
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984881117baa41da8bbde0
|
||||
title: Step 28
|
||||
id: 5ef9b03c81a63668521804d3
|
||||
title: Step 30
|
||||
challengeType: 0
|
||||
dashedName: step-28
|
||||
dashedName: step-30
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')[1].lastElementChild.nod
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -70,5 +70,3 @@ assert.equal(document.querySelectorAll('main > section')[1].lastElementChild.nod
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6698496716e821448ba724a6
|
||||
title: Step 32
|
||||
id: 5ef9b03c81a63668521804d4
|
||||
title: Step 34
|
||||
challengeType: 0
|
||||
dashedName: step-32
|
||||
dashedName: step-34
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -60,7 +60,7 @@ assert.match(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -95,5 +95,3 @@ assert.match(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984e0cb4febb50c3794edf
|
||||
title: Step 33
|
||||
id: 5ef9b03c81a63668521804e7
|
||||
title: Step 35
|
||||
challengeType: 0
|
||||
dashedName: step-33
|
||||
dashedName: step-35
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -49,7 +49,7 @@ assert.equal(document.querySelector('main').nextElementSibling.nodeName, 'FOOTER
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -83,5 +83,3 @@ assert.equal(document.querySelector('main').nextElementSibling.nodeName, 'FOOTER
|
||||
--fcc-editable-region--
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984e8ab54bee517207be42
|
||||
title: Step 34
|
||||
id: 5ef9b03c81a63668521804e8
|
||||
title: Step 36
|
||||
challengeType: 0
|
||||
dashedName: step-34
|
||||
dashedName: step-36
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -29,7 +29,7 @@ Your `footer` element should have a closing tag. Closing tags have a `/` just af
|
||||
```js
|
||||
const pElemClosingTags = code.match(/<\/p\>/g);
|
||||
assert.exists(pElemClosingTags);
|
||||
assert.lengthOf(pElemClosingTags, 2);
|
||||
assert.lengthOf(pElemClosingTags, 3);
|
||||
```
|
||||
|
||||
Your `p` element's text should be `No Copyright - freeCodeCamp.org`. You have either omitted the text, have a typo, or it is not between the `p` element's opening and closing tags.
|
||||
@@ -50,7 +50,7 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -86,5 +86,3 @@ assert.match(extraSpacesRemoved, /No Copyright - freeCodeCamp\.org$/i);
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984ec64a3652522e81c678
|
||||
title: Step 35
|
||||
id: 5ef9b03c81a63668521804e9
|
||||
title: Step 37
|
||||
challengeType: 0
|
||||
dashedName: step-35
|
||||
dashedName: step-37
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -22,7 +22,7 @@ Your anchor (`a`) element should have a closing tag. Closing tags have a `/` jus
|
||||
```js
|
||||
const aElemClosingTags = code.match(/<\/a\>/g);
|
||||
assert.exists(aElemClosingTags);
|
||||
assert.lengthOf(aElemClosingTags, 3);
|
||||
assert.lengthOf(aElemClosingTags, 4);
|
||||
```
|
||||
|
||||
Your anchor (`a`) element should have an `href` attribute with the value `https://www.freecodecamp.org`. You may have omitted the attribute/value, or have a typo.
|
||||
@@ -60,7 +60,7 @@ assert.match(pText, /^no copyright - freecodecamp\.org$/);
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -96,5 +96,3 @@ assert.match(pText, /^no copyright - freecodecamp\.org$/);
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984eef66cc1752d93b53f5
|
||||
title: Step 36
|
||||
id: 5ef9b03c81a63668521804ea
|
||||
title: Step 38
|
||||
challengeType: 0
|
||||
dashedName: step-36
|
||||
dashedName: step-38
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -55,7 +55,7 @@ assert.match(noSpaces, /\<\/head\>\<body\>/);
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -91,5 +91,3 @@ assert.match(noSpaces, /\<\/head\>\<body\>/);
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984fe8efbd8c53a78c9b62
|
||||
title: Step 37
|
||||
id: 5ef9b03c81a63668521804eb
|
||||
title: Step 39
|
||||
challengeType: 0
|
||||
dashedName: step-37
|
||||
dashedName: step-39
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -57,7 +57,7 @@ assert.equal(document.title?.toLowerCase(), 'catphotoapp');
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -93,5 +93,3 @@ assert.equal(document.title?.toLowerCase(), 'catphotoapp');
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66985068aeb06e54562df39e
|
||||
title: Step 38
|
||||
id: 5ef9b03c81a63668521804ec
|
||||
title: Step 40
|
||||
challengeType: 0
|
||||
dashedName: step-38
|
||||
dashedName: step-40
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -45,7 +45,7 @@ assert.match(extraSpacesRemoved, /\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/);
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -81,5 +81,3 @@ assert.match(extraSpacesRemoved, /\<html\s+lang\s*\=\s*("?|'?)en\1\s*\>/);
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 669850ce0ccf395511ff4254
|
||||
title: Step 39
|
||||
id: 5ef9b03c81a63668521804ee
|
||||
title: Step 41
|
||||
challengeType: 0
|
||||
dashedName: step-39
|
||||
dashedName: step-41
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -45,7 +45,7 @@ assert.match(noSpaces, /^\<\!DOCTYPEhtml\>\<html/);
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -81,5 +81,3 @@ assert.match(noSpaces, /^\<\!DOCTYPEhtml\>\<html/);
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 669848cd668e7242872f4861
|
||||
title: Step 29
|
||||
id: 5efada803cbd2bbdab94e332
|
||||
title: Step 31
|
||||
challengeType: 0
|
||||
dashedName: step-29
|
||||
dashedName: step-31
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -64,7 +64,7 @@ assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -96,5 +96,3 @@ assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984905e95af5432faa28b1
|
||||
title: Step 30
|
||||
id: 5efae0543cbd2bbdab94e333
|
||||
title: Step 32
|
||||
challengeType: 0
|
||||
dashedName: step-30
|
||||
dashedName: step-32
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -63,7 +63,7 @@ assert.match(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -95,5 +95,3 @@ assert.match(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6698491eff5f2e43c20c6503
|
||||
title: Step 31
|
||||
id: 5efae16e3cbd2bbdab94e334
|
||||
title: Step 33
|
||||
challengeType: 0
|
||||
dashedName: step-31
|
||||
dashedName: step-33
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -87,7 +87,7 @@ assert.match(
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -120,5 +120,3 @@ assert.match(
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 66984218720e29393b1adad2
|
||||
title: Step 16
|
||||
id: 5f07be6ef7412fbad0c5626b
|
||||
title: Step 18
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
dashedName: step-18
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -18,7 +18,7 @@ The `section` element is used to define sections in a document, such as chapters
|
||||
</section>
|
||||
```
|
||||
|
||||
Take your `h2`, comment, `p`, and anchor (`a`) elements and nest them in a `section` element.
|
||||
Take your `h2`, comment, two `p` elements, and anchor (`a`) elements and nest them in a `section` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
@@ -40,14 +40,14 @@ The entire `section` element should be between the opening and closing tags of t
|
||||
assert.equal(document.querySelector('section').parentNode.nodeName, 'MAIN');
|
||||
```
|
||||
|
||||
The existing `h2`, comment, `p` element, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
|
||||
The existing `h2`, comment, `p` elements, and anchor (`a`) element should be between the opening and closing tags of the `section` element.
|
||||
|
||||
```js
|
||||
const childrenOfSection = [...document.querySelector('section').childNodes];
|
||||
const foundElements = childrenOfSection.filter((child) => {
|
||||
return ['H2', 'A', 'P'].includes(child.nodeName);
|
||||
});
|
||||
assert.lengthOf(foundElements, 3)
|
||||
assert.lengthOf(foundElements, 4)
|
||||
```
|
||||
|
||||
The `h1` element should not be nested in the `section` element.
|
||||
@@ -65,12 +65,12 @@ assert.isFalse(includesH1);
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
--fcc-editable-region--
|
||||
--fcc-editable-region--
|
||||
<main>
|
||||
<h1>CatPhotoApp</h1>
|
||||
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
|
||||
@@ -79,5 +79,3 @@ assert.isFalse(includesH1);
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6698429ba5761b39f8aad814
|
||||
title: Step 17
|
||||
id: 5f07c98cdb9413cbd4b16750
|
||||
title: Step 19
|
||||
challengeType: 0
|
||||
dashedName: step-17
|
||||
dashedName: step-19
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -69,7 +69,7 @@ assert.lengthOf(foundElems, 2);
|
||||
--fcc-editable-region--
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -79,5 +79,3 @@ assert.lengthOf(foundElems, 2);
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
---
|
||||
id: 6698510677b5e655ba8c1017
|
||||
title: Step 40
|
||||
id: 62bb4009e3458a128ff57d5d
|
||||
title: Step 42
|
||||
challengeType: 0
|
||||
dashedName: step-40
|
||||
dashedName: step-42
|
||||
---
|
||||
|
||||
# --description--
|
||||
@@ -58,7 +58,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -109,7 +109,7 @@ assert.notMatch(code, /<\/meta\s*>?/i);
|
||||
<h1>CatPhotoApp</h1>
|
||||
<section>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
|
||||
</section>
|
||||
@@ -1,79 +0,0 @@
|
||||
---
|
||||
id: 669840c70aea8936930dba35
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
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>
|
||||
```
|
||||
|
||||
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.
|
||||
|
||||
```js
|
||||
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
|
||||
assert.equal(
|
||||
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 = 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`.
|
||||
|
||||
```js
|
||||
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.
|
||||
|
||||
```js
|
||||
assert.match(code, /<p>see more <a[^>]*>cat photos<\/a> in our gallery\.?<\/p>/i)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<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>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,63 +0,0 @@
|
||||
---
|
||||
id: 6698410269ace0373ec812b6
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you turned the text `cat photos` inside the `p` element into a link, you don't need the second link below the `p` element. Delete the entire anchor element below the `p` element.
|
||||
|
||||
# --hints--
|
||||
|
||||
Your code should only have one paragraph (`p`) element.
|
||||
|
||||
```js
|
||||
assert.isTrue(document.querySelectorAll('p').length === 1);
|
||||
```
|
||||
|
||||
Your code should only have one anchor (`a`) element.
|
||||
|
||||
```js
|
||||
assert.isTrue(document.querySelectorAll('a').length === 1);
|
||||
```
|
||||
|
||||
Do not make any changes to the elements you created in the previous step.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector('p').innerHTML, 'See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.')
|
||||
```
|
||||
|
||||
There should not be `cat photos` text below the `p` element.
|
||||
|
||||
```js
|
||||
const pNextSibling = document.querySelector('p').nextSibling;
|
||||
assert.isTrue(
|
||||
(pNextSibling.nodeName === '#text' && !/cat\s*photos/.test(pNextSibling.nodeValue)) ||
|
||||
pNextSibling.nodeName === 'IMG'
|
||||
);
|
||||
```
|
||||
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
--fcc-editable-region--
|
||||
<p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<a href="https://freecatphotoapp.com">link to cat pictures</a>
|
||||
--fcc-editable-region--
|
||||
<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>
|
||||
```
|
||||
|
||||
@@ -0,0 +1,48 @@
|
||||
---
|
||||
id: 671141f948cbab359e74cc93
|
||||
title: Step 13
|
||||
challengeType: 0
|
||||
dashedName: step-13
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add `p` tags to turn `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.` into a paragraph.
|
||||
|
||||
# --hints--
|
||||
|
||||
You should add a `p` element around `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.`.
|
||||
|
||||
```js
|
||||
const P = document.querySelectorAll('p')[1];
|
||||
assert.exists(P);
|
||||
assert.strictEqual(P.innerText, "See more cat photos in our gallery.");
|
||||
```
|
||||
|
||||
You should still have the anchor element inside the new paragraph.
|
||||
|
||||
```js
|
||||
const P = document.querySelectorAll('p')[1];
|
||||
assert.exists(P.querySelector('a'));
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
--fcc-editable-region--
|
||||
See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.
|
||||
--fcc-editable-region--
|
||||
<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>
|
||||
```
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 671141feba228a35cefba82d
|
||||
title: Step 14
|
||||
challengeType: 0
|
||||
dashedName: step-14
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Turn the text `cute cats` into an anchor elements that links to `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
|
||||
|
||||
# --hints--
|
||||
|
||||
There should be a new anchor element in the first `p` element.
|
||||
|
||||
```js
|
||||
assert.exists(document.querySelector('p')?.querySelector('a'));
|
||||
```
|
||||
|
||||
The anchor text should be `cute cats`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector('a')?.innerText, "cute cats");
|
||||
```
|
||||
|
||||
The `href` attrivute of the new anchor element should be `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector('a')?.href, "https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg");
|
||||
```
|
||||
|
||||
The text of the `p` element should still be `Everyone loves cute cats online!`.
|
||||
|
||||
```js
|
||||
assert.strictEqual(document.querySelector('p')?.innerText, "Everyone loves cute cats online!");
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
--fcc-editable-region--
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
--fcc-editable-region--
|
||||
<p>See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
<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>
|
||||
```
|
||||
@@ -0,0 +1,47 @@
|
||||
---
|
||||
id: 671144cdcc01d73f7dd79dc9
|
||||
title: Step 16
|
||||
challengeType: 0
|
||||
dashedName: step-16
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Now that you have added the link you can remove the comment.
|
||||
|
||||
# --hints--
|
||||
|
||||
There should not be any comment in your code.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /<!--/);
|
||||
assert.notMatch(code, /-->/);
|
||||
```
|
||||
|
||||
The text `TODO: Add link to cat photos` should not be present anymore.
|
||||
|
||||
```js
|
||||
assert.notMatch(code, /TODO:?/i)
|
||||
assert.notMatch(code, /Add\s*link\s*to\s*cat\s*photos/i)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
--fcc-editable-region--
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves <a href="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg">cute cats</a> online!</p>
|
||||
<p>See more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a> in our gallery.</p>
|
||||
--fcc-editable-region--
|
||||
<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>
|
||||
```
|
||||
@@ -0,0 +1,57 @@
|
||||
---
|
||||
id: 671b6e873249bb35c9debfcf
|
||||
title: Step 12
|
||||
challengeType: 0
|
||||
dashedName: step-12
|
||||
---
|
||||
|
||||
# --description--
|
||||
|
||||
Add the words `See more ` before the anchor element and ` in our gallery` after the anchor element
|
||||
|
||||
# --hints--
|
||||
|
||||
You should use the existing anchor element, do not create a new one.
|
||||
|
||||
```js
|
||||
assert.lengthOf(document.querySelectorAll('a'), 1);
|
||||
```
|
||||
|
||||
You should have the words `See more ` before the anchor element.
|
||||
|
||||
```js
|
||||
assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a>/)
|
||||
```
|
||||
|
||||
You should have the words `in our gallery` after the anchor element.
|
||||
|
||||
```js
|
||||
assert.match(code, /<a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
|
||||
```
|
||||
|
||||
You should have `See more <a href="https://freecatphotoapp.com">cat photos</a> in our gallery` in your code.
|
||||
|
||||
```js
|
||||
assert.match(code, /See more <a href="https:\/\/freecatphotoapp\.com">cat photos<\/a> in our gallery/)
|
||||
```
|
||||
|
||||
# --seed--
|
||||
|
||||
## --seed-contents--
|
||||
|
||||
```html
|
||||
<html>
|
||||
<body>
|
||||
<main>
|
||||
<h1>CatPhotoApp</h1>
|
||||
<h2>Cat Photos</h2>
|
||||
<!-- TODO: Add link to cat photos -->
|
||||
<p>Everyone loves cute cats online!</p>
|
||||
--fcc-editable-region--
|
||||
<a href="https://freecatphotoapp.com">cat photos</a>
|
||||
--fcc-editable-region--
|
||||
<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>
|
||||
```
|
||||
@@ -9,6 +9,48 @@ const duplicatedProjectIds = [
|
||||
/*** HTML ***/
|
||||
|
||||
// Cat Photo App
|
||||
'5dc174fcf86c76b9248c6eb2',
|
||||
'5dc1798ff86c76b9248c6eb3',
|
||||
'5dc17d3bf86c76b9248c6eb4',
|
||||
'5dc17dc8f86c76b9248c6eb5',
|
||||
'5dc2385ff86c76b9248c6eb7',
|
||||
'5dc23991f86c76b9248c6eb8',
|
||||
'5dc23f9bf86c76b9248c6eba',
|
||||
'5dc24073f86c76b9248c6ebb',
|
||||
'5dc24165f86c76b9248c6ebc',
|
||||
'5dc24614f86c76b9248c6ebd',
|
||||
'5ddbd81294d8ddc1510a8e56',
|
||||
'671b6e873249bb35c9debfcf',
|
||||
'671141f948cbab359e74cc93',
|
||||
'671141feba228a35cefba82d',
|
||||
'5dfa2407b521be39a3de7be1',
|
||||
'671144cdcc01d73f7dd79dc9',
|
||||
'5dfa30b9eacea3f48c6300ad',
|
||||
'5f07be6ef7412fbad0c5626b',
|
||||
'5f07c98cdb9413cbd4b16750',
|
||||
'5dfa3589eacea3f48c6300ae',
|
||||
'5dfa371beacea3f48c6300af',
|
||||
'5dfa37b9eacea3f48c6300b0',
|
||||
'5dfb5ecbeacea3f48c6300b1',
|
||||
'5dfb6250eacea3f48c6300b2',
|
||||
'5dfb655eeacea3f48c6300b3',
|
||||
'5dfb6a35eacea3f48c6300b4',
|
||||
'5ef9b03c81a63668521804d0',
|
||||
'5ef9b03c81a63668521804d1',
|
||||
'5ef9b03c81a63668521804d2',
|
||||
'5ef9b03c81a63668521804d3',
|
||||
'5efada803cbd2bbdab94e332',
|
||||
'5efae0543cbd2bbdab94e333',
|
||||
'5efae16e3cbd2bbdab94e334',
|
||||
'5ef9b03c81a63668521804d4',
|
||||
'5ef9b03c81a63668521804e7',
|
||||
'5ef9b03c81a63668521804e8',
|
||||
'5ef9b03c81a63668521804e9',
|
||||
'5ef9b03c81a63668521804ea',
|
||||
'5ef9b03c81a63668521804eb',
|
||||
'5ef9b03c81a63668521804ec',
|
||||
'5ef9b03c81a63668521804ee',
|
||||
'62bb4009e3458a128ff57d5d',
|
||||
|
||||
// Survey Form
|
||||
'587d78af367417b2b2512b03',
|
||||
|
||||
Reference in New Issue
Block a user