jprdonnelly/freeCodeCamp
1
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2025-12-19 10:07:46 -05:00
Code Issues Projects Releases Wiki Activity

feat(curriculum): refactor step 12 and check images using .src (#56735)

Browse Source 
Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>
Co-authored-by: Dario-DC <105294544+Dario-DC@users.noreply.github.com>
Co-authored-by: Mrugesh Mohapatra <1884376+raisedadead@users.noreply.github.com>
This commit is contained in:
Ilenia
2024-10-21 16:57:40 +02:00
committed by GitHub
parent 5df8774eab
commit f8287ce2ca
75 changed files with 522 additions and 430 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
curriculum/challenges/_meta/learn-html-by-building-a-cat-photo-app/meta.json
View File

@@ -53,236 +53,244 @@
"title": "Step 11"
},
{
"id": "5dfa22d1b521be39a3de7be0",
"id": "671141d8e32fe934c26fa1be",
"title": "Step 12"
},
{
"id": "62dabe2ef403a12d5d295273",
"id": "671141f948cbab359e74cc93",
"title": "Step 13"
},
{
"id": "5dfa2407b521be39a3de7be1",
"id": "671141feba228a35cefba82d",
"title": "Step 14"
},
{
"id": "5dfa30b9eacea3f48c6300ad",
"id": "5dfa2407b521be39a3de7be1",
"title": "Step 15"
},
{
"id": "5f07be6ef7412fbad0c5626b",
"id": "671144cdcc01d73f7dd79dc9",
"title": "Step 16"
},
{
"id": "5f07c98cdb9413cbd4b16750",
"id": "5dfa30b9eacea3f48c6300ad",
"title": "Step 17"
},
{
"id": "5dfa3589eacea3f48c6300ae",
"id": "5f07be6ef7412fbad0c5626b",
"title": "Step 18"
},
{
"id": "5dfa371beacea3f48c6300af",
"id": "5f07c98cdb9413cbd4b16750",
"title": "Step 19"
},
{
"id": "5dfa37b9eacea3f48c6300b0",
"id": "5dfa3589eacea3f48c6300ae",
"title": "Step 20"
},
{
"id": "5dfb5ecbeacea3f48c6300b1",
"id": "5dfa371beacea3f48c6300af",
"title": "Step 21"
},
{
"id": "5dfb6250eacea3f48c6300b2",
"id": "5dfa37b9eacea3f48c6300b0",
"title": "Step 22"
},
{
"id": "5dfb655eeacea3f48c6300b3",
"id": "5dfb5ecbeacea3f48c6300b1",
"title": "Step 23"
},
{
"id": "5dfb6a35eacea3f48c6300b4",
"id": "5dfb6250eacea3f48c6300b2",
"title": "Step 24"
},
{
"id": "5ef9b03c81a63668521804d0",
"id": "5dfb655eeacea3f48c6300b3",
"title": "Step 25"
},
{
"id": "5ef9b03c81a63668521804d1",
"id": "5dfb6a35eacea3f48c6300b4",
"title": "Step 26"
},
{
"id": "5ef9b03c81a63668521804d2",
"id": "5ef9b03c81a63668521804d0",
"title": "Step 27"
},
{
"id": "5ef9b03c81a63668521804d3",
"id": "5ef9b03c81a63668521804d1",
"title": "Step 28"
},
{
"id": "5efada803cbd2bbdab94e332",
"id": "5ef9b03c81a63668521804d2",
"title": "Step 29"
},
{
"id": "5efae0543cbd2bbdab94e333",
"id": "5ef9b03c81a63668521804d3",
"title": "Step 30"
},
{
"id": "5efae16e3cbd2bbdab94e334",
"id": "5efada803cbd2bbdab94e332",
"title": "Step 31"
},
{
"id": "5ef9b03c81a63668521804d4",
"id": "5efae0543cbd2bbdab94e333",
"title": "Step 32"
},
{
"id": "5f07fb1579dc934717801375",
"id": "5efae16e3cbd2bbdab94e334",
"title": "Step 33"
},
{
"id": "5ef9b03c81a63668521804d5",
"id": "5ef9b03c81a63668521804d4",
"title": "Step 34"
},
{
"id": "5ef9b03c81a63668521804d6",
"id": "5f07fb1579dc934717801375",
"title": "Step 35"
},
{
"id": "5ef9b03c81a63668521804d7",
"id": "5ef9b03c81a63668521804d5",
"title": "Step 36"
},
{
"id": "5ef9b03c81a63668521804d8",
"id": "5ef9b03c81a63668521804d6",
"title": "Step 37"
},
{
"id": "5efb23e70dc218d6c85f89b1",
"id": "5ef9b03c81a63668521804d7",
"title": "Step 38"
},
{
"id": "7cf9b03d81a65668421804c3",
"id": "5ef9b03c81a63668521804d8",
"title": "Step 39"
},
{
"id": "5ef9b03c81a63668521804d9",
"id": "5efb23e70dc218d6c85f89b1",
"title": "Step 40"
},
{
"id": "5ef9b03c81a63668521804db",
"id": "7cf9b03d81a65668421804c3",
"title": "Step 41"
},
{
"id": "5ef9b03c81a63668521804da",
"id": "5ef9b03c81a63668521804d9",
"title": "Step 42"
},
{
"id": "5efb2c990dc218d6c85f89b2",
"id": "5ef9b03c81a63668521804db",
"title": "Step 43"
},
{
"id": "5ef9b03c81a63668521804dc",
"id": "5ef9b03c81a63668521804da",
"title": "Step 44"
},
{
"id": "5ef9b03c81a63668521804dd",
"id": "5efb2c990dc218d6c85f89b2",
"title": "Step 45"
},
{
"id": "5ef9b03c81a63668521804df",
"id": "5ef9b03c81a63668521804dc",
"title": "Step 46"
},
{
"id": "5f05a1d8e233dff4a68508d8",
"id": "5ef9b03c81a63668521804dd",
"title": "Step 47"
},
{
"id": "5ef9b03c81a63668521804de",
"id": "5ef9b03c81a63668521804df",
"title": "Step 48"
},
{
"id": "5f1a80975fc4bcae0edb3497",
"id": "5f05a1d8e233dff4a68508d8",
"title": "Step 49"
},
{
"id": "5ef9b03c81a63668521804e1",
"id": "5ef9b03c81a63668521804de",
"title": "Step 50"
},
{
"id": "5f0d48e7b435f13ab6550051",
"id": "5f1a80975fc4bcae0edb3497",
"title": "Step 51"
},
{
"id": "5f0d4ab1b435f13ab6550052",
"id": "5ef9b03c81a63668521804e1",
"title": "Step 52"
},
{
"id": "5f0d4d04b435f13ab6550053",
"id": "5f0d48e7b435f13ab6550051",
"title": "Step 53"
},
{
"id": "5ef9b03c81a63668521804e2",
"id": "5f0d4ab1b435f13ab6550052",
"title": "Step 54"
},
{
"id": "5efc54138d6a74d05e68af76",
"id": "5f0d4d04b435f13ab6550053",
"title": "Step 55"
},
{
"id": "5efc4f528d6a74d05e68af74",
"id": "5ef9b03c81a63668521804e2",
"title": "Step 56"
},
{
"id": "5efc518e8d6a74d05e68af75",
"id": "5efc54138d6a74d05e68af76",
"title": "Step 57"
},
{
"id": "5ef9b03c81a63668521804e3",
"id": "5efc4f528d6a74d05e68af74",
"title": "Step 58"
},
{
"id": "5efc575c8d6a74d05e68af77",
"id": "5efc518e8d6a74d05e68af75",
"title": "Step 59"
},
{
"id": "5f1a89f1190aff21ae42105a",
"id": "5ef9b03c81a63668521804e3",
"title": "Step 60"
},
{
"id": "5ef9b03c81a63668521804e5",
"id": "5efc575c8d6a74d05e68af77",
"title": "Step 61"
},
{
"id": "5ef9b03c81a63668521804e7",
"id": "5f1a89f1190aff21ae42105a",
"title": "Step 62"
},
{
"id": "5ef9b03c81a63668521804e8",
"id": "5ef9b03c81a63668521804e5",
"title": "Step 63"
},
{
"id": "5ef9b03c81a63668521804e9",
"id": "5ef9b03c81a63668521804e7",
"title": "Step 64"
},
{
"id": "5ef9b03c81a63668521804ea",
"id": "5ef9b03c81a63668521804e8",
"title": "Step 65"
},
{
"id": "5ef9b03c81a63668521804eb",
"id": "5ef9b03c81a63668521804e9",
"title": "Step 66"
},
{
"id": "5ef9b03c81a63668521804ec",
"id": "5ef9b03c81a63668521804ea",
"title": "Step 67"
},
{
"id": "5ef9b03c81a63668521804ee",
"id": "5ef9b03c81a63668521804eb",
"title": "Step 68"
},
{
"id": "62bb4009e3458a128ff57d5d",
"id": "5ef9b03c81a63668521804ec",
"title": "Step 69"
},
{
"id": "5ef9b03c81a63668521804ee",
"title": "Step 70"
},
{
"id": "62bb4009e3458a128ff57d5d",
"title": "Step 71"
}
]
}

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
View File

