All Tracks/lab mood board/
Đang tải...
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:⌘↵
Test Output
Thử thách này không có bài test tự động. Hãy quan sát kết quả trực tiếp ở khung Preview.