Build a Mood Board - Build a Mood Board

JavaScript
1

Tell us what’s happening:

test case 9 is not passing. i used here map function to render.

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 moodBoards = [
    {
      "id": 1,
      "image": "https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg",
      "color": "Earthy Brown",
      "description": "A serene pathway surrounded by lush greenery, inviting for a tranquil nature walk."
    },
    {
      "id": 2,
      "image": "https://cdn.freecodecamp.org/curriculum/labs/shore.jpg",
      "color": "Ocean Blue",
      "description": "A calm shore with gentle waves under a clear sky, perfect for relaxation by the water."
    },
    {
      "id": 3,
      "image": "https://cdn.freecodecamp.org/curriculum/labs/grass.jpg",
      "color": "Vibrant Green",
      "description": "A close-up of fresh green grass blades, symbolizing growth and renewal."
    },
    {
      "id": 4,
      "image": "https://cdn.freecodecamp.org/curriculum/labs/ship.jpg",
      "color": "Navy Blue",
      "description": "A majestic ship sailing across the deep blue sea, representing adventure and exploration."
    },
    {
      "id": 5,
      "image": "https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg",
      "color": "White and Blue",
      "description": "The iconic white buildings and blue domes of Santorini, Greece, showcasing Mediterranean charm."
    },
    {
      "id": 6,
      "image": "https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg",
      "color": "Gray",
      "description": "A close image of a pigeon perched calmly, reflecting urban wildlife and peaceful coexistence."
    }
  ];

  return (
    <div>
      <h1 className="mood-board-heading">Destination Mood Board</h1>
      <div className="mood-board">
        {
          moodBoards.map(moodBoard => {
            return (
              <MoodBoardItem
                key={moodBoard.id}
                color={moodBoard.color}
                image={moodBoard.image}
                description={moodBoard.description}
              />
            );
          })
        }
      </div>
    </div>
  );
}

Your browser information:

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

Challenge Information:

Build a Mood Board - Build a Mood Board

https://www.freecodecamp.org/learn/full-stack-developer/lab-mood-board/build-a-mood-board

2

Here are some troubleshooting steps you can follow. Focus on one test at a time:

  1. Are there any errors or messages in the console?
  2. What is the requirement of the first failing test?
  3. Check the related User Story and ensure it’s followed precisely.
  4. What line of code implements this?
  5. What is the result of the code and does it match the requirement? (Write the value of a variable to the console at that point in the code if needed.)

If this does not help you solve the problem, please reply with answers to these questions.

3

I solved it without using map method. Thanks.

1 Like