Build a Mood Board - Build a Mood Board

JavaScript
1

Tell us what’s happening:

I cannot pass tests 9 & 10 and cannot understand. I’m exporting my functions, and pictures are rendering in Preview area as expected. Sidenote: i also cannot “default” export MoodBoard for some reason. I’m successfully using both an Object.map to loop thru an array of pictures and pass props those to create MoodBoardItems, and explicitly creating elements passing statically configured props. What simple syntax or technique am I missing that the tests require to pass?

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>
  )
}

export function MoodBoard() {

  const pictures = [
    {
      key: 1,
      color: "seagreen",
      image: "https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg",
      description: "Caribbean",
    },
    {
      key: 2,
      color: "steelblue",
      image: "https://cdn.freecodecamp.org/curriculum/labs/shore.jpg",
      description: "Gawadar Beach"
    },
    {
      key: 3,
      color: "cornflowerblue",
      image: "https://cdn.freecodecamp.org/curriculum/labs/grass.jpg",
      description: "Capetown"
    },
    {
      key: 4,
      color: "lightsalmon",
      image: "https://cdn.freecodecamp.org/curriculum/labs/ship.jpg",
      description: "Suez Canal"
    },
    {
      key: 5,
      color: "tomato",
      image: "https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg",
      description: "Santorini"
    }
  ]

  return (
    <div>
      <h1 className="mood-board-heading">Destination Mood Board</h1>
      
      {pictures.map((item, index) => (
        <MoodBoardItem 
          key = {index}
          color = {item.color}
          image = {item.image}
          description = {item.description} 
        />
      ))}
      
      {/* <MoodBoardItem 
        color="green"
        image="https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg"
        description="Caribbean"
      />
      <MoodBoardItem 
        color="Blue"
        image="https://cdn.freecodecamp.org/curriculum/labs/shore.jpg"
        description="Gawandar Beach"
      />
      <MoodBoardItem 
        color="green"
        image="https://cdn.freecodecamp.org/curriculum/labs/grass.jpg"
        description="Cape Town"
      /> */}
    </div>
  )
}

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Safari/537.36

Challenge Information:

Build a Mood Board - Build a Mood Board

2

double check user story 9, you missed something that is necessary

3

OMG!!! Thank you SO MUCH!!! The devil is in the details, such as a simple className value. I’ll try to read more carefully in the future. Hopefully, this isn’t revealing too much to others.