Build a Reusable Footer - Build a Reusable Footer

JavaScript
1

Tell us what’s happening:

Hello! I just can’t seem to satisfy both test 9 and 10.

  1. Your footer should have at least three links with the href value set to #.
  2. None of your links should be empty.

When I fix one I don’t pass the other.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Reusable Footer Component</title>
    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/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>

/* file: index.jsx */
export const Footer = () => {
  return (
    <footer>
      <div className="rows">
        <ul className="first-row">
          <li><a href="/dashboard">Dashboard</a></li>
          <li><a href="/services">Services</a></li>
        </ul>
        <ul className="second-row">
          <li><a href="/contact">Contact</a></li>
          <li><a href="https://discord.com">Discord</a></li>
        </ul>
        <ul className="third-row">
          <li><a href="/terms">Terms & Conditions</a></li>
          <li><a href="/privacy">Privacy Policy</a></li>
        </ul>
      </div>
      <p className="copyright">© 2025 All Rights Reserved.</p>
      <div className="icons">
       <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/3916/3916579.png" alt="heart" /></a>
        <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/3916/3916611.png" alt="email" /></a>
        <a href="#"><img src="https://cdn-icons-png.flaticon.com/128/5070/5070407.png" alt="phone number" /></a>
      
    </div>
    </footer>
  )
};


/* file: styles.css */
footer {
  background-color: rgb(251, 227, 231);
  width: 100vw;
  padding-bottom: 20px;
}

.rows li {
  list-style: none;
}

a {
  color: rgb(108, 23, 37);
}

a:hover {
  color: rgb(29, 2, 6);
}

.rows {
  display: flex;
}

body {
  display: flex;
  justify-content: center;
}

img {
  max-width: 6vw;
  padding: 0 10px;
}

.icons {
  display: flex;
  justify-content: center;
}

.copyright {
  display: flex;
  justify-content: center;
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Challenge Information:

Build a Reusable Footer - Build a Reusable Footer

1 Like
2

Welcome to the forum @grimalkin96

Try using text instead of img elements for the anchor elements.

Happy coding

3

Hello @Teller

One story is:

  • At least three links with the href value set to # and the link content set to an icon or text of your choice.

As you can see, text is kept optional.
The reference sample also shows only icons.

So I tried using only <a><i></i></a> … with no text, it didn’t pass.
But after adding text, it passed.

So the story should be rephrased to not keep text optional, or the test changed to accept icons only also.

Otherwise it’s misleading.. :frowning:
Thanks.