You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
{
"seed": "<head></head><head>\n <meta charset=\"UTF-8\">\n <title>Mood Board</title>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.3/babel.min.js\"></script>\n <script data-plugins=\"transform-modules-umd\" data-src=\"index.jsx\" data-type=\"text/babel\">(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define(\"index\", [\"exports\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(exports);\n } else {\n var mod = {\n exports: {}\n };\n factory(mod.exports);\n global.index = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_exports) {\n \"use strict\";\n\n Object.defineProperty(_exports, \"__esModule\", {\n value: true\n });\n _exports.MoodBoard = MoodBoard;\n _exports.MoodBoardItem = MoodBoardItem;\n function MoodBoardItem(_ref) {\n var color = _ref.color,\n image = _ref.image,\n description = _ref.description;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"mood-board-item\",\n styles: {\n backgroundColor: color\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n className: \"mood-board-image\",\n src: image\n }));\n }\n function MoodBoard() {\n return /*#__PURE__*/React.createElement(\"div\", null, /*#__PURE__*/React.createElement(\"h1\", {\n className: \"mood-board-heading\"\n }, \"Destination Mood BOard\"));\n }\n});</script>\n <link rel=\"stylesheet\" data-href=\"styles.css\">\n <style class=\"fcc-injected-styles\">body {\n background-color: #ffffcc;\n}\n\n.mood-board-heading {\n text-align: center;\n font-size: 2.5em;\n color: #333;\n margin-top: 20px;\n}\n\n.mood-board {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n padding: 20px;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.mood-board-item {\n border-radius: 10px;\n padding: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: #fff;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n text-align: center;\n height: 250px;\n}\n\n.mood-board-image {\n border-radius: 5px;\n width: 180px;\n height: 150px;\n object-fit: cover;\n}\n\n.mood-board-text {\n margin-top: 20px;\n font-size: 1.2em;\n}</style></head>\n\n <body>\n <div id=\"root\"></div>\n <script data-plugins=\"transform-modules-umd\" data-presets=\"react\" data-type=\"text/babel\">(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"./index.jsx\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"./index.jsx\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.index);\n global.unknown = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_index) {\n \"use strict\";\n\n ReactDOM.createRoot(document.getElementById('root')).render( /*#__PURE__*/React.createElement(_index.MoodBoard, null));\n});</script>\n \n</body>",
"description": "<section id=\"description\">\n<p>A mood board is a collage of images and text that conveys a general idea, goal, or feeling about a particular topic.</p>\n<p>In this lab, you will create a mood board using reusable React components. The CSS has already been provided for you.</p>\n<p><strong>Objective:</strong> Fulfill the user stories below and get all the tests to pass to complete the lab.</p>\n<p><strong>User Stories:</strong></p>\n<ol>\n<li>You should create and export a <code>MoodBoardItem</code> component that accepts three props: <code>color</code>, <code>image</code>, and <code>description</code>.</li>\n<li>Your <code>MoodBoardItem</code> component should return a <code>div</code> with the class <code>mood-board-item</code> as its top-level element.</li>\n<li>You should set the background color of the <code>.mood-board-item</code> element to the value of the <code>color</code> prop using inline styles.</li>\n<li>You should render an <code>img</code> element, with a class of <code>mood-board-image</code> and its <code>src</code> attribute set to the value of the <code>image</code> prop, within the <code>.mood-board-item</code> element.</li>\n<li>You should render an <code>h3</code> element, with a class of <code>mood-board-text</code> and its text the value of the <code>description</code> prop, within the <code>.mood-board-item</code> element.</li>\n<li>You should create and export a <code>MoodBoard</code>.</li>\n<li>Your <code>MoodBoard</code> component should return a <code>div</code> as its top-level element.</li>\n<li>Your <code>MoodBoard</code> component should render an <code>h1</code> element with a class of <code>mood-board-heading</code> and the text <code>Destination Mood Board</code>.</li>\n<li>Your <code>MoodBoard</code> component should render a <code>div</code> with a class of <code>mood-board</code>.</li>\n<li>Your <code>MoodBoard</code> component should render at least three <code>MoodBoardItem</code> components within the <code>.mood-board</code> element, each should pass <code>color</code>, <code>image</code>, and <code>description</code> props with valid values.</li>\n</ol>\n<p>You can use the following images in your Mood Board if you would like:</p>\n<ul>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg</code></li>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/shore.jpg</code></li>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/grass.jpg</code></li>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/ship.jpg</code></li>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg</code></li>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg</code></li>\n</ul>\n</section>",
"hints": [
{
"text": "<p>You should export a <code>MoodBoardItem</code> component.</p>"
},
{
"text": "<p>Your <code>MoodBoardItem</code> component should return a <code>div</code> with a class of <code>mood-board-item</code> at its top-level element.</p>",
"failed": true
},
{
"text": "<p>The background color of the <code>.mood-board-item</code> element should be set to the value of <code>color</code> prop using inline styles.</p>",
"failed": true
},
{
"text": "<p>Your <code>MoodBoardItem</code> component should render an <code>img</code> element with a class of <code>mood-board-image</code> and its <code>src</code> set to the value of the <code>image</code> prop.</p>"
},
{
"text": "<p>Your <code>MoodBoardItem</code> component should render an <code>h3</code> element with a class of <code>mood-board-text</code> and its text set to the value of the <code>description</code> prop.</p>",
"failed": true
},
{
"text": "<p>You should export a <code>MoodBoard</code> component.</p>"
},
{
"text": "<p>Your <code>MoodBoard</code> component should return a <code>div</code> as its top-level element.</p>"
},
{
"text": "<p>Your <code>MoodBoard</code> component should render an <code>h1</code> element with a class of <code>mood-board-heading</code> and the text <code>Destination Mood Board</code>.</p>",
"failed": true
},
{
"text": "<p>Your <code>MoodBoard</code> component should render at least three <code>MoodBoardItem</code> components, each should pass <code>color</code>, <code>image</code>, and <code>description</code> props with valid values.</p>",
"failed": true
},
{
"text": "<p>Your <code>MoodBoard</code> component should be rendered to the page's <code>#root</code> element.</p>",
"failed": true
}
]
}
Client Error View
Network Request
{ "seed": "<head></head><head>\n <meta charset=\"UTF-8\">\n <title>Mood Board</title>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/react/18.3.1/umd/react.development.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.3.1/umd/react-dom.development.js\"></script>\n <script src=\"https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/7.26.3/babel.min.js\"></script>\n <script data-plugins=\"transform-modules-umd\" data-src=\"index.jsx\" data-type=\"text/babel\">(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define(\"index\", [\"exports\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(exports);\n } else {\n var mod = {\n exports: {}\n };\n factory(mod.exports);\n global.index = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_exports) {\n \"use strict\";\n\n Object.defineProperty(_exports, \"__esModule\", {\n value: true\n });\n _exports.MoodBoard = MoodBoard;\n _exports.MoodBoardItem = MoodBoardItem;\n function MoodBoardItem(_ref) {\n var color = _ref.color,\n image = _ref.image,\n description = _ref.description;\n return /*#__PURE__*/React.createElement(\"div\", {\n className: \"mood-board-item\",\n styles: {\n backgroundColor: color\n }\n }, /*#__PURE__*/React.createElement(\"img\", {\n className: \"mood-board-image\",\n src: image\n }));\n }\n function MoodBoard() {\n return /*#__PURE__*/React.createElement(\"div\", null, /*#__PURE__*/React.createElement(\"h1\", {\n className: \"mood-board-heading\"\n }, \"Destination Mood BOard\"));\n }\n});</script>\n <link rel=\"stylesheet\" data-href=\"styles.css\">\n <style class=\"fcc-injected-styles\">body {\n background-color: #ffffcc;\n}\n\n.mood-board-heading {\n text-align: center;\n font-size: 2.5em;\n color: #333;\n margin-top: 20px;\n}\n\n.mood-board {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 20px;\n padding: 20px;\n max-width: 900px;\n margin: 0 auto;\n}\n\n.mood-board-item {\n border-radius: 10px;\n padding: 10px;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n color: #fff;\n box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);\n text-align: center;\n height: 250px;\n}\n\n.mood-board-image {\n border-radius: 5px;\n width: 180px;\n height: 150px;\n object-fit: cover;\n}\n\n.mood-board-text {\n margin-top: 20px;\n font-size: 1.2em;\n}</style></head>\n\n <body>\n <div id=\"root\"></div>\n <script data-plugins=\"transform-modules-umd\" data-presets=\"react\" data-type=\"text/babel\">(function (global, factory) {\n if (typeof define === \"function\" && define.amd) {\n define([\"./index.jsx\"], factory);\n } else if (typeof exports !== \"undefined\") {\n factory(require(\"./index.jsx\"));\n } else {\n var mod = {\n exports: {}\n };\n factory(global.index);\n global.unknown = mod.exports;\n }\n})(typeof globalThis !== \"undefined\" ? globalThis : typeof self !== \"undefined\" ? self : this, function (_index) {\n \"use strict\";\n\n ReactDOM.createRoot(document.getElementById('root')).render( /*#__PURE__*/React.createElement(_index.MoodBoard, null));\n});</script>\n \n</body>", "description": "<section id=\"description\">\n<p>A mood board is a collage of images and text that conveys a general idea, goal, or feeling about a particular topic.</p>\n<p>In this lab, you will create a mood board using reusable React components. The CSS has already been provided for you.</p>\n<p><strong>Objective:</strong> Fulfill the user stories below and get all the tests to pass to complete the lab.</p>\n<p><strong>User Stories:</strong></p>\n<ol>\n<li>You should create and export a <code>MoodBoardItem</code> component that accepts three props: <code>color</code>, <code>image</code>, and <code>description</code>.</li>\n<li>Your <code>MoodBoardItem</code> component should return a <code>div</code> with the class <code>mood-board-item</code> as its top-level element.</li>\n<li>You should set the background color of the <code>.mood-board-item</code> element to the value of the <code>color</code> prop using inline styles.</li>\n<li>You should render an <code>img</code> element, with a class of <code>mood-board-image</code> and its <code>src</code> attribute set to the value of the <code>image</code> prop, within the <code>.mood-board-item</code> element.</li>\n<li>You should render an <code>h3</code> element, with a class of <code>mood-board-text</code> and its text the value of the <code>description</code> prop, within the <code>.mood-board-item</code> element.</li>\n<li>You should create and export a <code>MoodBoard</code>.</li>\n<li>Your <code>MoodBoard</code> component should return a <code>div</code> as its top-level element.</li>\n<li>Your <code>MoodBoard</code> component should render an <code>h1</code> element with a class of <code>mood-board-heading</code> and the text <code>Destination Mood Board</code>.</li>\n<li>Your <code>MoodBoard</code> component should render a <code>div</code> with a class of <code>mood-board</code>.</li>\n<li>Your <code>MoodBoard</code> component should render at least three <code>MoodBoardItem</code> components within the <code>.mood-board</code> element, each should pass <code>color</code>, <code>image</code>, and <code>description</code> props with valid values.</li>\n</ol>\n<p>You can use the following images in your Mood Board if you would like:</p>\n<ul>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/pathway.jpg</code></li>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/shore.jpg</code></li>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/grass.jpg</code></li>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/ship.jpg</code></li>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/santorini.jpg</code></li>\n<li><code>https://cdn.freecodecamp.org/curriculum/labs/pigeon.jpg</code></li>\n</ul>\n</section>", "hints": [ { "text": "<p>You should export a <code>MoodBoardItem</code> component.</p>" }, { "text": "<p>Your <code>MoodBoardItem</code> component should return a <code>div</code> with a class of <code>mood-board-item</code> at its top-level element.</p>", "failed": true }, { "text": "<p>The background color of the <code>.mood-board-item</code> element should be set to the value of <code>color</code> prop using inline styles.</p>", "failed": true }, { "text": "<p>Your <code>MoodBoardItem</code> component should render an <code>img</code> element with a class of <code>mood-board-image</code> and its <code>src</code> set to the value of the <code>image</code> prop.</p>" }, { "text": "<p>Your <code>MoodBoardItem</code> component should render an <code>h3</code> element with a class of <code>mood-board-text</code> and its text set to the value of the <code>description</code> prop.</p>", "failed": true }, { "text": "<p>You should export a <code>MoodBoard</code> component.</p>" }, { "text": "<p>Your <code>MoodBoard</code> component should return a <code>div</code> as its top-level element.</p>" }, { "text": "<p>Your <code>MoodBoard</code> component should render an <code>h1</code> element with a class of <code>mood-board-heading</code> and the text <code>Destination Mood Board</code>.</p>", "failed": true }, { "text": "<p>Your <code>MoodBoard</code> component should render at least three <code>MoodBoardItem</code> components, each should pass <code>color</code>, <code>image</code>, and <code>description</code> props with valid values.</p>", "failed": true }, { "text": "<p>Your <code>MoodBoard</code> component should be rendered to the page's <code>#root</code> element.</p>", "failed": true } ] }Relevant code:
freeCodeCamp/api/src/schemas/socrates/ask-socrates.ts
Line 16 in 04d44aa
freeCodeCamp/api/src/routes/protected/socrates.ts
Lines 24 to 40 in 04d44aa