My Technical documentation Page Project is failing user story#3 , #4 and #12 tests

1

Goodday,
Please could someone assist me to debug my code for this project, as it is failing user story #3 , #4 and #12. However, I have checked and re-checked my HTML and CSS for the project and there appears to be no reason why any of the three tests should fail.

The test suite errors for the three failed user stories are:

3. The first element within each .main-section should be a element which contains text that describes the topic of that section.

Not all elements with the class ‘main-section’ have a element as a first element child : expected 13 to equal 14
#4. Each element with the class of “main-section” should also have an id comprised of the innerText contained within it, with underscores in place of spaces. The id may include special characters if there are special characters in the respective innerText. (e.g. The that contains the header, “JavaScript & Java”, should have a corresponding id=“JavaScript_&_Java”)*

12. Each element with the class of “nav-link” should contain text that corresponds to the text within each (e.g. if you have a “Hello world” section/header, your navbar should have an element which contains the text “Hello world”).

Check that these headers have corresponding .nav-link elements and be mindful of case! : IF…ELSE STATEMENT

And if you check my code, it appears to meet these three conditions, hence the reason why I am surprised by the three error messages. Here is also a link to my codepen project: https://codepen.io/obij/pen/QWjogEY

Thanks.

2

You need to check your HTML, there are issues with it causing the tests to fail.

I suggest switching the Syntax Highlighting on Codepen, it can really help catch errors.

Go to your Codepen profile settings (not the setting for the pen, but for your profile). Switch the Syntax Highlighting to Oceanic Dark and save the setting. Go back to the pen and make sure your new setting is working, the code highlighting will be using different colors. Press the down arrow to the right of the HTML code box and select Tidy HTML. Now look at the HTML, if there are issues you should see tags marked in red. That is the new Syntax Highlighting showing you where the problems are.

Here is a link to a diff with enough changes to make the tests pass (still has issues), left is current code, right is new.
https://www.diffchecker.com/0w9xsw5q

You should also use HTML entities for reserved characters (for the code parts).

3

Thanks for taking the time to help me resolve the issue. You have been a great help. Thanks.