diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698440c54c8823cc60af8bc.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698440c54c8823cc60af8bc.md index 21093caabb7..d129abd4b65 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698440c54c8823cc60af8bc.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698440c54c8823cc60af8bc.md @@ -29,7 +29,8 @@ Within the `ul` element nest three list items to display three things cats love: You should have three `li` elements. Each `li` element should have its own opening and closing tag. ```js -assert($('li').length === 3 && code.match(/<\/li\>/g).length === 3); +assert.lengthOf(document.querySelectorAll('li'), 3); +assert.lengthOf(code.match(/<\/li\>/g), 3); ``` You should have three `li` elements with the text `cat nip`, `laser pointers` and `lasagna` in any order. You have either omitted some text or have a typo. @@ -46,10 +47,10 @@ assert.deepStrictEqual( The three `li` elements should be located between the `ul` element's opening and closing tags. ```js -assert( +assert.lengthOf( [...document.querySelectorAll('li')].filter( (item) => item.parentNode.nodeName === 'UL' - ).length === 3 + ), 3 ); ``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698444102ebd53d78cf66f8.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698444102ebd53d78cf66f8.md index 1d1f7aebec7..1afd6f1eac4 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698444102ebd53d78cf66f8.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698444102ebd53d78cf66f8.md @@ -20,37 +20,36 @@ And its `alt` attribute value to: There should be an `img` element right after the closing `` tag. ```js -assert($('section')[1].lastElementChild.nodeName === 'IMG'); +assert.equal(document.querySelectorAll('section')[1].lastElementChild.nodeName, 'IMG'); ``` The new image does not have an `alt` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. ```js -assert($('section')[1].lastElementChild.hasAttribute('alt')); +assert.isTrue(document.querySelectorAll('section')[1].lastElementChild.hasAttribute('alt')); ``` The new image should have an `alt` value of `A slice of lasagna on a plate.` Make sure the `alt` attribute's value is surrounded with quotation marks. ```js -assert( - $('section')[1] +assert.match( + document.querySelectorAll('section')[1] .lastElementChild.getAttribute('alt') - .replace(/\s+/g, ' ') - .match(/^A slice of lasagna on a plate\.?$/i) + .replace(/\s+/g, ' '), /^A slice of lasagna on a plate\.?$/i ); ``` The new image does not have a `src` attribute. Check that there is a space after the opening tag's name and/or there are spaces before all attribute names. ```js -assert($('section')[1].lastElementChild.hasAttribute('src')); +assert.isTrue(document.querySelectorAll('section')[1].lastElementChild.hasAttribute('src')); ``` The new image should have a `src` value of `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`. Make sure the `src` attribute's value is surrounded with quotation marks. ```js -assert( - $('section')[1].lastElementChild.getAttribute('src') === +assert.equal( + document.querySelectorAll('section')[1].lastElementChild.getAttribute('src'), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' ); ``` @@ -58,7 +57,7 @@ assert( 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(!/\`. ```js -assert(document.querySelector('figure')); +assert.exists(document.querySelector('figure')); ``` Your `figure` element should have a closing tag. Closing tags have a `/` just after the `<` character. ```js -assert(code.match(/<\/figure\>/)); +assert.match(code, /<\/figure\>/); ``` There should be an `figure` element right above the second `section` element's closing tag. ```js -assert($('section')[1].lastElementChild.nodeName === 'FIGURE'); +assert.equal(document.querySelectorAll('section')[1].lastElementChild.nodeName, 'FIGURE'); ``` The lasagna `img` element should be nested in the `figure` element. ```js -assert( - document.querySelector('figure > img') && - document.querySelector('figure > img').getAttribute('src').toLowerCase() === +assert.exists(document.querySelector('figure > img')); +assert.equal( + document.querySelector('figure > img').getAttribute('src').toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' ); ``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/66984535d474083eec6bb8da.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/66984535d474083eec6bb8da.md index ed5845e2bda..0e0dac3b70c 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/66984535d474083eec6bb8da.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/66984535d474083eec6bb8da.md @@ -27,30 +27,27 @@ After the image nested in the `figure` element, add a `figcaption` element with Your `figcaption` element should have an opening tag. Opening tags have the following syntax: ``. ```js -assert(document.querySelector('figcaption')); +assert.exists(document.querySelector('figcaption')); ``` Your `figcaption` element should have a closing tag. Closing tags have a `/` just after the `<` character. ```js -assert(code.match(/<\/figcaption\>/)); +assert.match(code, /<\/figcaption\>/); ``` The `figcaption` element should be nested in the `figure` element. ```js -assert( - document.querySelector('figure > figcaption') && - document.querySelector('figure > figcaption') -); +assert.exists(document.querySelector('figure > figcaption')); ``` The lasagna `img` element should be nested in the `figure` element. ```js -assert( - document.querySelector('figure > img') && - document.querySelector('figure > img').getAttribute('src').toLowerCase() === +assert.exists(document.querySelector('figure > img')) +assert.equal( + document.querySelector('figure > img')?.getAttribute('src').toLowerCase(), 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg' ); ``` @@ -58,16 +55,16 @@ assert( The `figcaption` element nested in the `figure` element should be below the `img` element. You have them in the wrong order. ```js -assert( - document.querySelector('figcaption').previousElementSibling.nodeName === 'IMG' +assert.equal( + document.querySelector('figcaption').previousElementSibling.nodeName, 'IMG' ); ``` Your `figcaption` element's text should be `Cats love lasagna.` You have either omitted the text or have a typo. ```js -assert( - document.querySelector('figcaption').innerText.match(/Cats love lasagna.?$/i) +assert.match( + document.querySelector('figcaption').innerText, /Cats love lasagna.?$/i ); ``` diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698457295f6403fa49050b8.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698457295f6403fa49050b8.md index 825020349dd..a4de42f9c8b 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698457295f6403fa49050b8.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6698457295f6403fa49050b8.md @@ -16,37 +16,38 @@ Emphasize the word `love` in the `figcaption` element by wrapping it in an empha Your emphasis `em` element should have an opening tag. Opening tags have this syntax: ``. ```js -assert(document.querySelector('em')); +assert.exists(document.querySelector('em')); ``` Your emphasis `em` element should have a closing tag. Closing tags have a `/` just after the `<` character. ```js -assert(code.match(/<\/em\>/)); +assert.match(code, /<\/em\>/); ``` You have either deleted the `figcaption` element or it is missing an opening or closing tag. ```js -assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/)); +assert.exists(document.querySelector('figcaption')); +assert.match(code, /<\/figcaption\>/); ``` Your emphasis `em` element should surround the text `love`. You have either omitted the text or have a typo. ```js -assert( - document.querySelector('figcaption > em').innerText.toLowerCase() === 'love' +assert.equal( + document.querySelector('figcaption > em')?.innerText?.toLowerCase(), 'love' ); ``` The `figcaption`'s text should be `Cats love lasagna`. Check for typos and that the necessary spaces are present around the `em` element's opening and closing tags. ```js -assert( +assert.match( document .querySelector('figcaption') - .innerText.replace(/\s+/gi, ' ') - .match(/cats love lasagna\.?/i) + .innerText.replace(/\s+/gi, ' '), + /cats love lasagna\.?/i ); ```