diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690bb0b4062b114997f708a.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690bb0b4062b114997f708a.md index 41ab55358c8..0ab6e3f3bd9 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690bb0b4062b114997f708a.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690bb0b4062b114997f708a.md @@ -25,13 +25,13 @@ Identify the main section of this page by adding a `
` opening tag before t Your `main` element should have an opening tag. Opening tags have this syntax: ``. ```js -assert(document.querySelector('main')); +assert.exists(document.querySelector('main')); ``` Your `main` element should have a closing tag. Closing tags have a `/` just after the `<` character. ```js -assert(code.match(/<\/main\>/)); +assert.match(code, /<\/main\>/); ``` Your `main` element's opening tag should be below the `body` element's opening tag. You have them in the wrong order. @@ -47,7 +47,7 @@ Your `main` element's opening tag should be above the `h1` element. You have the const collection = [...document.querySelectorAll('main,h1')].map( (node) => node.nodeName ); -assert(collection.indexOf('MAIN') < collection.indexOf('H1')); +assert.isBelow(collection.indexOf('MAIN'), collection.indexOf('H1')); ``` Your `main` element's closing tag should be below the `p` element. You have them in the wrong order. @@ -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(), /see more cat photos in our gallery/); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690bd5ad96139157eedf697.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690bd5ad96139157eedf697.md index 731c85b0a22..e68270e09d5 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690bd5ad96139157eedf697.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690bd5ad96139157eedf697.md @@ -25,70 +25,67 @@ The `h1` element, `h2` element and the comment are indented two spaces more than Your code should have an `h2` element with text `Cat Photos`. You may have accidentally deleted it, it is missing both opening and closing tags, or the text has changed. ```js -assert( - document.querySelector('h2') && - code.match(/<\/h2\>/) && - document.querySelector('h2').innerText.toLowerCase() === 'cat photos' -); +assert.exists(document.querySelector('h2')); +assert.match(code, /<\/h2\>/); +assert.equal(document.querySelector('h2').innerText.toLowerCase(),'cat photos') ``` You should not add the `ul` or `li` elements from the example. ```js -assert( - !document.querySelector('ul') && !document.querySelector('li') -); +assert.notExists(document.querySelector('ul')); +assert.notExists(document.querySelector('li')); ``` You should not change the indentation on the line with your `h2` element. Its opening tag should start 6 spaces over from the start of the line. You can restart the step to restore the original indentation. ```js -assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}

/)); +assert.match(code.toLowerCase(), /<\/h1\>\s*\n\s{6}

/); ``` Your code should have a comment. You removed the comment from an earlier step. ```js -assert(code.match(//)); +assert.match(code, //); ``` The comment's text should be `TODO: Add link to cat photos`. Do not change the text or spacing of the comment. ```js -assert(code.match(//i)); +assert.match(code, //i); ``` You should not change the indentation on the line with your comment element. Its opening tag should start 6 spaces over from the start of the line. You can restart the step to restore the original indentation. ```js -assert( +assert.match( code - .toLowerCase() - .match(/<\/h2>\s*\n\s{6}/) + .toLowerCase(), + /<\/h2>\s*\n\s{6}/ ); ``` Your code should have a `p` element. You have removed the `p` element from an earlier step. ```js -assert(document.querySelector('p')); +assert.exists(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. ```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(), + /see\s+more\s+cat\s+photos\s+in\s+our\s+gallery\.?$/ ); ``` The opening `p` tag should have indentation that matches your `h2` and comment elements. Its opening tag should start 6 spaces over from the start of the line. ```js -assert(code.toLowerCase().match(/-->\s*\n\s{6}

/)); +assert.match(code.toLowerCase(), /-->\s*\n\s{6}

/); ``` # --seed-- diff --git a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690be42942f421648b119eb.md b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690be42942f421648b119eb.md index 400b77dd393..1172c772334 100644 --- a/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690be42942f421648b119eb.md +++ b/curriculum/challenges/english/25-front-end-development/workshop-cat-photo-app/6690be42942f421648b119eb.md @@ -16,19 +16,19 @@ Add an `img` element below the `p` element. At this point, no image will show up Your `img` element should have an opening tag. Opening tags have this syntax: ``. ```js -assert(document.querySelector('img')); +assert.exists(document.querySelector('img')); ``` Your `img` element should not have a closing tag ``. ```js -assert(!code.match(/<\/img\>/)); +assert.notMatch(code, /<\/img\>/); ``` You should only have one `img` element. Remove any extras. ```js -assert(document.querySelectorAll('img').length === 1); +assert.lengthOf(document.querySelectorAll('img'), 1); ``` Your `img` element should be below the `p` element. You have them in the wrong order. @@ -37,7 +37,7 @@ Your `img` element should be below the `p` element. You have them in the wrong o const collection = [...document.querySelectorAll('p,img')].map( (node) => node.nodeName ); -assert(collection.indexOf('P') < collection.indexOf('IMG')); +assert.isBelow(collection.indexOf('P'), collection.indexOf('IMG')); ``` # --seed--