Is the portfolio test bugged?

I keep trying, it looks ok to me, but the test don’t recognize my navbar

Welcome to the forum!
We need to see your code in order to help you.

https://codepen.io/pedrowldmbrg/pen/vYRobGL this is the codepen, please if possible, I am excited to start my js study :smiley:

Hello~!

Alright, this is a fun but weird issue. Let’s start by taking a look at the tests that run:

(async () => {
  const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));

  const navbar = document.getElementById('navbar');
  assert.approximately(
    navbar?.getBoundingClientRect().top,
    0,
    15,
    "Navbar's parent should be body and it should be at the top of " +
    'the viewport '
  );

  window.scroll(0, 500);

  await timeout(1);

  assert.approximately(
    navbar?.getBoundingClientRect().top,
    0,
    15,
    'Navbar should be at the top of the viewport even after ' +
    'scrolling '
  );
  window.scroll(0, 0);
})();

This might not make much sense to you, if you aren’t familiar with JavaScript yet. But to put it into plain text, the test looks for your element with the id set to navbar, checks that it is no more than 15px from the top of the window, scrolls the window down, and checks that it is still no more than 15px from the top.

The challenge here, then, is what is your navbar? If we look at your HTML, we see:

            <header>
                <div class="logo">
                    <h1 class="brand"></h1>
                </div>
                <nav id="navbar">
                    <ul>
                        <li><a class="nav-link" href="#welcome-section">About</a></li>
                        <li><a class="nav-link" href="#projects">Projects</a></li>
                        <li><a class="nav-link" href="#contact">Contact</a></li>
                    </ul>
                </nav>
            </header>

Your navbar element is nested within your header. But in your CSS, you give your header a minimum height of 75px and you align the items in the centre.

header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    min-height: 75px;
    padding: 0px 20px;
    background-color: #03547D;
    color: white;
    padding-left: 20px;
}

The gotcha here is that your navbar is not at the top of the window:

image

It’s in the middle of your header. So the tests are seeing it as too far down and failing.

1 Like

even tho my navbar is fixed in the top of the Viewport, the challenge do not accept the last topic, this is the code pen: https://codepen.io/pedrowldmbrg/pen/vYRobGL

Challenge: Personal Portfolio Webpage - Build a Personal Portfolio Webpage

Link to the challenge:

I think you already received some feedback about this project in the another thread of yours.

Please do not create duplicate topics about the same issue.

the thread I am referring

ty very much for your help

1 Like