From d37fac68ab9aafeab2c564feac3b68ded4b1f273 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lasse=20J=C3=B8rgensen?= <28780271+lasjorg@users.noreply.github.com> Date: Mon, 8 Jul 2024 07:51:05 +0200 Subject: [PATCH] fix(curriculum): replace self-closing with void element, update tests (#55430) --- .../5f331e55dfab7a896e53c3a1.md | 14 +++++++--- .../5f3477cb2e27333b1ab2b955.md | 28 +++++++++++-------- .../5f3ef6e01f288a026d709587.md | 24 ++++++++++------ .../5f46e8284aae155c83015dee.md | 21 ++++++++++---- 4 files changed, 58 insertions(+), 29 deletions(-) diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md index 7c8e373a1d4..bc60a161e8e 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md @@ -9,26 +9,32 @@ dashedName: step-3 The `title` is one of several elements that provide extra information not visible on the web page, but it is useful for search engines or how the page gets displayed. -Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. Note that `meta` elements are self-closing. +Inside the `head` element, nest a `meta` element with an attribute named `charset` set to the value `utf-8` to tell the browser how to encode characters for the page. # --hints-- You should have a `meta` tag. ```js -assert(code.match(//is)); +assert.match(code, //is); +``` + +The `meta` element is a void element, it should not have an end tag ``. + +```js +assert.notMatch(code, /<\/meta>/i); ``` Your `meta` tag should have a `charset` attribute. ```js -assert(code.match(/`. + +```js +assert.notMatch(code, /<\/link>/i); ``` You should not change your existing `head` element. Make sure you did not delete the closing tag. ```js -assert($('head').length === 1); +const headElementCount = document.querySelectorAll('head')?.length; +assert.strictEqual(headElementCount, 1); ``` -You should have one self-closing `link` element. +You should have one `link` element. ```js -const link = document.querySelectorAll('link'); -assert(link.length === 1); +const linkElementCount = document.querySelectorAll('link')?.length; +assert.strictEqual(linkElementCount, 1); ``` Your `link` element should be within your `head` element. ```js const link = document.querySelector('head > link'); -assert(link); +assert.isNotNull(link); ``` Your `link` element should have a `rel` attribute with the value `stylesheet`. ```js -const link = document.querySelector('link') -const rel = link.getAttribute('rel') -assert(rel == `stylesheet`) +const linkRelValue = document.querySelector('link')?.getAttribute('rel'); +assert.strictEqual(linkRelValue, 'stylesheet'); ``` Your `link` element should have an `href` attribute with the value `styles.css`. ```js -const link = document.querySelector('link') -assert(link.dataset.href == 'styles.css') +const linkHrefValue = document.querySelector('link')?.dataset?.href; +assert.strictEqual(linkHrefValue, 'styles.css'); ``` diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md index d5997915ace..c5f5ea76b7a 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md @@ -9,34 +9,42 @@ dashedName: step-66 You can use an `hr` element to display a divider between sections of different content. -First, add an `hr` element between the `p` element with the class `established` and the first `section` element. Note that `hr` elements are self closing. +First, add an `hr` element between the `p` element with the class `established` and the first `section` element. # --hints-- -You should add an `hr` element. `hr` elements are self-closing. +You should add an `hr` element. ```js -assert(code.match(//i)); -assert(!code.match(/<\/hr>/i)); +assert.match(code, //i); +``` + +The `hr` element is a void element, it should not have an end tag ``. + +```js +assert.notMatch(code, /<\/hr>/i); ``` You should not change your existing `p` element with the class `established`. ```js -assert($('p.established').length === 1); +const pElementCount = document.querySelectorAll('p.established')?.length; +assert.strictEqual(pElementCount, 1); ``` You should not change your existing `main` element. ```js -assert($('main').length === 1); +const mainElementCount = document.querySelectorAll('main')?.length; +assert.strictEqual(mainElementCount, 1); ``` Your `hr` element should be between your `p` element and your `section` element. ```js -assert($('hr')[0].previousElementSibling.tagName === 'P'); -assert($('hr')[0].nextElementSibling.tagName === 'SECTION'); +const hrElement = document.querySelector('hr'); +assert.strictEqual(hrElement?.previousElementSibling?.tagName, 'P'); +assert.strictEqual(hrElement?.nextElementSibling?.tagName, 'SECTION'); ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md index aa69085c4b3..253c6ea66a6 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md @@ -13,22 +13,31 @@ Under the `Coffee` heading, add an image using the url `https://cdn.freecodecamp # --hints-- -You should have an `` tag. Remember that `img` elements are self-closing. +You should have an `` tag. ```js -assert($('img').length === 1); +const imageElementCount = document.querySelectorAll('img')?.length; +assert.strictEqual(imageElementCount, 1); ``` -Your `img` element should have a `src` attribute of `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. +The `img` element is a void element, it should not have an end tag ``. ```js -assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg'); +assert.notMatch(code, /<\/img>/i); ``` -Your `img` element should have an `alt` attribute of `coffee icon`. +Your `img` element should have a `src` attribute, with the value `"https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg"`. ```js -assert($('img').attr('alt').match(/coffee icon/i)); +const imageSrcValue = document.querySelector('img')?.getAttribute('src'); +assert.strictEqual(imageSrcValue, 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg'); +``` + +Your `img` element should have an `alt` attribute, with the value `"coffee icon"`. + +```js +const imageAltValue = document.querySelector('img')?.getAttribute('alt'); +assert.match(imageAltValue, /coffee icon/i); ``` # --seed--