Technical Documentation Page (yes I have searched ;p)

I’ve checked through other similar topics and still cannot resolve my problem.

I’m failing on:

User Story #13: When I click on a navbar element, the page should navigate to the corresponding section of the main-doc element (e.g. If I click on a nav-link element that contains the text “Hello world”, the page navigates to a section element that has that id and contains the corresponding header .

<li class="menu-header"><a class="nav-link" href="#JS_Documentation">JS Documentation</a></li>
<main id="main-doc">
            <section class="main-section" id="JS_Documentation">
                <header>
                    <h2>JS Documentation</h2>
                </header>               
            </section>
</main>

Am I going blind? I honestly cannot seem to see the problem, and it seems to work as intended.

Do you have a link to the full project? Also, the test will give you some extra information about what it expected to find vs. what it did find for each test. You have to look below the main test description for this information.

I’m having some unrelated issues with codepen at the moment but will keep trying and post here if I get it working. This is the full info:

There is text on the right that is cut off on your screenshot that could give more information. Ideally, you need to post your codepen url so we can test ourselves.

Here’s what my codepen currently looks like…

and the link: https://codepen.io/badgerfool/pen/OJPbvzP

and the full text of the error, couldn’t include in last post as I was limited to one image with being a new user.

I think my codepen issue is cache related as it seems to work fine in an incognito window, I’ll sort that later as I have other tabs I need open. Still testing with same error.

As an aside it looks ridiculous in chrome :man_facepalming: might redo the css, I styled it with it open in a live server using brave browser, no clue why it looks so different! :man_shrugging:

The tests are expecting the header element to only contain the text which is the same as the id that has the underscores. You have more than just the text. You have nested an h2 element in the header. In fact, user story #12 is the one that actually states this.

hmm so it should have failed at 12? I’ll get rid of the h2s and see if that works

I think the test for user story 12 is only checking for some parts of what is expected. Probably needs to be improved to catch this issue sooner than relying on user story 12 to catch it.

FYI - I know you are not finished with all the styling, but you should definitely figure out how to make the navigation menu “fixed”, so that when a user clicks a nav link and the page shifts down quite a bit, that the user does not have to scroll all the way back to the top again to click on other menu items.

1 Like

Hmm h2 tags all gone and still failing. image

I will not tell you which one, but one of the anchor elements with class=“nav-link” has an id value with a typo. You will only have to change one character to get test #13 to pass.

1 Like

aaagh that was annoying! fwiw that wasn’t a typo, I actually changed the menu item to read “if-else” rather than “if…else” as it was in the example I copied from.

I know it says to use underscores but it seems odd to entirely exclude dashes!

Oh well, it passes now, and I restyled it to normal size so it doesn’t look so ridiculous :rofl:

Did you like my required media query? I was feeling lazy at that point :man_shrugging:

Thanks for the help @RandellDawson :grin:

Funny!

Actually, you have some issues when shrinking the width of the page. The nav bar bleeds over into the content.

Also, you should only have one test script and it should not be the one that is above the head element.

1 Like

Yeah I see, perhaps I should increase the pixels on my media query so that nobody notices? :rofl:

As it technically passes I’m not sure whether to style it for smaller screens or just move on to the next project, what would you suggest?

I wasn’t sure what was required when copy pasting into codepen as it clearly doesn’t need (!DOCTYPE html) among other things. :man_shrugging:

I’m still very new at this.

Hadn’t spotted this reply earlier, sorry my bad!

I just fixed the nav on my version (not codepen) and it made the bleed over problem worse even at desktop size!

Something to do with how I set up the flex box no doubt.

I still don’t quite get it, I much prefer grid.

You can do what you want, but I suggest using some original content vs. copying pasting the JavaScript documentation used in the demo project.

1 Like