--description--

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

User Stories:

Your product landing page should have a header element with a corresponding id="header".
You should have an image within the header element with a corresponding id="header-img" (A logo would make a good image here).
Within the #header element, you should have a nav element with a corresponding id="nav-bar".
You should have at least three clickable elements inside the nav element, each with the class nav-link.
When you click a .nav-link button in the nav element, you should be taken to the corresponding section of the landing page.
You should have an embedded product video with id="video".
Your landing page should have a form element with a corresponding id="form".
Within the form, there should be an input field with id="email" where you can enter an email address.
The #email input field should have placeholder text to let users know what the field is for.
The #email input field should use HTML5 validation to confirm that the entered text is an email address.
Within the form, there should be a submit input with a corresponding id="submit".
When you click the #submit element, the email should be submitted to a static page (use this mock URL: https://www.freecodecamp.org/email-submit).
The navbar should always be at the top of the viewport.
Your product landing page should have at least one media query.
Your product landing page should utilize CSS flexbox at least once.

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

--hints--

You should have a header element with an id of header.

const el = document.getElementById('header');
assert.exists(el); 
assert.strictEqual(el.tagName, 'HEADER');

You should have an img element with an id of header-img.

const el = document.getElementById('header-img');
assert.exists(el); 
assert.strictEqual(el.tagName, 'IMG');

Your #header-img should be a descendant of the #header.

const els = document.querySelectorAll('#header #header-img');
assert.isNotEmpty(els);

Your #header-img should have a src attribute.

const el = document.getElementById('header-img');
assert.exists(el);
assert.exists(el.src);

Your #header-img's src value should be a valid URL (starts with http).

const el = document.getElementById('header-img');
assert.exists(el);
assert.isNotEmpty(el.getAttribute('src')); 
assert.match(el.src, /^http/);

You should have a nav element with an id of nav-bar.

const el = document.getElementById('nav-bar');
assert.exists(el);
assert.strictEqual(el.tagName, "NAV");

Your #nav-bar should be a descendant of the #header.

const els = document.querySelectorAll('#header #nav-bar');
assert.isNotEmpty(els);

You should have at least 3 .nav-link elements within the #nav-bar.

const els = document.querySelectorAll('#nav-bar .nav-link');
assert.isAtLeast(els.length, 3);

Each .nav-link element should have an href attribute.

const els = document.querySelectorAll('.nav-link')
els.forEach(el => {
  assert.exists(el.href);
  assert.isNotEmpty(el.href);
})
assert.isNotEmpty(els);

Each .nav-link element should link to a corresponding element on the landing page (has an href with a value of another element's id. e.g. #footer).

const els = document.querySelectorAll('.nav-link')
els.forEach(el => {
  const linkDestination = el.getAttribute('href').slice(1)
  assert.exists(document.getElementById(linkDestination));
})
assert.isNotEmpty(els);

You should have a video or iframe element with an id of video.

const el = document.getElementById('video');
assert.exists(el); 
assert.oneOf(el.tagName, ['VIDEO','IFRAME']);

Your #video should have a src attribute.

let el = document.getElementById('video')
const sourceNode = el.children;
let sourceElement = null;
if (sourceNode.length) {
  sourceElement = [...video.children].filter(el => el.localName === 'source')[0];
}
if (sourceElement) {
  el = sourceElement;
}
assert.isTrue(el.hasAttribute('src'));

You should have a form element with an id of form.

const el = document.getElementById('form');
assert.exists(el); 
assert.strictEqual(el.tagName, "FORM");

You should have an input element with an id of email.

const el = document.getElementById('email');
assert.exists(el); 
assert.strictEqual(el.tagName, "INPUT");

Your #email should be a descendant of the #form.

const els = document.querySelectorAll('#form #email')
assert.isNotEmpty(els);

Your #email should have the placeholder attribute with placeholder text.

const el = document.getElementById('email');
assert.exists(el); 
assert.exists(el.placeholder); 
assert.isNotEmpty(el.placeholder);

Your #email should use HTML5 validation by setting its type to email.

const el = document.getElementById('email');
assert.exists(el); 
assert.strictEqual(el.type, "email");

You should have an input element with an id of submit.

const el = document.getElementById('submit');
assert.exists(el); 
assert.strictEqual(el.tagName, "INPUT");

Your #submit should be a descendant of the #form.

const els = document.querySelectorAll('#form #submit');
assert.isNotEmpty(els);

Your #submit should have a type of submit.

const el = document.getElementById('submit');
assert.exists(el); 
assert.strictEqual(el.type, 'submit');

Your #form should have an action attribute of https://www.freecodecamp.org/email-submit.

const el = document.getElementById('form');
assert.exists(el); 
assert.strictEqual(el.action, 'https://www.freecodecamp.org/email-submit');

Your #email should have a name attribute of email.

const el = document.getElementById('email');
assert.exists(el); 
assert.strictEqual(el.name, 'email');

Your #nav-bar should always be at the top of the viewport.

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

  const header = document.getElementById('header');
  const headerChildren = header.children;
  const navbarCandidates = [header, ...headerChildren];
  
  // Return smallest top position of all navbar candidates
  const getNavbarPosition = (candidates = []) => {
    return candidates.reduce(
      (min, candidate) =>
        Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
      Infinity
    );
  };
  assert.approximately(
    getNavbarPosition(navbarCandidates),
    0,
    15,
    '#header or one of its children should be at the top of the viewport '
  );

  window.scroll(0, 500);
  await timeout(1);

  assert.approximately(
    getNavbarPosition(navbarCandidates),
    0,
    15,
    '#header or one of its children should be at the top of the ' +
      'viewport even after scrolling '
  );
    
  window.scroll(0, 0);

Your Product Landing Page 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 Product Landing Page should use CSS Flexbox at least once.

const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
const usesFlex = cssRules.find(rule => hasFlex(rule))
const usesFlexMedia = mediaRules.find(mediaRule => {
  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
})
assert.exists(usesFlex || usesFlexMedia);

--seed--

--seed-contents--

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Product Landing Page</title>
  </head>

<body>

</body>

</html>

css

--solutions--