diff --git a/client/src/templates/Challenges/rechallenge/transformers.js b/client/src/templates/Challenges/rechallenge/transformers.js index 17f6378c486..c14dc933200 100644 --- a/client/src/templates/Challenges/rechallenge/transformers.js +++ b/client/src/templates/Challenges/rechallenge/transformers.js @@ -221,7 +221,10 @@ export const embedFilesInHtml = async function (challengeFiles) { style.classList.add('fcc-injected-styles'); style.innerHTML = stylesCss?.contents; - link.parentNode.replaceChild(style, link); + link.parentNode.appendChild(style); + + link.removeAttribute('href'); + link.dataset.href = 'styles.css'; } if (script) { script.innerHTML = scriptJs?.contents; diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md index e899df482b1..e5fd8e47d1e 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md @@ -14,8 +14,7 @@ Now you need to link the `styles.css` file so the styles will be applied again. Your code should have a `link` element. ```js -// link is removed -> if exists, replaced with style -const link = document.querySelector('head > style'); +const link = document.querySelector('link'); assert(link); ``` @@ -34,19 +33,24 @@ assert(code.match(//i)); Your `link` element should be within your `head` element. ```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +const link = document.querySelector('head > link'); +assert(link); ``` Your `link` element should have a `rel` attribute with the value `stylesheet`. ```js -assert(code.match(/rel\s*=\s*('|")stylesheet\1/i)); +const link = document.querySelector('link') +const rel = link.getAttribute('rel') +assert(rel == `stylesheet`) ``` Your `link` element should have an `href` attribute with the value `styles.css`. ```js -assert(code.match(/href\s*=\s*('|")styles.css\1/i)); +const link = document.querySelector('link') +assert(link.dataset.href == 'styles.css') + ``` # --seed-- diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md index cc4ea55244a..e335e62311e 100644 --- a/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md +++ b/curriculum/challenges/english/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md @@ -41,7 +41,7 @@ assert.equal(title.text, 'Registration Form'); Your code should have a `link` element. ```js -assert.match(code, //i)); Your `link` element should be within your `head` element. ```js -assert(code.match(/[\w\W\s]*[\w\W\s]*<\/head>/i)) +assert.exists(document.querySelector('head > link')); ``` Your `link` element should have a `rel` attribute with the value `stylesheet`. ```js -assert.match(code, /