From 5539605aca99478fc584a5c4ee17874e4f2b54e7 Mon Sep 17 00:00:00 2001 From: Dario-DC <105294544+Dario-DC@users.noreply.github.com> Date: Wed, 8 Jan 2025 19:31:22 +0100 Subject: [PATCH] fix(curriculum): intro, descriptions and tests in cat blog page workshop (#57984) --- client/i18n/locales/english/intro.json | 2 +- .../workshop-blog-page/index.md | 2 +- .../669aff9f5488f1bea056416d.md | 4 ++-- .../669fc7e141e4703748c558bf.md | 2 +- .../669fc938d38e6e38ace9251e.md | 2 +- .../669fd003cb89ee3c2402e041.md | 16 +++++++------- .../669fd6fd12918e3de87854d4.md | 12 +++++------ .../669fdc11c9b0263fe0814a7a.md | 12 +++++------ .../669fde2081f65141ad703fe4.md | 10 ++++----- .../669fdfc9a5e3da42d2376609.md | 10 ++++----- .../66a334a1a7cca6354999f9bf.md | 8 +++---- .../66a335e5888ffb367633200a.md | 15 ++++++++++--- .../66a338be7f1dee383a0e0ecb.md | 21 +++++++++++++------ .../66a33a00514b40393a983c24.md | 21 +++++++++++++------ .../66a33ac0ae8e3139fb34afc3.md | 4 ++-- .../66a33bd56208583aeb4837c4.md | 8 +++---- .../66a33c449ffdf93b90c5821e.md | 4 ++-- .../66a33e9bd3aa213cd23d9c57.md | 6 +++--- .../66a49f685961e997e337cab1.md | 2 +- .../66a7e72adf226c02626715a3.md | 8 +++---- 20 files changed, 98 insertions(+), 71 deletions(-) diff --git a/client/i18n/locales/english/intro.json b/client/i18n/locales/english/intro.json index abc500c6604..2e89003760b 100644 --- a/client/i18n/locales/english/intro.json +++ b/client/i18n/locales/english/intro.json @@ -1856,7 +1856,7 @@ "workshop-blog-page": { "title": "Build a Cat Blog Page", "intro": [ - "In this workshop, you will learn how to build an HTML only blog page using semantic elements including the main, nav, article and footer elements." + "In this workshop, you will build an HTML only blog page using semantic elements including the main, nav, article and footer elements." ] }, "lab-event-hub": { diff --git a/client/src/pages/learn/full-stack-developer/workshop-blog-page/index.md b/client/src/pages/learn/full-stack-developer/workshop-blog-page/index.md index 5582d3bb75a..4ac585b0d34 100644 --- a/client/src/pages/learn/full-stack-developer/workshop-blog-page/index.md +++ b/client/src/pages/learn/full-stack-developer/workshop-blog-page/index.md @@ -6,4 +6,4 @@ superBlock: full-stack-developer ## Introduction to the Build a Cat Blog Page -This is the second workshop for the new full stack developer certification. +In this workshop, you will build an HTML only blog page using semantic elements including the main, nav, article and footer elements. diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669aff9f5488f1bea056416d.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669aff9f5488f1bea056416d.md index d12e6c123cb..2865934d5f8 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669aff9f5488f1bea056416d.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669aff9f5488f1bea056416d.md @@ -8,11 +8,11 @@ demoType: onLoad # --description-- -In this workshop, you will learn how to work with semantic HTML by building a blog page dedicated to Mr. Whiskers the cat. +In this workshop, you will practice working with semantic HTML by building a blog page dedicated to Mr. Whiskers the cat. To begin the project, add the ``, and an `html` element with a `lang` attribute of `en`. -Remember that you learned how to build a basic HTML boilerplate like this in the previous workshop. +Remember that you learned how to build a basic HTML boilerplate like this in the previous module. ```html diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fc7e141e4703748c558bf.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fc7e141e4703748c558bf.md index 4eebb3a9e2e..9213298dcd8 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fc7e141e4703748c558bf.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fc7e141e4703748c558bf.md @@ -37,7 +37,7 @@ assert.match(code, /[.\n\s]*<\/head>/im) --fcc-editable-region-- - + --fcc-editable-region-- ``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fc938d38e6e38ace9251e.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fc938d38e6e38ace9251e.md index 1131bc94253..54f45919cbc 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fc938d38e6e38ace9251e.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fc938d38e6e38ace9251e.md @@ -80,7 +80,7 @@ assert.strictEqual(titleText, "Mr. Whiskers' Blog"); --fcc-editable-region-- - + --fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fd003cb89ee3c2402e041.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fd003cb89ee3c2402e041.md index 775b3caef7b..ca14b548096 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fd003cb89ee3c2402e041.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fd003cb89ee3c2402e041.md @@ -13,7 +13,7 @@ Below the `h1` element, start by adding a `figure` element. Inside the `figure` element, add an `img` element. -The `img` `src` attribute should have a value of `"https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"` and the `alt` text should have a value of `"a cat peacefully sleeping"`. +The `src` attribute of the `img` should have a value of `"https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"` and the `alt` text should have a value of `"a cat peacefully sleeping"`. Below your `img` element, add a `figcaption` with the text `Mr. Whiskers Sleeping`. @@ -35,7 +35,7 @@ Your `figure` element should be within your `header` element. ```js const figureElement = document.querySelector('figure'); -assert(figureElement.parentElement.tagName === 'HEADER'); +assert(figureElement?.parentElement.tagName === 'HEADER'); ``` You should have an `img` element. @@ -48,14 +48,14 @@ Your `img` element should be within your `figure` element. ```js const imgElement = document.querySelector('img'); -assert.strictEqual(imgElement.parentElement.tagName, 'FIGURE'); +assert.strictEqual(imgElement?.parentElement.tagName, 'FIGURE'); ``` Your `img` element should have a `src` attribute set to `"https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg"`. ```js const imgElement = document.querySelector('img'); -const src = imgElement.getAttribute('src'); +const src = imgElement?.getAttribute('src'); assert.strictEqual(src, 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg'); ``` @@ -64,7 +64,7 @@ Your `img` element should have an `alt` attribute set to `"a cat peacefully slee ```js const imgElement = document.querySelector('img'); -const alt = imgElement.getAttribute('alt'); +const alt = imgElement?.getAttribute('alt'); assert.strictEqual(alt, 'a cat peacefully sleeping'); ``` @@ -85,21 +85,21 @@ Your `figcaption` element should be within your `figure` element. ```js const figcaptionElement = document.querySelector('figcaption'); -assert.strictEqual(figcaptionElement.parentElement.tagName, 'FIGURE'); +assert.strictEqual(figcaptionElement?.parentElement.tagName, 'FIGURE'); ``` Your `figcaption` element should have a the text of `Mr. Whiskers Sleeping`. ```js const figcaptionElement = document.querySelector('figcaption'); -assert.strictEqual(figcaptionElement.innerText, "Mr. Whiskers Sleeping") +assert.strictEqual(figcaptionElement?.innerText, "Mr. Whiskers Sleeping") ``` Your `figcaption` should be below the `img` element. You have them in the wrong order. ```js const figureElement = document.querySelector('figure'); -assert.strictEqual(figureElement.lastElementChild.tagName, "FIGCAPTION") +assert.strictEqual(figureElement?.lastElementChild?.tagName, "FIGCAPTION") ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fd6fd12918e3de87854d4.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fd6fd12918e3de87854d4.md index f8665a22a7b..aafb1b76c9a 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fd6fd12918e3de87854d4.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fd6fd12918e3de87854d4.md @@ -45,7 +45,7 @@ Your `nav` element should be within your `header` element. ```js const navElement = document.querySelector('nav'); -assert.strictEqual(navElement.parentElement.tagName, 'HEADER'); +assert.strictEqual(navElement?.parentElement.tagName, 'HEADER'); ``` Your `ul` element should have an opening tag. @@ -64,7 +64,7 @@ Your `ul` element should be within your `nav` element. ```js const ulElement = document.querySelector('ul'); -assert.strictEqual(ulElement.parentElement.tagName, 'NAV'); +assert.strictEqual(ulElement?.parentElement.tagName, 'NAV'); ``` Your `ul` element should contain three `li` elements. @@ -73,7 +73,7 @@ Your `ul` element should contain three `li` elements. const ulElement = document.querySelector("ul"); const liElements = ulElement.querySelectorAll("li"); -assert.strictEqual(liElements.length, 3); +assert.strictEqual(liElements?.length, 3); ``` # --seed-- @@ -97,9 +97,9 @@ assert.strictEqual(liElements.length, 3); />
Mr. Whiskers Sleeping
- --fcc-editable-region-- - - --fcc-editable-region-- +--fcc-editable-region-- + +--fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fdc11c9b0263fe0814a7a.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fdc11c9b0263fe0814a7a.md index 70913374a68..1317117f6b6 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fdc11c9b0263fe0814a7a.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fdc11c9b0263fe0814a7a.md @@ -21,14 +21,14 @@ Your first anchor element should have the text of `About` inside your first `li` ```js const anchorElement = document.querySelector("ul li:first-child a"); -assert.strictEqual(anchorElement.innerText, "About"); +assert.strictEqual(anchorElement?.innerText, "About"); ``` Your first anchor element should have an `href` attribute set to `"#about"`. ```js const anchorElement = document.querySelector("ul li:first-child a"); -const hrefAttribute = anchorElement.getAttribute("href"); +const hrefAttribute = anchorElement?.getAttribute("href"); assert.strictEqual(hrefAttribute, "#about"); ``` @@ -36,14 +36,14 @@ Your second anchor element should have the text of `Posts` inside your second `l ```js const anchorElement = document.querySelector("ul li:nth-child(2) a"); -assert.strictEqual(anchorElement.innerText, "Posts"); +assert.strictEqual(anchorElement?.innerText, "Posts"); ``` Your second anchor element should have an `href` attribute set to `"#posts"`. ```js const anchorElement = document.querySelector("ul li:nth-child(2) a"); -const hrefAttribute = anchorElement.getAttribute("href"); +const hrefAttribute = anchorElement?.getAttribute("href"); assert.strictEqual(hrefAttribute, "#posts"); ``` @@ -51,14 +51,14 @@ Your third anchor element should have the text of `Contact` inside your third `l ```js const anchorElement = document.querySelector("ul li:last-child a"); -assert.strictEqual(anchorElement.innerText, "Contact"); +assert.strictEqual(anchorElement?.innerText, "Contact"); ``` Your third anchor element should have an `href` attribute set to `"#contact"`. ```js const anchorElement = document.querySelector("ul li:last-child a"); -const hrefAttribute = anchorElement.getAttribute("href"); +const hrefAttribute = anchorElement?.getAttribute("href"); assert.strictEqual(hrefAttribute, "#contact"); ``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fde2081f65141ad703fe4.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fde2081f65141ad703fe4.md index cfb56252a18..aa4e9efa37c 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fde2081f65141ad703fe4.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fde2081f65141ad703fe4.md @@ -31,14 +31,14 @@ Your `section` element should have an `id` set to `"about"`. ```js const sectionElement = document.querySelector('section'); -assert.strictEqual(sectionElement.getAttribute("id"), "about"); +assert.strictEqual(sectionElement?.getAttribute("id"), "about"); ``` Your `section` element should be within your `main` element. ```js const sectionElement = document.getElementById('about'); -assert.strictEqual(sectionElement.parentElement.tagName, 'MAIN'); +assert.strictEqual(sectionElement?.parentElement.tagName, 'MAIN'); ``` Your `h2` element should have an opening tag. @@ -57,14 +57,14 @@ Your `h2` element should have the text of `About`. Double check your spelling. ```js const h2Element = document.querySelector('body h2'); -assert.strictEqual(h2Element.innerText, "About"); +assert.strictEqual(h2Element?.innerText, "About"); ``` Your `h2` element should be within your `section` element. ```js const h2Element = document.querySelector('#about h2'); -assert.strictEqual(h2Element.parentElement.tagName, 'SECTION'); +assert.strictEqual(h2Element?.parentElement.tagName, 'SECTION'); ``` # --seed-- @@ -98,7 +98,7 @@ assert.strictEqual(h2Element.parentElement.tagName, 'SECTION'); --fcc-editable-region--
- +
--fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fdfc9a5e3da42d2376609.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fdfc9a5e3da42d2376609.md index 53149db729e..a42601bd680 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fdfc9a5e3da42d2376609.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/669fdfc9a5e3da42d2376609.md @@ -7,7 +7,7 @@ dashedName: step-13 # --description-- -Now that you have added the about section, try clicking on the About link to see the page jump down to that section. +Now that you have added the about section, try clicking on the `About` link to see the page jump down to that section. The next section in the blog page will be a list of posts talking about Mr. Whiskers. @@ -39,21 +39,21 @@ Your `section` element should be within your `main` element. ```js const sectionElement = document.getElementById('posts'); -assert.strictEqual(sectionElement.parentElement.tagName, 'MAIN'); +assert.strictEqual(sectionElement?.parentElement.tagName, 'MAIN'); ``` Your `h2` element should be inside the `section` element. ```js const h2Element = document.querySelector('#posts h2'); -assert.strictEqual(h2Element.parentElement.tagName, 'SECTION'); +assert.strictEqual(h2Element?.parentElement.tagName, 'SECTION'); ``` Your `h2` element should have the text of `Posts`. ```js const h2Element = document.querySelector('#posts h2'); -assert.strictEqual(h2Element.innerText, 'Posts'); +assert.strictEqual(h2Element?.innerText, 'Posts'); ``` # --seed-- @@ -96,7 +96,7 @@ assert.strictEqual(h2Element.innerText, 'Posts');

--fcc-editable-region-- - + --fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a334a1a7cca6354999f9bf.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a334a1a7cca6354999f9bf.md index 9a14103f0df..4139aae8b2c 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a334a1a7cca6354999f9bf.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a334a1a7cca6354999f9bf.md @@ -42,7 +42,7 @@ Your `article` element should be within your `section` element with the `id` set ```js const articleElement = document.querySelector('#posts article'); -assert.strictEqual(articleElement.parentElement.tagName, 'SECTION'); +assert.strictEqual(articleElement?.parentElement.tagName, 'SECTION'); ``` Your code should have an opening `h3` tag. @@ -61,14 +61,14 @@ Your `h3` element should have the text of `Mr. Whiskers' First Day Home`. ```js const h3Element = document.querySelector('h3'); -assert.strictEqual(h3Element.innerText, "Mr. Whiskers' First Day Home"); +assert.strictEqual(h3Element?.innerText, "Mr. Whiskers' First Day Home"); ``` Your `h3` element should be within your `article` element. ```js const h3Element = document.querySelector('#posts article h3'); -assert.strictEqual(h3Element.parentElement.tagName, 'ARTICLE'); +assert.strictEqual(h3Element?.parentElement.tagName, 'ARTICLE'); ``` # --seed-- @@ -113,7 +113,7 @@ assert.strictEqual(h3Element.parentElement.tagName, 'ARTICLE'); --fcc-editable-region--

Posts

- +
--fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a335e5888ffb367633200a.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a335e5888ffb367633200a.md index e964c59cde0..40ef2f19c1c 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a335e5888ffb367633200a.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a335e5888ffb367633200a.md @@ -39,7 +39,7 @@ Your first paragraph element should have lorem ipsum text. Double check for spel const paragraphElement = document.querySelector('article p:first-of-type'); const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.` -assert.strictEqual(paragraphElement.innerText, loremIpsum); +assert.strictEqual(paragraphElement?.innerText, loremIpsum); ``` Your second paragraph element should have lorem ipsum text. Double check for spelling and punctuation errors. @@ -48,7 +48,16 @@ Your second paragraph element should have lorem ipsum text. Double check for spe const paragraphElement = document.querySelector('article p:last-of-type'); const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.` -assert.strictEqual(paragraphElement.innerText, loremIpsum); +assert.strictEqual(paragraphElement?.innerText, loremIpsum); +``` + +Your paragraphs should come after the `h3` element. + +```js +let h3 = document.querySelectorAll('article > p ~ h3'); +assert.isEmpty(h3); +const paragraphs = document.querySelectorAll('article > h3 ~ p'); +assert.lengthOf(paragraphs, 2); ``` # --seed-- @@ -95,7 +104,7 @@ assert.strictEqual(paragraphElement.innerText, loremIpsum); --fcc-editable-region--

Mr. Whiskers' First Day Home

- +
--fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a338be7f1dee383a0e0ecb.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a338be7f1dee383a0e0ecb.md index 47ba91a58bd..e9f3ad7e1ab 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a338be7f1dee383a0e0ecb.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a338be7f1dee383a0e0ecb.md @@ -19,21 +19,21 @@ You should have a second `article` element within your `section` element with th ```js const articleElement = document.querySelector('#posts article:nth-of-type(2)'); -assert.strictEqual(articleElement.parentElement.tagName, 'SECTION'); +assert.strictEqual(articleElement?.parentElement.tagName, 'SECTION'); ``` You should have an `h3` element inside the `article` element with the text of `Mr. Whiskers' First Bath`. ```js const h3Element = document.querySelector('#posts article:nth-of-type(2) h3'); -assert.strictEqual(h3Element.innerText, "Mr. Whiskers' First Bath"); +assert.strictEqual(h3Element?.innerText, "Mr. Whiskers' First Bath"); ``` Your `h3` element should be within your `article` element. ```js const h3Element = document.querySelector('#posts article:nth-of-type(2) h3'); -assert.strictEqual(h3Element.parentElement.tagName, 'ARTICLE'); +assert.strictEqual(h3Element?.parentElement.tagName, 'ARTICLE'); ``` You should have two paragraph elements inside the `article` element. @@ -49,7 +49,7 @@ Your first paragraph element should have lorem ipsum text. Double check for spel const paragraphElement = document.querySelector('#posts article:nth-of-type(2) p:first-of-type'); const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.` -assert.strictEqual(paragraphElement.innerText, loremIpsum); +assert.strictEqual(paragraphElement?.innerText, loremIpsum); ``` Your second paragraph element should have lorem ipsum text. Double check for spelling and punctuation errors. @@ -58,7 +58,16 @@ Your second paragraph element should have lorem ipsum text. Double check for spe const paragraphElement = document.querySelector('#posts article:nth-of-type(2) p:last-of-type'); const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.` -assert.strictEqual(paragraphElement.innerText, loremIpsum); +assert.strictEqual(paragraphElement?.innerText, loremIpsum); +``` + +Your paragraphs should come after the `h3` element. + +```js +let h3 = document.querySelectorAll('#posts article:nth-of-type(2) > p ~ h3'); +assert.isEmpty(h3); +const paragraphs = document.querySelectorAll('#posts article:nth-of-type(2) > h3 ~ p'); +assert.lengthOf(paragraphs, 2); ``` # --seed-- @@ -119,7 +128,7 @@ assert.strictEqual(paragraphElement.innerText, loremIpsum);

--fcc-editable-region-- - + --fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33a00514b40393a983c24.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33a00514b40393a983c24.md index 5480f2e5270..b978b0a7887 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33a00514b40393a983c24.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33a00514b40393a983c24.md @@ -19,21 +19,21 @@ You should have a third `article` element within your `section` element with the ```js const articleElement = document.querySelector('#posts article:nth-of-type(3)'); -assert.strictEqual(articleElement.parentElement.tagName, 'SECTION'); +assert.strictEqual(articleElement?.parentElement.tagName, 'SECTION'); ``` You should have an `h3` element inside the `article` element with the text of `Mr. Whiskers' First Birthday Party`. ```js const h3Element = document.querySelector('#posts article:nth-of-type(3) h3'); -assert.strictEqual(h3Element.innerText, "Mr. Whiskers' First Birthday Party"); +assert.strictEqual(h3Element?.innerText, "Mr. Whiskers' First Birthday Party"); ``` Your `h3` element should be within your `article` element. ```js const h3Element = document.querySelector('#posts article:nth-of-type(3) h3'); -assert.strictEqual(h3Element.parentElement.tagName, 'ARTICLE'); +assert.strictEqual(h3Element?.parentElement.tagName, 'ARTICLE'); ``` You should have two paragraph elements inside the `article` element. @@ -49,7 +49,7 @@ Your first paragraph element should have lorem ipsum text. Double check for spel const paragraphElement = document.querySelector('#posts article:nth-of-type(3) p:first-of-type'); const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.` -assert.strictEqual(paragraphElement.innerText, loremIpsum); +assert.strictEqual(paragraphElement?.innerText, loremIpsum); ``` Your second paragraph element should have lorem ipsum text. Double check for spelling and punctuation errors. @@ -58,7 +58,16 @@ Your second paragraph element should have lorem ipsum text. Double check for spe const paragraphElement = document.querySelector('#posts article:nth-of-type(3) p:last-of-type'); const loremIpsum = `Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas. Quisquam quod, voluptates, quae, quos quibusdam dolorum quia nemo repudiandae quidem voluptatum quas.` -assert.strictEqual(paragraphElement.innerText, loremIpsum); +assert.strictEqual(paragraphElement?.innerText, loremIpsum); +``` + +Your paragraphs should come after the `h3` element. + +```js +let h3 = document.querySelectorAll('#posts article:nth-of-type(3) > p ~ h3'); +assert.isEmpty(h3); +const paragraphs = document.querySelectorAll('#posts article:nth-of-type(3) > h3 ~ p'); +assert.lengthOf(paragraphs, 2); ``` # --seed-- @@ -134,7 +143,7 @@ assert.strictEqual(paragraphElement.innerText, loremIpsum);

--fcc-editable-region-- - + --fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33ac0ae8e3139fb34afc3.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33ac0ae8e3139fb34afc3.md index 9aa0a0d11a2..58cdcbbefc3 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33ac0ae8e3139fb34afc3.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33ac0ae8e3139fb34afc3.md @@ -31,7 +31,7 @@ Your `footer` element should be within your `body` element. ```js const footerElement = document.querySelector('footer'); -assert.strictEqual(footerElement.parentElement.tagName, 'BODY'); +assert.strictEqual(footerElement?.parentElement.tagName, 'BODY'); ``` # --seed-- @@ -124,7 +124,7 @@ assert.strictEqual(footerElement.parentElement.tagName, 'BODY'); --fcc-editable-region-- - + --fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33bd56208583aeb4837c4.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33bd56208583aeb4837c4.md index dc2279576c9..876c7b2928e 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33bd56208583aeb4837c4.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33bd56208583aeb4837c4.md @@ -17,28 +17,28 @@ You should have a `section` element inside your `footer` element. ```js const sectionElement = document.querySelector('footer section'); -assert.strictEqual(sectionElement.parentElement.tagName, 'FOOTER'); +assert.strictEqual(sectionElement?.parentElement.tagName, 'FOOTER'); ``` Your `section` element should have an `id` set to `"contact"`. ```js const sectionElement = document.querySelector('footer section'); -assert.strictEqual(sectionElement.getAttribute("id"), 'contact'); +assert.strictEqual(sectionElement?.getAttribute("id"), 'contact'); ``` You should have an `h2` element inside your `section` element. ```js const sectionElement = document.querySelector('footer section h2'); -assert.strictEqual(sectionElement.parentElement.tagName, 'SECTION'); +assert.strictEqual(sectionElement?.parentElement.tagName, 'SECTION'); ``` Your `h2` element should have the text of `Contact`. ```js const h2Element = document.querySelector('#contact h2'); -assert.strictEqual(h2Element.innerText, 'Contact'); +assert.strictEqual(h2Element?.innerText, 'Contact'); ``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33c449ffdf93b90c5821e.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33c449ffdf93b90c5821e.md index b85412c8b16..c71221384c8 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33c449ffdf93b90c5821e.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33c449ffdf93b90c5821e.md @@ -40,7 +40,7 @@ Your `address` element should be within your `section` element. ```js const addressElement = document.querySelector('footer #contact address'); -assert.strictEqual(addressElement.parentElement.tagName, 'SECTION'); +assert.strictEqual(addressElement?.parentElement.tagName, 'SECTION'); ``` # --seed-- @@ -136,7 +136,7 @@ assert.strictEqual(addressElement.parentElement.tagName, 'SECTION'); --fcc-editable-region-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33e9bd3aa213cd23d9c57.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33e9bd3aa213cd23d9c57.md index eb8a6d8eb31..5d234d189c8 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33e9bd3aa213cd23d9c57.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a33e9bd3aa213cd23d9c57.md @@ -30,14 +30,14 @@ Your first `p` element should have the text of `Phone: 555-555-5555`. ```js const pElement = document.querySelector('#contact p:first-child'); -assert.strictEqual(pElement.innerText, 'Phone: 555-555-5555'); +assert.strictEqual(pElement?.innerText, 'Phone: 555-555-5555'); ``` Your second `p` element should have the text of `Email: fake@email.com`. ```js const pElement = document.querySelector('#contact p:last-child'); -assert.strictEqual(pElement.innerText, 'Email: fake@email.com'); +assert.strictEqual(pElement?.innerText, 'Email: fake@email.com'); ``` # --seed-- @@ -134,7 +134,7 @@ assert.strictEqual(pElement.innerText, 'Email: fake@email.com');

Contact

- +
diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a49f685961e997e337cab1.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a49f685961e997e337cab1.md index fd473ec13d6..bce6d463106 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a49f685961e997e337cab1.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a49f685961e997e337cab1.md @@ -36,7 +36,7 @@ Your `h1` element should be nested inside your `header` element. ```js const h1Element = document.querySelector("h1"); -assert.strictEqual(h1Element.parentElement.tagName, 'HEADER'); +assert.strictEqual(h1Element?.parentElement.tagName, 'HEADER'); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a7e72adf226c02626715a3.md b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a7e72adf226c02626715a3.md index d123a64f723..9032f5a3aba 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a7e72adf226c02626715a3.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-blog-page/66a7e72adf226c02626715a3.md @@ -25,14 +25,14 @@ Your first paragraph should be nested inside the `section` element. ```js const pElement = document.querySelector('#about p:first-of-type'); -assert.strictEqual(pElement.parentElement.tagName, 'SECTION'); +assert.strictEqual(pElement?.parentElement.tagName, 'SECTION'); ``` You should have a second paragraph inside your `section` element. ```js const pElement = document.querySelectorAll('#about p'); -assert.strictEqual(pElement.length, 2); +assert.strictEqual(pElement?.length, 2); ``` Your second paragraph should have the text of `His playful nature and boundless energy keeps me on my toes. I love him so much.` Double check your spelling. @@ -40,7 +40,7 @@ Your second paragraph should have the text of `His playful nature and boundless ```js const pElement = document.querySelector('#about p:last-of-type'); const text = "His playful nature and boundless energy keeps me on my toes. I love him so much." -assert.strictEqual(pElement.innerText, text); +assert.strictEqual(pElement?.innerText, text); ``` # --seed-- @@ -76,7 +76,7 @@ assert.strictEqual(pElement.innerText, text); --fcc-editable-region--

About

- +
--fcc-editable-region--