diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-015.md b/curriculum/challenges/english/01-responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-015.md index a63fd9221a..eaa3dbb658 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-015.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-015.md @@ -7,33 +7,40 @@ dashedName: step-15 # --description-- -You have styled three elements by writing CSS inside the `style` tags. This works, but since there will many more styles, it's best to put all the styles in a separate file and link to it. +You have styled three elements by writing CSS inside the `style` tags. This works, but since there will be many more styles, it's best to put all the styles in a separate file and link to it. -We have created a separate `styles.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor. +We have created a separate `index.css` file for you and switched the editor view to that file. You can change between files with the tabs at the top of the editor. -Start by rewriting the styles you have created into the `styles.css` file. Make sure to exclude the opening and closing `style` tags. +Start by rewriting the styles you have created into the `index.css` file. Make sure to exclude the opening and closing `style` tags. # --hints-- -Your `styles.css` file should have the `h1, h2, p` type selector. +Your `index.css` file should have the `h1, h2, p` type selector. ```js -const css = code.split('')[0]; -assert(__helpers.removeWhiteSpace(css).match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/)) +(getUserInput) => { + const css = getUserInput('editableContents'); + assert(__helpers.removeWhiteSpace(css).match(/(h1|h2|p),(h1|h2|p),(h1|h2|p)\{/)); +} ``` Your selector should set the `text-align` property to `center`. ```js -const css = code.split('')[0]; -assert(css.match(/text-align:\s*center;?/)); +(getUserInput) => { + const css = getUserInput('editableContents'); + assert(css.match(/text-align:\s*center;?/)); +} + ``` You should only have one selector. ```js -const css = code.split('')[0]; -assert(css.match(/text-align:\s*center;?/).length === 1); +(getUserInput) => { + const css = getUserInput('editableContents'); + assert(css.match(/text-align:\s*center;?/)?.length === 1); +} ``` # --seed-- diff --git a/curriculum/challenges/english/01-responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-016.md b/curriculum/challenges/english/01-responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-016.md index b602a766b9..ad53fd5ff2 100644 --- a/curriculum/challenges/english/01-responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-016.md +++ b/curriculum/challenges/english/01-responsive-web-design/learn-basic-css-by-building-a-cafe-menu/step-016.md @@ -7,7 +7,7 @@ dashedName: step-16 # --description-- -Now that you have the CSS in the `styles.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that was centered will shift back to the left. +Now that you have the CSS in the `index.css` file, go ahead and remove the `style` element and all its content. Once it is removed, the text that was centered will shift back to the left. # --hints-- @@ -20,9 +20,11 @@ assert(!code.match(/style/i)); You should not have any CSS selectors in your HTML file. ```js -const html = code.split('')[1]; -assert(!html.includes('style')); -assert(!html.includes('text-align')); +(getUserInput) => { + const html = getUserInput('editableContents'); + assert(!html.includes('style')); + assert(!html.includes('text-align')); +} ``` # --seed--