feat(curriculum): add React props lab prototype (#634)

* add prototype * feat: add user stories * Apply suggestions from code review Co-authored-by: Jessica Wilkins <[email protected]> * remove boilerplate code instructions * Update frontend-cert/react-projects/react-props/user-stories.md --------- Co-authored-by: Jessica Wilkins <[email protected]>
freeCodeCamp · Oct 21, 2024 · bdba114 · bdba114
1 parent 3f6588d
commit bdba114
Show file tree

Hide file tree

Showing 9 changed files with 137 additions and 0 deletions.
diff --git a/frontend-cert/react-projects/react-props/images/grass.jpg b/frontend-cert/react-projects/react-props/images/grass.jpg
diff --git a/frontend-cert/react-projects/react-props/images/pathway.jpg b/frontend-cert/react-projects/react-props/images/pathway.jpg
diff --git a/frontend-cert/react-projects/react-props/images/pigeon.jpg b/frontend-cert/react-projects/react-props/images/pigeon.jpg
diff --git a/frontend-cert/react-projects/react-props/images/santorini.jpg b/frontend-cert/react-projects/react-props/images/santorini.jpg
diff --git a/frontend-cert/react-projects/react-props/images/ship.jpg b/frontend-cert/react-projects/react-props/images/ship.jpg
diff --git a/frontend-cert/react-projects/react-props/images/shore.jpg b/frontend-cert/react-projects/react-props/images/shore.jpg
diff --git a/frontend-cert/react-projects/react-props/index.html b/frontend-cert/react-projects/react-props/index.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="UTF-8" />
+    <title>Mood Board</title>
+    <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
+    <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
+
+    <!-- Don't use this in production: -->
+    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
+    <link rel="stylesheet" href="./styles.css" />
+</head>
+
+<body>
+    <div id="root"></div>
+    <script type="text/babel">
+        function MoodBoardItem(props) {
+            return (
+                <div
+                    className="mood-board-item"
+                    style={{ backgroundColor: props.color }}
+                >
+                    <img src={props.image} alt="Mood" className="mood-board-image" />
+                    <h3 className="mood-board-text">{props.description}</h3>
+                </div>
+            );
+        }
+
+        function MoodBoard() {
+            return (
+                <div>
+                    <h1 className="moodboard-heading">Destination Moodboard</h1>
+                    <div className="mood-board">
+                        <MoodBoardItem
+                            color="#2da64f"
+                            image="images/pathway.jpg"
+                            description="Carribean"
+                        />
+                        <MoodBoardItem
+                            color="#8e44ad"
+                            image="images/shore.jpg"
+                            description="Gawadar Beach"
+                        />
+                        <MoodBoardItem
+                            color="#3498db"
+                            image="images/grass.jpg"
+                            description="Cape Town"
+                        />
+                        <MoodBoardItem
+                            color="#bf3d7e"
+                            image="images/ship.jpg"
+                            description="Suez Canal"
+                        />
+                        <MoodBoardItem
+                            color="#e74c3c"
+                            image="images/santorini.jpg"
+                            description="Santorini"
+                        />
+                        <MoodBoardItem
+                            color="#95a5a6"
+                            image="images/pigeon.jpg"
+                            description="Istanbul"
+                        />
+                    </div>
+                </div>
+            );
+        }
+
+        const container = document.getElementById("root");
+        const root = ReactDOM.createRoot(container);
+        root.render(<MoodBoard />);
+    </script>
+</body>
+
+</html>
diff --git a/frontend-cert/react-projects/react-props/styles.css b/frontend-cert/react-projects/react-props/styles.css
@@ -0,0 +1,40 @@
+.moodboard-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;
+}
diff --git a/frontend-cert/react-projects/react-props/user-stories.md b/frontend-cert/react-projects/react-props/user-stories.md
@@ -0,0 +1,21 @@
+# --description--
+
+A mood board is a collage consisting of images and text. It is used to convey 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.
+
+Fulfill the user stories below and get all the tests to pass to complete the lab.
+
+**User Stories:**
+
+1. The `mood-board-item` `div` should have its background color set to the `color` prop.
+2. The `MoodBoardItem` component should render an `img` element with the `src` attribute set to the `image` prop.
+3. The `MoodBoardItem` component should render an `h3` set to the `description` prop. It should have a `className` of `mood-board-text`.
+4. You should define a `MoodBoard` component that:
+    - Renders an `h1` with a `className` of `moodboard-heading` and the text `Destination MoodBoard`.
+    - Used the `MoodBoardItem` component to render a `MoodBoardItem`. 
+    - Each `MoodBoardItem` should have the following props:
+        - `color`.
+        - `image`.
+        - `description`.
+5. You should add at least 3 `MoodBoardItem` components to the `MoodBoard` component.