@@ -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(code.match(/<\/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(extraSpacesRemoved.match(/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.

11
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
View File

@@ -49,12 +49,9 @@ assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
Your comment should be above the `p` element. You have them in the wrong order.
```js
assert(
code
.replace(/\s/g, '')
.match(
/<!--todo:addlinktocatphotos--><p>seemorecatphotosinourgallery\.?<\/p>/i
)
assert.match(
code.replace(/\s/g, ''),
/<!--todo:addlinktocatphotos--><p>everyonelovescutecatsonline!<\/p>/i
);
```
@@ -69,7 +66,7 @@ assert(
<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>

8
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
View File

@@ -55,10 +55,8 @@ Your `main` element's closing tag should be below the `p` element. You have them
```js
const mainNode = document.querySelector('main');
const pNode = document.querySelector('p');
assert(
mainNode.contains(pNode) &&
pNode.textContent.toLowerCase().match(/see more cat photos in our gallery/)
);
assert.isTrue(mainNode.contains(pNode));
assert.match(pNode.textContent.toLowerCase(), /everyone loves cute cats online!/);
```
# --seed--
@@ -73,7 +71,7 @@ assert(
<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>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
View File

@@ -74,14 +74,14 @@ Your code should have a `p` element. You have removed the `p` element from an ea
assert(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(
assert.match(
document
.querySelector('p')
.innerText.toLowerCase()
.match(/see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/)
.innerText.toLowerCase(),
/everyone\s+loves\s+cute\s+cats\s+online!$/
);
```
@@ -98,12 +98,12 @@ assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
```html
<html>
<body>
--fcc-editable-region--
--fcc-editable-region--
<main>
<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>

2
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
View File

@@ -52,7 +52,7 @@ assert(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>

8
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
View File

@@ -36,19 +36,19 @@ assert(document.querySelector('img').src);
Your `img` element's `src` attribute should be set to '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. You have either omitted the URL or have a typo. The case of the URL is important.
```js
assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
assert.strictEqual(document.querySelector('img').src, 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
```
Although you have set the `img` element's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks.
```js
assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
assert.notMatch(code, /\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/);
```
Your `img` element should be closed either with `>` or `/>`.
```js
assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\1\s*\/?>/.test(code));
assert.match(code, /<img\s+src\s*=\s*("|')\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg\s*\1\s*\/?>/);
```
# --seed--
@@ -62,7 +62,7 @@ assert(/<img\s+src\s*=\s*("|')https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-
<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--

2
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
View File

@@ -54,7 +54,7 @@ assert(altText.match(/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--

2
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
View File

@@ -75,7 +75,7 @@ assert(
<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.">

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
View File

@@ -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(code.match(/<\/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(
document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
'link to cat pictures'
assert.strictEqual(
document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' '),
'cat photos'
);
```
@@ -51,7 +51,7 @@ assert(
<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--

78
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
View File

@@ -1,78 +0,0 @@
---
id: 5dfa22d1b521be39a3de7be0
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(
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>
```

15
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
View File

@@ -1,8 +1,8 @@
---
id: 5dfa2407b521be39a3de7be1
title: Step 14
title: Step 15
challengeType: 0
dashedName: step-14
dashedName: step-15
---
# --description--
@@ -25,22 +25,20 @@ Your `p` element should have a nested anchor (`a`) element with the text `cat ph
```js
const anchor = document.querySelectorAll('p > a');
assert(
anchor.length &&
anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
);
assert.isNotEmpty(anchor);
assert.strictEqual(anchor[1]?.innerText?.toLowerCase().replace(/\s+/g, ' '), 'cat photos')
```
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(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(document.querySelector('a').getAttribute('target') === '_blank');
assert.strictEqual(document.querySelectorAll('a')[1]?.getAttribute('target'), '_blank');
```
# --seed--
@@ -54,6 +52,7 @@ assert(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--

10
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
View File

@@ -1,8 +1,8 @@
---
id: 5dfa30b9eacea3f48c6300ad
title: Step 15
title: Step 17
challengeType: 0
dashedName: step-15
dashedName: step-17
---
# --description--
@@ -40,7 +40,7 @@ assert(document.querySelectorAll('a').length >= 2);
You are missing a closing (`a`) tag after the image.
```js
assert(document.querySelectorAll('a').length === 2);
assert.lengthOf(document.querySelectorAll('a'), 3);
```
Your anchor (`a`) element should have a closing tag. Closing tags have a `/` just after the `<` character.
@@ -52,7 +52,7 @@ assert(code.match(/<\/a>/g).length >= 2);
You should only add one closing anchor (`a`) tag. Please remove any extras.
```js
assert(code.match(/<\/a>/g).length === 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.
@@ -86,7 +86,7 @@ assert(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.">

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
View File

@@ -1,8 +1,8 @@
---
id: 5dfa3589eacea3f48c6300ae
title: Step 18
title: Step 20
challengeType: 0
dashedName: step-18
dashedName: step-20
---
# --description--
@@ -60,7 +60,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
View File

@@ -1,8 +1,8 @@
---
id: 5dfa371beacea3f48c6300af
title: Step 19
title: Step 21
challengeType: 0
dashedName: step-19
dashedName: step-21
---
# --description--
@@ -68,7 +68,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
View File

@@ -1,8 +1,8 @@
---
id: 5dfa37b9eacea3f48c6300b0
title: Step 20
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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
View File

@@ -1,8 +1,8 @@
---
id: 5dfb5ecbeacea3f48c6300b1
title: Step 21
title: Step 23
challengeType: 0
dashedName: step-21
dashedName: step-23
---
# --description--
@@ -65,7 +65,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
View File

@@ -1,8 +1,8 @@
---
id: 5dfb6250eacea3f48c6300b2
title: Step 22
title: Step 24
challengeType: 0
dashedName: step-22
dashedName: step-24
---
# --description--
@@ -72,7 +72,7 @@ assert.isTrue(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curricu
<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>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
View File

@@ -1,8 +1,8 @@
---
id: 5dfb655eeacea3f48c6300b3
title: Step 23
title: Step 25
challengeType: 0
dashedName: step-23
dashedName: step-25
---
# --description--
@@ -34,11 +34,7 @@ assert.equal(document.querySelectorAll('section')?.[1]?.lastElementChild?.nodeNa
The lasagna `img` element should be nested in the `figure` element.
```js
assert(
document.querySelector('figure > img') &&
document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
);
assert.strictEqual(document.querySelector('figure > img')?.src.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg');
```
# --seed--
@@ -52,7 +48,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
View File

@@ -1,8 +1,8 @@
---
id: 5dfb6a35eacea3f48c6300b4
title: Step 24
title: Step 26
challengeType: 0
dashedName: step-24
dashedName: step-26
---
# --description--
@@ -82,7 +82,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804d0
title: Step 25
title: Step 27
challengeType: 0
dashedName: step-25
dashedName: step-27
---
# --description--
@@ -61,7 +61,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804d1
title: Step 26
title: Step 28
challengeType: 0
dashedName: step-26
dashedName: step-28
---
# --description--
@@ -55,7 +55,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804d2
title: Step 27
title: Step 29
challengeType: 0
dashedName: step-27
dashedName: step-29
---
# --description--
@@ -74,7 +74,7 @@ assert([...document.querySelectorAll('ol')].length == 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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804d3
title: Step 28
title: Step 30
challengeType: 0
dashedName: step-28
dashedName: step-30
---
# --description--
@@ -40,7 +40,7 @@ assert.equal(document.querySelectorAll('main > section')?.[1]?.lastElementChild?
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804d4
title: Step 32
title: Step 34
challengeType: 0
dashedName: step-32
dashedName: step-34
---
# --description--
@@ -60,7 +60,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804d5
title: Step 34
title: Step 36
challengeType: 0
dashedName: step-34
dashedName: step-36
---
# --description--
@@ -67,7 +67,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804d6
title: Step 35
title: Step 37
challengeType: 0
dashedName: step-35
dashedName: step-37
---
# --description--
@@ -51,7 +51,7 @@ assert.lengthOf(document.querySelector('form')?.innerHTML?.trim(), 0);
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804d7
title: Step 36
title: Step 38
challengeType: 0
dashedName: step-36
dashedName: step-38
---
# --description--
@@ -83,7 +83,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804d8
title: Step 37
title: Step 39
challengeType: 0
dashedName: step-37
dashedName: step-39
---
# --description--
@@ -68,7 +68,7 @@ assert.isTrue(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804d9
title: Step 40
title: Step 42
challengeType: 0
dashedName: step-40
dashedName: step-42
---
# --description--
@@ -68,7 +68,7 @@ assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804da
title: Step 42
title: Step 44
challengeType: 0
dashedName: step-42
dashedName: step-44
---
# --description--
@@ -51,7 +51,7 @@ assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804db
title: Step 41
title: Step 43
challengeType: 0
dashedName: step-41
dashedName: step-43
---
# --description--
@@ -49,7 +49,7 @@ assert.strictEqual(document.querySelector('input')?.getAttribute('required'), ''
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804dc
title: Step 44
title: Step 46
challengeType: 0
dashedName: step-44
dashedName: step-46
---
# --description--
@@ -107,7 +107,7 @@ assert.match(radioInputElem?.nextSibling?.nodeValue?.replace(/\s+/g, ' '), /\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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804dd
title: Step 45
title: Step 47
challengeType: 0
dashedName: step-45
dashedName: step-47
---
# --description--
@@ -69,7 +69,7 @@ assert(
<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>

7
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804de
title: Step 48
title: Step 50
challengeType: 0
dashedName: step-48
dashedName: step-50
---
# --description--
@@ -68,9 +68,10 @@ assert(
<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>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804df
title: Step 46
title: Step 48
challengeType: 0
dashedName: step-46
dashedName: step-48
---
# --description--
@@ -57,7 +57,7 @@ assert.match(document.querySelector('input')?.id, /^indoor$/);
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804e1
title: Step 50
title: Step 52
challengeType: 0
dashedName: step-50
dashedName: step-52
---
# --description--
@@ -57,7 +57,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804e2
title: Step 54
title: Step 56
challengeType: 0
dashedName: step-54
dashedName: step-56
---
# --description--
@@ -76,7 +76,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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804e3
title: Step 58
title: Step 60
challengeType: 0
dashedName: step-58
dashedName: step-60
---
# --description--
@@ -68,7 +68,7 @@ assert.strictEqual(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804e5
title: Step 61
title: Step 63
challengeType: 0
dashedName: step-61
dashedName: step-63
---
# --description--
@@ -71,7 +71,7 @@ assert.isFalse(document.querySelectorAll('input[type="checkbox"]')?.[2]?.hasAttr
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804e7
title: Step 62
title: Step 64
challengeType: 0
dashedName: step-62
dashedName: step-64
---
# --description--
@@ -48,7 +48,7 @@ assert(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>

10
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804e8
title: Step 63
title: Step 65
challengeType: 0
dashedName: step-63
dashedName: step-65
---
# --description--
@@ -23,11 +23,11 @@ Your `footer` element should have a `p` element. Make sure to add an opening tag
assert(document.querySelector('footer > p'));
```
Your `footer` element should have a closing tag. Closing tags have a `/` just after the `<` character.
Your `p` element should have a closing tag. Closing tags have a `/` just after the `<` character.
```js
const pElemClosingTags = code.match(/<\/p\>/g);
assert(pElemClosingTags && pElemClosingTags.length === 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.
@@ -48,7 +48,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>

8
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804e9
title: Step 64
title: Step 66
challengeType: 0
dashedName: step-64
dashedName: step-66
---
# --description--
@@ -21,7 +21,7 @@ Your anchor (`a`) element should have a closing tag. Closing tags have a `/` jus
```js
const aElemClosingTags = code.match(/<\/a\>/g);
assert(aElemClosingTags && aElemClosingTags.length === 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.
@@ -59,7 +59,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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804ea
title: Step 65
title: Step 67
challengeType: 0
dashedName: step-65
dashedName: step-67
---
# --description--
@@ -54,7 +54,7 @@ assert(noSpaces.match(/\<\/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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804eb
title: Step 66
title: Step 68
challengeType: 0
dashedName: step-66
dashedName: step-68
---
# --description--
@@ -56,7 +56,7 @@ assert(document.title && 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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804ec
title: Step 67
title: Step 69
challengeType: 0
dashedName: step-67
dashedName: step-69
---
# --description--
@@ -44,7 +44,7 @@ assert(extraSpacesRemoved.match(/\<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
View File

@@ -1,8 +1,8 @@
---
id: 5ef9b03c81a63668521804ee
title: Step 68
title: Step 70
challengeType: 0
dashedName: step-68
dashedName: step-70
---
# --description--
@@ -45,7 +45,7 @@ assert(noSpaces.match(/^\<\!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>

13
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
View File

@@ -1,8 +1,8 @@
---
id: 5efada803cbd2bbdab94e332
title: Step 29
title: Step 31
challengeType: 0
dashedName: step-29
dashedName: step-31
---
# --description--
@@ -42,16 +42,15 @@ The third image should have a `src` attribute set to `https://cdn.freecodecamp.o
```js
const catsImg = document.querySelectorAll('figure > img')[1];
assert(
catsImg &&
catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
assert.strictEqual(
catsImg?.src?.toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
);
```
Although you have set the new image's `src` to the correct URL, it is recommended to always surround the value of an attribute with quotation marks.
```js
assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
assert.notMatch(code, /\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/);
```
# --seed--
@@ -65,7 +64,7 @@ assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/ca
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
View File

@@ -1,8 +1,8 @@
---
id: 5efae0543cbd2bbdab94e333
title: Step 30
title: Step 32
challengeType: 0
dashedName: step-30
dashedName: step-32
---
# --description--
@@ -64,7 +64,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
View File

@@ -1,8 +1,8 @@
---
id: 5efae16e3cbd2bbdab94e334
title: Step 31
title: Step 33
challengeType: 0
dashedName: step-31
dashedName: step-33
---
# --description--
@@ -88,7 +88,7 @@ assert(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
View File

@@ -1,8 +1,8 @@
---
id: 5efb23e70dc218d6c85f89b1
title: Step 38
title: Step 40
challengeType: 0
dashedName: step-38
dashedName: step-40
---
# --description--
@@ -60,7 +60,7 @@ assert(!/\<input\s+type\s*=\s*text/.test(code));
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
View File

@@ -1,8 +1,8 @@
---
id: 5efb2c990dc218d6c85f89b2
title: Step 43
title: Step 45
challengeType: 0
dashedName: step-43
dashedName: step-45
---
# --description--
@@ -57,7 +57,7 @@ assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
View File

@@ -1,8 +1,8 @@
---
id: 5efc4f528d6a74d05e68af74
title: Step 56
title: Step 58
challengeType: 0
dashedName: step-56
dashedName: step-58
---
# --description--
@@ -110,7 +110,7 @@ assert.match(code, />\s+<label\s+for\s*=\s*('|")loving/);
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
View File

@@ -1,8 +1,8 @@
---
id: 5efc518e8d6a74d05e68af75
title: Step 57
title: Step 59
challengeType: 0
dashedName: step-57
dashedName: step-59
---
# --description--
@@ -45,7 +45,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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
View File

@@ -1,8 +1,8 @@
---
id: 5efc54138d6a74d05e68af76
title: Step 55
title: Step 57
challengeType: 0
dashedName: step-55
dashedName: step-57
---
# --description--
@@ -34,7 +34,7 @@ assert.match(document.querySelector('input[type="checkbox"]')?.id, /^loving$/);
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
View File

@@ -1,8 +1,8 @@
---
id: 5efc575c8d6a74d05e68af77
title: Step 59
title: Step 61
challengeType: 0
dashedName: step-59
dashedName: step-61
---
# --description--
@@ -71,7 +71,7 @@ assert.strictEqual(
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
View File

@@ -1,8 +1,8 @@
---
id: 5f05a1d8e233dff4a68508d8
title: Step 47
title: Step 49
challengeType: 0
dashedName: step-47
dashedName: step-49
---
# --description--
@@ -92,7 +92,7 @@ assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/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>

12
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
View File

@@ -1,8 +1,8 @@
---
id: 5f07be6ef7412fbad0c5626b
title: Step 16
title: Step 18
challengeType: 0
dashedName: step-16
dashedName: step-18
---
# --description--
@@ -40,14 +40,14 @@ The entire `section` element should be between the opening and closing tags of t
assert(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, two `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(foundElements.length === 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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
View File

@@ -1,8 +1,8 @@
---
id: 5f07c98cdb9413cbd4b16750
title: Step 17
title: Step 19
challengeType: 0
dashedName: step-17
dashedName: step-19
---
# --description--
@@ -69,7 +69,7 @@ assert(foundElems.length === 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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
View File

@@ -1,8 +1,8 @@
---
id: 5f07fb1579dc934717801375
title: Step 33
title: Step 35
challengeType: 0
dashedName: step-33
dashedName: step-35
---
# --description--
@@ -62,7 +62,7 @@ assert.lengthOf(document.querySelectorAll('main > section')?.[2]?.children, 0);
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
View File

@@ -1,8 +1,8 @@
---
id: 5f0d48e7b435f13ab6550051
title: Step 51
title: Step 53
challengeType: 0
dashedName: step-51
dashedName: step-53
---
# --description--
@@ -58,7 +58,7 @@ assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
View File

@@ -1,8 +1,8 @@
---
id: 5f0d4ab1b435f13ab6550052
title: Step 52
title: Step 54
challengeType: 0
dashedName: step-52
dashedName: step-54
---
# --description--
@@ -79,7 +79,7 @@ assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
<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>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
View File

@@ -1,8 +1,8 @@
---
id: 5f0d4d04b435f13ab6550053
title: Step 53
title: Step 55
challengeType: 0
dashedName: step-53
dashedName: step-55
---
# --description--
@@ -64,7 +64,7 @@ assert(
<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>

7
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
View File

@@ -1,8 +1,8 @@
---
id: 5f1a80975fc4bcae0edb3497
title: Step 49
title: Step 51
challengeType: 0
dashedName: step-49
dashedName: step-51
---
# --description--
@@ -64,9 +64,10 @@ assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
<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>
<section>
<h2>Cat Lists</h2>
<h3>Things cats love:</h3>

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
View File

@@ -1,8 +1,8 @@
---
id: 5f1a89f1190aff21ae42105a
title: Step 60
title: Step 62
challengeType: 0
dashedName: step-60
dashedName: step-62
---
# --description--
@@ -52,7 +52,7 @@ assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
<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>

8
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
View File

@@ -1,8 +1,8 @@
---
id: 62bb4009e3458a128ff57d5d
title: Step 69
title: Step 71
challengeType: 0
dashedName: step-69
dashedName: step-71
---
# --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>
@@ -127,7 +127,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>

62
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
View File

@@ -1,62 +0,0 @@
---
id: 62dabe2ef403a12d5d295273
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(
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>
```

57
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141d8e32fe934c26fa1be.md Normal file
View File

@@ -0,0 +1,57 @@
---
id: 671141d8e32fe934c26fa1be
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>
```

48
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141f948cbab359e74cc93.md Normal file
View File

@@ -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>
```

57
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671141feba228a35cefba82d.md Normal file
View File

@@ -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>
```

47
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/671144cdcc01d73f7dd79dc9.md Normal file
View File

@@ -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>
```

6
curriculum/challenges/english/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
View File

@@ -1,8 +1,8 @@
---
id: 7cf9b03d81a65668421804c3
title: Step 39
title: Step 41
challengeType: 0
dashedName: step-39
dashedName: step-41
---
# --description--
@@ -66,7 +66,7 @@ assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
<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>

8
e2e/lower-jaw.spec.ts
View File

@@ -69,7 +69,7 @@ test('Checks hotkeys when instruction is focused', async ({
const description = page.locator('#description');
await editor.fill(
'<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>'
'<h2>Cat Photos</h2>\n<p>Everyone loves cute cats online!</p>'
);
await description.click();
@@ -100,7 +100,7 @@ test('Focuses on the submit button after tests passed', async ({
await clearEditor({ page, browserName });
await editor.fill(
'<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>'
'<h2>Cat Photos</h2>\n<p>Everyone loves cute cats online!</p>'
);
await checkButton.click();
@@ -126,7 +126,7 @@ test('Prompts unauthenticated user to sign in to save progress', async ({
await clearEditor({ page, browserName });
await editor.fill(
'<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>'
'<h2>Cat Photos</h2>\n<p>Everyone loves cute cats online!</p>'
);
await checkButton.click();
@@ -190,7 +190,7 @@ test('should display the text of submit and go to next challenge button accordin
await clearEditor({ page, browserName });
await editor.fill(
'<h2>Cat Photos</h2>\n<p>See more cat photos in our gallery.</p>'
'<h2>Cat Photos</h2>\n<p>Everyone loves cute cats online!</p>'
);
await checkButton.click();

6
e2e/progress-bar.spec.ts
View File

@@ -19,7 +19,7 @@ test.describe('Progress bar component', () => {
await clearEditor({ page, browserName });
await page.keyboard.insertText(
'<html><body><h1>CatPhotoApp</h1><h2>Cat Photos</h2><p>See more cat photos in our gallery.</p></body></html>'
'<html><body><h1>CatPhotoApp</h1><h2>Cat Photos</h2><p>Everyone loves cute cats online!</p></body></html>'
);
await page.getByRole('button', { name: 'Check Your Code' }).click();
@@ -28,7 +28,7 @@ test.describe('Progress bar component', () => {
await expect(progressBarContainer).toContainText(
'Learn HTML by Building a Cat Photo App'
);
await expect(progressBarContainer).toContainText('0% complete');
await expect(progressBarContainer).toContainText(/\d% complete/);
await page
.getByRole('button', { name: 'Submit and go to next challenge' })
.click();
@@ -55,7 +55,7 @@ test.describe('Progress bar component', () => {
.click();
await expect(page.locator('.completion-block-meta')).toContainText(
'99% complete'
/\d% complete/
);
await page

24
tools/scripts/seed/user-data.js
View File

@@ -12219,6 +12219,30 @@ module.exports.fullyCertifiedUser = {
id: '647f7da207d29547b3bee1ba',
challengeType: 7,
files: []
},
{
completedDate: 1729240849345,
id: '671141d8e32fe934c26fa1be',
challengeType: 0,
files: []
},
{
completedDate: 1729240849345,
id: '671141f948cbab359e74cc93',
challengeType: 0,
files: []
},
{
completedDate: 1729240849345,
id: '671141feba228a35cefba82d',
challengeType: 0,
files: []
},
{
completedDate: 1729240849345,
id: '671144cdcc01d73f7dd79dc9',
challengeType: 0,
files: []
}
],
completedExams: [