--description--

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

User Stories:

You should export a Footer component.
Your Footer component should return a footer element that contains all the other elements.
Your footer element should have:
- At least three unordered lists, each with at least two list items.
- At least one paragraph element with a copyright © symbol.
- At least three links with the href value set to # and the link content set to an icon or text of your choice.

--hints--

You should export a Footer component.

assert.isFunction(window.index.Footer);

Your Footer component should return a footer element.

const footer = document.getElementById('root').firstElementChild;
assert.equal(footer.tagName, 'FOOTER');

Your Footer component should only contain a single footer element.

assert.lengthOf(document.querySelectorAll('footer'), 1);

Your footer element should not have any siblings.

assert.lengthOf(document.getElementById('root').children, 1);

Your footer element should contain at least three unordered lists.

assert.isAtLeast(document.querySelectorAll('ul').length, 3);

Each of your unordered lists should have at least two list items.

const uls = [...document.querySelectorAll('ul')];
uls.forEach(ul => {
    assert.isAtLeast(ul.querySelectorAll('li').length, 2);
  }
);

Your footer should have at least one paragraph element.

assert.isAtLeast(document.querySelectorAll('p').length, 1);

You should have a copyright (©) symbol within one of your paragraphs.

const texts = [...document.querySelectorAll('p')].map(p => p.textContent);
const hasCopyright = texts.some(text => text.includes('©'));
assert.isTrue(hasCopyright);

Your footer should have at least three links with the href value set to #.

const links = document.querySelectorAll('a[href="#"]');
assert.isAtLeast(links.length, 3);

None of your links should be empty.

const links = [...document.querySelectorAll('a[href="#"]')];
links.forEach(link => {
    assert.isNotEmpty(link.textContent);
  }
);

--seed--

--seed-contents--

html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Reusable Footer Component</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.3/babel.min.js"></script>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      src="index.jsx"
    ></script>
    <link rel="stylesheet" href="styles.css" />
  </head>

  <body>
    <div id="root"></div>
    <script
      data-plugins="transform-modules-umd"
      type="text/babel"
      data-presets="react"
      data-type="module"
    >
      import { Footer } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(<Footer />);
    </script>
  </body>
</html>

css

jsx

--solutions--