opensource/freeCodeCamp
3
0
Fork 0
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git synced 2026-09-01 15:02:09 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(curriculum): resolve hint assertion and setup issues in Cafe Menu workshop (#69096)

Browse Source 
Signed-off-by: TEE0207 <taofeeklwl@gmail.com>
Signed-off-by: Orji Emmanuel <130085573+ManuelOrji2@users.noreply.github.com>
Co-authored-by: Orji Emmanuel <130085573+ManuelOrji2@users.noreply.github.com>
This commit is contained in:
TAOFEEK LAWAL
2026-07-31 16:44:17 +01:00
committed by GitHub
parent 906c5197b7
commit 477a25a513
8 changed files with 68 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
curriculum/challenges/english/blocks/workshop-cafe-menu/5f344fad8bf01691e71a30eb.md
+1 -1
View File
@@ -20,7 +20,7 @@ assert.match(code, /<style\s*>/i);
Your code should have a closing `</style>` tag.
```js
assert.match(code, /<\/style\s*>/);
assert.match(code, /<\/style\s*>/i);
```
Your `style` element should be nested in your `head` element.
curriculum/challenges/english/blocks/workshop-cafe-menu/5f3c866d5414453fc2d7b480.md
+18 -12
View File
@@ -18,29 +18,35 @@ Mocha 4.50
As before, the first `p` element's text should contain the coffee flavor and the second `p` element's text should contain the price.
# --before-each--
```js
const articles = document.querySelectorAll('article');
```
# --hints--
You should have five `article` elements.
```js
assert.lengthOf(document.querySelectorAll('article'),5);
assert.lengthOf(articles, 5);
```
Each `article` element should have two `p` elements.
```js
const articles = document.querySelectorAll('article');
assert.lengthOf(articles?.[0]?.children, 2);
assert.lengthOf(articles?.[1]?.children, 2);
assert.lengthOf(articles?.[2]?.children, 2);
assert.lengthOf(articles?.[3]?.children, 2);
assert.lengthOf(articles?.[4]?.children, 2);
assert.isNotEmpty(articles);
articles.forEach(article => {
const children = [...article.children];
assert.lengthOf(children, 2);
assert.isTrue(children.every(el => el.tagName === 'P'));
});
```
Your first `article` element should have `p` elements with the text `French Vanilla` and `3.00`.
```js
const children = document.querySelector('article')?.children;
const children = articles?.[0]?.children;
assert.match(children?.[0]?.innerText.trim(), /French Vanilla/i);
assert.match(children?.[1]?.innerText.trim(), /3\.00/i);
```
@@ -48,7 +54,7 @@ assert.match(children?.[1]?.innerText.trim(), /3\.00/i);
Your second `article` element should have `p` elements with the text `Caramel Macchiato` and `3.75`.
```js
const children = document.querySelectorAll('article')?.[1]?.children;
const children = articles?.[1]?.children;
assert.match(children?.[0]?.innerText.trim(), /Caramel Macchiato/i);
assert.match(children?.[1]?.innerText.trim(), /3\.75/i);
```
@@ -56,7 +62,7 @@ assert.match(children?.[1]?.innerText.trim(), /3\.75/i);
Your third `article` element should have `p` elements with the text `Pumpkin Spice` and `3.50`.
```js
const children = document.querySelectorAll('article')?.[2]?.children;
const children = articles?.[2]?.children;
assert.match(children?.[0]?.innerText.trim(), /Pumpkin Spice/i);
assert.match(children?.[1]?.innerText.trim(), /3\.50/i);
```
@@ -64,7 +70,7 @@ assert.match(children?.[1]?.innerText.trim(), /3\.50/i);
Your fourth `article` element should have `p` elements with the text `Hazelnut` and `4.00`.
```js
const children = document.querySelectorAll('article')?.[3]?.children;
const children = articles?.[3]?.children;
assert.match(children?.[0]?.innerText.trim(), /Hazelnut/i);
assert.match(children?.[1]?.innerText.trim(), /4\.00/i);
```
@@ -72,7 +78,7 @@ assert.match(children?.[1]?.innerText.trim(), /4\.00/i);
Your fifth `article` element should have `p` elements with the text `Mocha` and `4.50`.
```js
const children = document.querySelectorAll('article')?.[4]?.children;
const children = articles?.[4]?.children;
assert.match(children?.[0]?.innerText.trim(), /Mocha/i);
assert.match(children?.[1]?.innerText.trim(), /4\.50/i);
```
curriculum/challenges/english/blocks/workshop-cafe-menu/5f3c866daec9a49519871816.md
+8 -7
View File
@@ -11,6 +11,13 @@ dashedName: step-26
Nest two `p` elements inside your `article` element. The first one's text should be `French Vanilla`, and the second's text `3.00`.
# --before-each--
```js
const article = document.querySelector('article');
const paragraphChildren = article?.querySelectorAll('p');
```
# --hints--
You should not change the existing `article` element.
@@ -22,16 +29,12 @@ assert.lengthOf(document.querySelectorAll('article'),1);
Your `article` element should have two `p` elements.
```js
const article = document.querySelector('article');
const paragraphChildren = article?.querySelectorAll(`:scope ${'p'}`);
assert.lengthOf(paragraphChildren,2);
assert.lengthOf(paragraphChildren, 2);
```
Your first `p` element should have the text `French Vanilla`.
```js
const article = document.querySelector('article');
const paragraphChildren = article?.querySelectorAll(`:scope ${'p'}`);
const firstP = paragraphChildren?.[0];
assert.match(firstP?.innerText.trim(), /French Vanilla/i);
```
@@ -39,8 +42,6 @@ assert.match(firstP?.innerText.trim(), /French Vanilla/i);
Your second `p` element should have the text `3.00`.
```js
const article = document.querySelector('article');
const paragraphChildren = article?.querySelectorAll(`:scope ${'p'}`);
const secondP = paragraphChildren?.[1];
assert.match(secondP?.innerText.trim(), /3\.00/i);
```
curriculum/challenges/english/blocks/workshop-cafe-menu/5f3cade99dda4e6071a85dfd.md
+1 -1
View File
@@ -33,7 +33,7 @@ Your new `section` element should be nested in the `main` element.
```js
const main = document.querySelector('main');
const sections = main?.querySelectorAll(`:scope ${'section'}`);
const sections = main?.querySelectorAll('section');
assert.lengthOf(sections,2);
```
curriculum/challenges/english/blocks/workshop-cafe-menu/5f3ef6e0b431cc215bb16f55.md
+2 -2
View File
@@ -15,7 +15,7 @@ You should add a second `p` element to your `address`.
```js
const address = document.querySelector('address');
const children = address?.querySelectorAll(`:scope ${'p'}`);
const children = address?.querySelectorAll('p');
assert.lengthOf(children , 2);
```
@@ -23,7 +23,7 @@ Your new `p` element should have the text `123 Free Code Camp Drive`. Make sure
```js
const address = document.querySelector('address');
const children = address.querySelectorAll(`:scope ${'p'}`) || [];
const children = address?.querySelectorAll('p') || [];
const lastChild = [...children]?.at(-1);
assert.match(lastChild?.textContent, /123 Free Code Camp Drive/i);
```
curriculum/challenges/english/blocks/workshop-cafe-menu/5f716ad029ee4053c7027a7a.md
+8 -7
View File
@@ -9,6 +9,13 @@ dashedName: step-45
Nest two `p` elements inside your `article` element. The first one's text should be `Donut`, and the second's text `1.50`. Put both of them on the same line making sure there is no space between them.
# --before-each--
```js
const newArticle = [...document.querySelectorAll('article')].at(-1);
const paragraphs = newArticle?.querySelectorAll('p');
```
# --hints--
You should not change your existing `article` element.
@@ -20,24 +27,18 @@ assert.lengthOf(document.querySelectorAll('article'), 6);
Your new `article` element should have two `p` elements.
```js
const newArticle = [...document.querySelectorAll('article')].at(-1);
const paragraphs = newArticle?.querySelectorAll(`:scope ${'p'}`);
assert.lengthOf(paragraphs, 2);
```
Your first `p` element should have the text `Donut`.
```js
const newArticle = [...document.querySelectorAll('article')].at(-1);
const paragraph = newArticle?.querySelector(`:scope ${'p'}`);
assert.match(paragraph?.innerText.trim(), /Donut/i);
assert.match(paragraphs?.[0]?.innerText.trim(), /Donut/i);
```
Your second `p` element should have the text `1.50`.
```js
const newArticle = [...document.querySelectorAll('article')].at(-1);
const paragraphs = newArticle?.querySelectorAll(`:scope ${'p'}`);
assert.match(paragraphs?.[1]?.innerText.trim(), /1\.50/i);
```
curriculum/challenges/english/blocks/workshop-cafe-menu/5f716bee5838c354c728a7c5.md
+16 -16
View File
@@ -15,54 +15,54 @@ Cheesecake 3.00
Cinnamon Roll 2.50
```
# --before-each--
```js
const section = [...document.querySelectorAll('section')].at(-1);
const paragraphs = section?.querySelectorAll('p');
const prices = section?.querySelectorAll('p.price');
const desserts = section?.querySelectorAll('p.dessert');
```
# --hints--
You should have four `article` elements in your second `section`.
```js
const secondSection = document.querySelectorAll('section')[1]
const articles = secondSection.querySelectorAll('article')
assert.lengthOf(articles, 4)
const articles = section?.querySelectorAll('article');
assert.lengthOf(articles, 4);
```
You should have four `.dessert` elements.
```js
assert.lengthOf(document.querySelectorAll('.dessert'), 4);
assert.lengthOf(desserts, 4);
```
You should have four new `.price` elements.
```js
const section = [...document.querySelectorAll('section')].at(-1);
const prices = section.querySelectorAll(`:scope ${'.price'}`);
assert.lengthOf(prices, 4);
```
Your `section` element should have eight `p` elements.
```js
const section = [...document.querySelectorAll('section')].at(-1);
const paragraphs = section.querySelectorAll(`:scope ${'p'}`);
assert.lengthOf(paragraphs, 8);
```
Your `.dessert` elements should have the text `Donut`, `Cherry Pie`, `Cheesecake`, and `Cinnamon Roll`.
```js
const dessert = document.querySelectorAll('.dessert');
assert.match(dessert?.[0]?.innerText.trim(), /donut/i);
assert.match(dessert?.[1]?.innerText.trim(), /cherry pie/i);
assert.match(dessert?.[2]?.innerText.trim(), /cheesecake/i);
assert.match(dessert?.[3]?.innerText.trim(), /cinnamon roll/i);
assert.match(desserts?.[0]?.innerText.trim(), /donut/i);
assert.match(desserts?.[1]?.innerText.trim(), /cherry pie/i);
assert.match(desserts?.[2]?.innerText.trim(), /cheesecake/i);
assert.match(desserts?.[3]?.innerText.trim(), /cinnamon roll/i);
```
Your new `.price` elements should have the text `1.50`, `2.75`, `3.00`, and `2.50`.
```js
const section = [...document.querySelectorAll('section')].at(-1);
const prices = section?.querySelectorAll(`:scope ${'.price'}`);
assert.match(prices?.[0]?.innerText.trim(), /1\.50/);
assert.match(prices?.[1]?.innerText.trim(), /2\.75/);
assert.match(prices?.[2]?.innerText.trim(), /3\.00/);
curriculum/challenges/english/blocks/workshop-cafe-menu/5f7692f7c5b3ce22a57788b6.md
+14 -16
View File
@@ -14,37 +14,35 @@ To complete the styling, add the applicable class names `flavor` and `price` to
You should have five `.flavor` elements.
```js
assert.lengthOf(document.querySelectorAll('.flavor'), 5);
assert.lengthOf(document.querySelectorAll('p.flavor'), 5);
```
You should have five `.price` elements.
```js
assert.lengthOf(document.querySelectorAll('.price'), 5);
assert.lengthOf(document.querySelectorAll('p.price'), 5);
```
Your `.flavor` elements should be your `p` elements with the text `French Vanilla`, `Caramel Macchiato`, `Pumpkin Spice`, `Hazelnut`, and `Mocha`.
```js
const p = document.querySelectorAll('p');
const flavor = document.querySelectorAll('.flavor');
assert.equal(p?.[1], flavor?.[0]);
assert.equal(p?.[3], flavor?.[1]);
assert.equal(p?.[5], flavor?.[2]);
assert.equal(p?.[7], flavor?.[3]);
assert.equal(p?.[9], flavor?.[4]);
const flavor = document.querySelectorAll('p.flavor');
assert.match(flavor?.[0]?.innerText.trim(), /French Vanilla/i);
assert.match(flavor?.[1]?.innerText.trim(), /Caramel Macchiato/i);
assert.match(flavor?.[2]?.innerText.trim(), /Pumpkin Spice/i);
assert.match(flavor?.[3]?.innerText.trim(), /Hazelnut/i);
assert.match(flavor?.[4]?.innerText.trim(), /Mocha/i);
```
Your `.price` elements should be your `p` elements with the text `3.00`, `3.75`, `3.50`, `4.00`, and `4.50`.
```js
const p = document.querySelectorAll('p');
const price = document.querySelectorAll('.price');
assert.equal(p?.[2], price?.[0]);
assert.equal(p?.[4], price?.[1]);
assert.equal(p?.[6], price?.[2]);
assert.equal(p?.[8], price?.[3]);
assert.equal(p?.[10], price?.[4]);
const price = document.querySelectorAll('p.price');
assert.match(price?.[0]?.innerText.trim(), /3\.00/);
assert.match(price?.[1]?.innerText.trim(), /3\.75/);
assert.match(price?.[2]?.innerText.trim(), /3\.50/);
assert.match(price?.[3]?.innerText.trim(), /4\.00/);
assert.match(price?.[4]?.innerText.trim(), /4\.50/);
```
# --seed--