Hướng dẫn thử thách
1 / 1
Build a Mood Board
A mood board is a collage of images and text that conveys a general idea, goal, or feeling about a particular topic.
In this lab, you will create a mood board using reusable React components. The CSS has already been provided for you.
**Objective:** Fulfill the user stories below and get all the tests to pass to complete the lab.
**User Stories:**
1. You should create and export a `MoodBoardItem` component that accepts three props: `color`, `image`, and `description`.
2. Your `MoodBoardItem` component should return a `div` with a class of `mood-board-item` as its top-level element.
3. You should set the background color of the `.mood-board-item` element to the value of the `color` prop using inline styles.
4. You should render an `img` element, with a class of `mood-board-image` and its `src` attribute set to the value of the `image` prop, within the `.mood-board-item` element.
5. You should render an `h3` element, with a class of `mood-board-text` and its text set to the value of the `description` prop, within the `.mood-board-item` element.
6. You should create and export a `MoodBoard` component.
7. Your `MoodBoard` component should return a `div` as its top-level element.
8. Your `MoodBoard` component should render an `h1` element with a class of `mood-board-heading` and the text `Destination Mood Board`.
9. Your `MoodBoard` component should render a `div` with a class of `mood-board`.
10. Your `MoodBoard` component should render at least three `MoodBoardItem` components within the `.mood-board` element, each of which should pass `color`, `image`, and `description` props with valid values.
You can use the following images in your Mood Board if you would like:
- `https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg`
- `https://cdn.freecodecamp.org/curriculum/labs/shore.jpg`
- `https://cdn.freecodecamp.org/curriculum/labs/grass.jpg`
- `https://cdn.freecodecamp.org/curriculum/labs/ship.jpg`
- `https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg`
- `https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg`
Vượt qua bài kiểm tra hiện tại để mở khóa bài tiếp theo.
main.html
UTF-8 • Tab Size: 2Kiểm tra bài:⌘↵