Build a Mood Board - Build a Mood Board

Curriculum Help
1

Tell us what’s happening:

I keep getting the “Your MoodBoard component should render at least three MoodBoardItem components, each should pass color, image, and description props with valid values.”

Even though my code does already.

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 src={image} className="mood-board-image" />
    <h3 className="mood-board-text">{description}</h3>
  </div>
  );
}

export function MoodBoard () {
  return (
    <div>
      <h1 className="mood-board-heading">Destination Mood Board</h1>

      <MoodBoardItem color="green" image="https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg" description="Caribbean" />

      <MoodBoardItem color="blue" image="https://cdn.freecodecamp.org/curriculum/labs/grass.jpg" description="Cape Town" />

      <MoodBoardItem color ="gray" image="https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg" description="Istanbul" />
    </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

it looks like you are missing the mood-board class , user story 9

3

Wrap your three MoodBoardItem components inside a. The tests often check the exact component structure, not just the props. If it still fails, double-check the challenge instructions for any required attributes like alt on the <img>.