ContextQMD
Back to Freecodecamp

Step 1

curriculum/challenges/english/blocks/workshop-reusable-profile-card-component/674ef11f75254548672d998c.md

latest2.9 KB
Original Source

--description--

In this project, you will learn how to work with props by building a reusable profile card component.

Start by using the export keyword to create a Card functional component with name, title, and bio as the props. Don't forget to make sure they're all wrapped in curly braces. That way, you destructure them instead of accessing them from props.

Also, return a pair of parentheses with an empty string inside for now.

--hints--

You should create and export a Card functional component.

js
assert.isFunction(window.index.Card);

Your Card component should have a name, title, and bio props.

js
const functionRegex = __helpers.functionRegex("Card", null, { capture: true });
const match = code.match(functionRegex);
const functionDefinition = match[0];
assert.match(functionDefinition, /\{[^{]*name[^{]*\}/);
assert.match(functionDefinition, /\{[^{]*title[^{]*\}/);
assert.match(functionDefinition, /\{[^{]*bio[^{]*\}/);

Your Card component should return a pair of parentheses with an empty string inside.

js
const functionRegex = __helpers.functionRegex("Card", null, { capture: true });
const match = code.match(functionRegex);
const functionDefinition = match[0];
assert.match(functionDefinition, /\s*{\s*return\s*\(\s*(''|""|``)\s*\)\s*;?\s*}|\s*=>\s*\(\s*(''|""|``)\s*\)/);

--seed--

--seed-contents--

html
<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Reusable Card component</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 { App } from './index.jsx';
      ReactDOM.createRoot(document.getElementById('root')).render(
        <App />
      );
    </script>
  </body>
</html>
css
:root {
  --dark-grey: #1b1b32;
  --light-grey: #f5f6f7;
  --dark-orange: #f89808;
}

body {
  background-color: var(--dark-grey);
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
}

.card {
  border: 5px solid var(--dark-orange);
  border-radius: 10px;
  width: 100%;
  padding: 20px;
  margin: 10px 0;
  background-color: var(--light-grey);
}

.card-title {
  border-bottom: 4px solid var(--dark-orange);
  width: fit-content;
}

@media (min-width: 768px) {
  .card {
    width: 300px;
  }
}
jsx
--fcc-editable-region--

--fcc-editable-region--