--description--

Objective: Fulfill the user stories below and get all the tests to pass to complete the lab.

User Stories:

Your portfolio should have a welcome section with an id of welcome-section.
The welcome section should have an h1 element that contains text.
Your portfolio should have a projects section with an id of project-section.
The projects section should contain at least one element with a class of project-tile to hold a project.
The projects section should contain at least one link to a project.
Your portfolio should have a navbar with an id of navbar.
The navbar should contain at least one link that you can click on to navigate to different sections of the page.
Your portfolio should have a link with an id of profile-link, which opens your GitHub or freeCodeCamp profile in a new tab.
Your portfolio should have at least one media query.
The height of the welcome section should be equal to the height of the viewport.
The navbar should always be at the top of the viewport.

Note: Be sure to link your stylesheet in your HTML and apply your CSS.

--hints--

Your portfolio should have a "Welcome" section with an id of welcome-section.

const el = document.getElementById('welcome-section');
assert.isNotNull(el);

Your #welcome-section element should contain an h1 element.

assert.isAbove(
  document.querySelectorAll('#welcome-section h1').length,
  0,
  'Welcome section should contain an h1 element '
);

You should not have any empty h1 elements within #welcome-section element.

assert.isAbove(
  document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length,
  0,
  'h1 element in welcome section should contain your name or camper ' + 'name '
);

You should have a "Projects" section with an id of project-section.

const el = document.getElementById('project-section');
assert.isNotNull(el);

Your portfolio should contain at least one element with a class of project-tile.

assert.isAbove(
  document.querySelectorAll('#project-section .project-tile').length,
  0
);

Your #project-section element should contain at least one a element.

assert.isAbove(document.querySelectorAll('#project-section a').length, 0);

Your portfolio should have a navbar with an id of navbar.

const el = document.getElementById('navbar');
assert.isNotNull(el);

Your #navbar element should contain at least one a element whose href attribute starts with #.

const links = [...document.querySelectorAll('#navbar a')].filter(
  nav => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
);

assert.isAbove(links.length, 0, 'Navbar should contain an anchor link ');

Your portfolio should have an a element with an id of profile-link.

const el = document.getElementById('profile-link');
assert.isNotNull(el);
assert.strictEqual(el.tagName, 'A');

Your #profile-link element should have a target attribute of _blank.

const el = document.getElementById('profile-link');
assert.isNotNull(el);
assert.strictEqual(el.target, '_blank');

Your portfolio should use at least one media query.

const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
assert.isTrue(cssCheck.length > 0 || htmlSourceAttr.length > 0);

Your #navbar element should always be at the top of the viewport.

  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);

--seed--

--seed-contents--

html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Personal Portfolio</title>
  </head>
  <body></body>
</html>

css

--solutions--