Test 2 Fails No Matter What - Build A Mood Board

Curriculum Help
1

Tell us what’s happening:

I can’t pass test 2 (should return a div with the class mood-board-item as its top level element). I think it’s a bug because all the other tests that don’t involve the first function pass and I even checked that my code was the exact same by looking at someone else who passed and it was so then I copy-pasted from several other users to see if I did something wrong but I was still failing test 2.

Your code so far

<!-- file: index.html -->
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Mood Board</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 { MoodBoard } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(
        <MoodBoard />
      );
    </script>
  </body>
</html>

/* file: styles.css */
body {
  background-color: #ffffcc;
}

.mood-board-heading {
  text-align: center;
  font-size: 2.5em;
  color: #333;
  margin-top: 20px;
}

.mood-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  padding: 20px;
  max-width: 900px;
  margin: 0 auto;
}

.mood-board-item {
  border-radius: 10px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-align: center;
  height: 250px;
}

.mood-board-image {
  border-radius: 5px;
  width: 180px;
  height: 150px;
  object-fit: cover;
}

.mood-board-text {
  margin-top: 20px;
  font-size: 1.2em;
}

/* file: index.jsx */
export function MoodBoardItem({color, image, description}){
  return(
    <div className="mood-board-item" style={{backgroundColor: color}}>
    <img className="mood-board-image" src={image} />
    <h3 className="mood-board-text">{description} </h3>
    </div>
  )
}

Your browser information:

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

Challenge Information:

Build a Mood Board - Build a Mood Board

GitHub Link: freeCodeCamp/curriculum/challenges/english/blocks/lab-mood-board/673b3d6b7ef7318eef926d5a.md at main · freeCodeCamp/freeCodeCamp · GitHub

2

I took a look at the code for that test. It requires at least one mood board item to be rendered to the page. Once you get to the user stories further down, you will need to add one.