Build a Mood Board - Build a Mood Board - Test failed

JavaScript
1

Tell us what’s happening:

  1. Your MoodBoardItem component should return a div with a class of mood-board-item at its top-level element.
  2. Your MoodBoard component should return a div as its top-level element.
  3. Your MoodBoard component should render an h1 element with a class of mood-board-heading and the text Destination Mood Board.
  4. Your MoodBoard component should render at least three MoodBoardItem components, each should pass color img desc.
  5. Your MoodBoard component should be rendered to page’s #root element.

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() {
  <div>
    <h1 className="mood-board-heading">Destination Mood Board</h1>
    <div className="mood-board">
    <MoodBoardItem color="#1d63cc" image="https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg" description="Image of a pathway" />
    <MoodBoardItem color="#cc3d1d" image="https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg" description="Image of a Santorini" />
    <MoodBoardItem color="#0a731c" image="https://cdn.freecodecamp.org/curriculum/labs/grass.jpg" description="Image of grass" />
    </div>
  </div>
}

Your browser information:

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

Challenge Information:

Build a Mood Board - Build a Mood Board

2

Please Tell us what’s happening in your own words.

Learning to describe problems is hard, but it is an important part of learning how to code.

Also, the more you say, the more we can help!

4

I think my code is fine. I’ve tried a few things, tried to look at solutions of others but I still can’t figure out why is my test failing?

For test 2 and 7: I do have a “MoodBoardItem” component, it does return a “div” with className “mood-board-item” as the top level element.

It’s the same scene for other tests. I just can’t seem to figure out what’s wrong, mabe that’s why I haven’t been able to describe it properly and just pasted the test fails.

I just think I’ve done all that the project wanted me to do according to user stories but why is it still failing? And I notice that whatever code I’ve written in the jsx file still isn’t being displayed, so maybe an issue somewhere? But I can’t figure out what issue and where.

5

Oh God I didn’t wrap my elements inside a return, so it couldn’t render!

6

I’ve figured it out! I want to give an excuse that I’m sick so I couldn’t think of it but if I thought a bit more when I posted this I might’ve ended up figuring it out then too! Thanks for making me think - after I just described the problem clearly I was able to think more about it!

1 Like
7

Love to hear it! Really glad you got it.

I hadn’t found that yet but the big clue was that nothing at all was rendering on the page. This is clear why the tests were failing, there was just nothing on the page itself.

Code using the user stories and the app itself. The app should be working before you need to run the tests.