Build a Mood Board - Build a Mood Board

JavaScript
1

Tell us what’s happening:

I am learning React and I am confused on why the color prop is not being utilized for the backgroundColor style property. I am wondering what I am doing wrong here. So far, I am only failing 2 test cases which are test case #3 and test case #9.

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() {
  return (
    <div>
      <h1 className='mood-board-heading'>Destination Mood Board</h1>
      <div className='mood-board'>
        <MoodBoardItem
          color='red'
          image='https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg'
          description='image #1'
        />
        <MoodBoardItem
          color='blue'
          image='https://cdn.freecodecamp.org/curriculum/labs/shore.jpg'
          description='image #2'
        />
        <MoodBoardItem
          color='purple'
          image='https://cdn.freecodecamp.org/curriculum/labs/grass.jpg'
          description='image #3'
        />
      </div>
    </div>
  );
}

Failed Test Cases:

3. The background color of the .mood-board-item element should be set to the value of color prop using inline styles.
9. Your MoodBoard component should render at least three MoodBoardItem components, each should pass color, image, and description props with valid values.

Current Appearance:

image
image1532×892 165 KB

Challenge Information:

Build a Mood Board - Build a Mood Board

2

Consider what is passed as style prop when using style={{...}}.

1 Like
3

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.