Merge pull request #1 from movarnell/formattingCards

cards displaying, but not centered

src/App.css

@@ -1,38 +1,23 @@
-.App {
-  text-align: center;
+* {
+  margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.cardContainer {
   display: flex;
-  flex-direction: column;
   align-items: center;
   justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
+
+  ;
 }
 
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+.priceFormat {
+  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+  font-size: 2rem;
+  align-content: center;
+}

src/Components/ProductCards.js

@@ -1,26 +1,32 @@
-import Button from 'react-bootstrap/Button';
-import Card from 'react-bootstrap/Card';
+import Button from "react-bootstrap/Button";
+import Card from "react-bootstrap/Card";
 
 function ProductCards({ products }) {
-
-
-  return (
-    <div>
-      {products.map((products) => (
-        <Card style={{ width: '18rem' }} className='g-2' key={products.id}>
-          <Card.Img variant="top" src={products.image} />
-          <Card.Body>
-            <Card.Title>{products.prodname}</Card.Title>
-            <Card.Text>
-              {products.description}
-            </Card.Text>
-            <Button variant="primary">Buy Me</Button>
-          </Card.Body>
-        </Card>
-
-      ))}
-      </div>
-  );
+	return (
+		<>
+			{products.map((products) => (
+				<div className="col p-3" key={products.key}>
+					<Card
+						style={{ width: "18rem" }}
+						className="shadow"
+						key={products.key}
+					>
+						<Card.Img variant="top" src={products.image} />
+						<Card.Body>
+							<Card.Title>{products.prodname}</Card.Title>
+							<Card.Text>
+								{products.description}
+								<br />
+								<br />
+								<span className="priceFormat">${products.price}</span>
+							</Card.Text>
+							<Button variant="primary">Buy Me</Button>
+						</Card.Body>
+					</Card>
+				</div>
+			))}
+		</>
+	);
 }
 
 export default ProductCards;

src/Components/StoreFront.js

@@ -1,31 +1,28 @@
-import {useState, useEffect} from 'react';
-import { API } from '../API/Api';
-import ProductCards from './ProductCards'
-import '../../node_modules/bootstrap/dist/css/bootstrap.css'
-
-
-export default function StoreFront(){
-const [products, setProducts] = useState([]);
-
-
-
-useEffect(() => {
-    fetchProducts();
-}, []);
-
-
-
-const fetchProducts = async () => {const addProduct = await API.getProducts();
-    console.log(addProduct);
-    setProducts(addProduct);
-    console.log(addProduct);
-};
-
-console.log(products);
-return(
-    <div className='container'>
-        <ProductCards products={products} />
-    </div>
-)
-
-}
+import { useState, useEffect } from "react";
+import { API } from "../API/Api";
+import ProductCards from "./ProductCards";
+import "../../node_modules/bootstrap/dist/css/bootstrap.css";
+
+export default function StoreFront() {
+	const [products, setProducts] = useState([]);
+
+	useEffect(() => {
+		fetchProducts();
+	}, []);
+
+	const fetchProducts = async () => {
+		const addProduct = await API.getProducts();
+		console.log(addProduct);
+		setProducts(addProduct);
+		console.log(addProduct);
+	};
+
+	console.log(products);
+	return (
+		<div className="container-fluid cardContainer">
+			<div className="row">
+				<ProductCards products={products} />
+			</div>
+		</div>
+	);
+}