feat: add reusable card component workshop (#629)

freeCodeCamp · Oct 7, 2024 · 4ba2d9b · 4ba2d9b
1 parent 7877719
commit 4ba2d9b
Show file tree

Hide file tree

Showing 2 changed files with 89 additions and 0 deletions.
diff --git a/frontend-cert/react-projects/resuable-profile-component/index.html b/frontend-cert/react-projects/resuable-profile-component/index.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Reusable Card component</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 Card({ name, title, bio }) {
+        return (
+          <div className="card">
+            <h2>{name}</h2>
+            <p className="card-title">{title}</p>
+            <p>{bio}</p>
+          </div>
+        );
+      }
+
+      function App() {
+        return (
+          <div className="flex-container">
+            <Card
+              name="Mark"
+              title="Frontend developer"
+              bio="I like to work with different frontend technologies and play video games."
+            />
+            <Card
+              name="Tiffany"
+              title="Engineering manager"
+              bio="I have worked in tech for 15 years and love to help people grow in this industry."
+            />
+            <Card
+              name="Doug"
+              title="Backend developer"
+              bio="I have been a software developer for over 20 years and I love working with Go and Rust."
+            />
+          </div>
+        );
+      }
+
+      const container = document.getElementById("root");
+      const root = ReactDOM.createRoot(container);
+      root.render(<App />);
+    </script>
+  </body>
+</html>
diff --git a/frontend-cert/react-projects/resuable-profile-component/styles.css b/frontend-cert/react-projects/resuable-profile-component/styles.css
@@ -0,0 +1,36 @@
+: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;
+  }
+}