Change:
While I was replying to a forum question, I realised that step 65 of the Cafe Menu section accepts an incorrect answer. The challenge is to nest an anchor element inside a element, like this: But the student had nested the p element inside the anchor element, like this: The tests accept that (incorrect) answer - but only if the closing tag is malformed ( instead of ). It's a weirdly specific case, I know, but is there any way to have the tests pick this up? Ideally, the tests would recognise that the elements are incorrectly nested and not allow the incorrect code to pass the tests. No response Device: [e.g. iPhone 6, Laptop] OS: [e.g. iOS 14, Windows 10, Ubuntu 20.04] Browser: [e.g. Chrome, Safari] Version: [e.g. 22] Link to the relevant forum post:
Here is the file I think, it's best to not do anything. The next challenge isn't about css, and they can see the correct format in it
This is how the browser renders the HTML. If we scope the selectors it should fail. We really do not need or , or the case-insensitive not exactly matching regex. We can also extend the third test so that its assert message would trigger, with the incorrect code in question.
Hi Muhammed I'm not sure whether I'm allowed/supposed to reply to these mails - if not, please let me know! Anyway, I did wonder whether I should even raise this as an issue. But given that the test lets the incorrect code through, I felt I should at least flag it as a problem. I don't think it will happen too often, though - they'd need to both misunderstand the instructions and get the closing tag wrong. So, I totally understand the decision to leave this one alone. Thanks for getting back to me. Cheers Moira

Discussion:
You should not modify the existing `footer` element. ```js <del> assert($('footer').length === 1); </del> <ins> assert(document.querySelectorAll("footer").length === 1); </ins> ``` <del> Your new `p` element should be nested within your `footer` element. </del> <ins> Your new `p` element should be nested within your `footer` element. You should have exactly one `p` element. </ins> ```js <del> assert($('footer').children('p').length === 1); </del> <ins> assert(document.querySelectorAll("footer > p").length === 1); assert(document.querySelectorAll("footer p").length === 1); </ins> ``` <del> Your new `a` element should be nested within your new `p` element. </del> <ins> Your new `a` element should be nested within your new `p` element. You should have exactly one `a` element. </ins> ```js <del> assert($('footer').children('p').children('a').length === 1); </del> <ins> assert(document.querySelectorAll("footer > p > a").length === 1); assert(document.querySelectorAll("footer a").length === 1); </ins> ``` Your new `a` element should have the text `Visit our website`. ```js <del> assert($('footer').find('a')[0].innerText.match(/Visit our website/i)); </del> <ins> assert(document.querySelector("footer > p > a")?.innerText === "Visit our website"); </ins> ``` Your new `a` element should link to `https://www.freecodecamp.org`. Remember that `a` elements use the `href` attribute to create a link. ```js <del> assert($('footer').find('a').attr('href') === 'https://www.freecodecamp.org'); </del> <ins> assert(document.querySelector("footer > p > a")?.href === "https://www.freecodecamp.org/"); </ins> ``` # --seed--

</main> --fcc-editable-region-- <footer> </footer> --fcc-editable-region-- </div>