assignment completed

src/App.js

@@ -1,93 +1,95 @@
-import React from 'react';
+import React from "react";
 
-import Products from './components/Products';
+import Products from "./components/Products";
 
 const products = [
   {
     id: 1,
-    title: 'Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops',
+    title: "Fjallraven - Foldsack No. 1 Backpack, Fits 15 Laptops",
     price: 109.95,
     description:
-      'Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday',
+      "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
     category: "men's clothing",
-    image: 'https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg',
+    image: "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
     rating: {
       rate: 3.9,
-      count: 120
-    }
+      count: 120,
+    },
   },
   {
     id: 2,
-    title: 'Mens Casual Premium Slim Fit T-Shirts ',
+    title: "Mens Casual Premium Slim Fit T-Shirts ",
     price: 22.3,
     description:
-      'Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.',
+      "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.",
     category: "men's clothing",
-    image: 'https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg',
+    image:
+      "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
     rating: {
       rate: 4.1,
-      count: 259
-    }
+      count: 259,
+    },
   },
   {
     id: 3,
-    title: 'Mens Cotton Jacket',
+    title: "Mens Cotton Jacket",
     price: 55.99,
     description:
-      'great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.',
+      "great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.",
     category: "men's clothing",
-    image: 'https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg',
+    image: "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg",
     rating: {
       rate: 4.7,
-      count: 500
-    }
+      count: 500,
+    },
   },
   {
     id: 4,
-    title: 'Mens Casual Slim Fit',
+    title: "Mens Casual Slim Fit",
     price: 15.99,
     description:
-      'The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.',
+      "The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.",
     category: "men's clothing",
-    image: 'https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg',
+    image: "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg",
     rating: {
       rate: 2.1,
-      count: 430
-    }
+      count: 430,
+    },
   },
   {
     id: 5,
-    title: "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet",
+    title:
+      "John Hardy Women's Legends Naga Gold & Silver Dragon Station Chain Bracelet",
     price: 695,
     description:
       "From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.",
-    category: 'jewelery',
-    image: 'https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg',
+    category: "jewelery",
+    image: "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg",
     rating: {
       rate: 4.6,
-      count: 400
-    }
+      count: 400,
+    },
   },
   {
     id: 6,
-    title: 'Solid Gold Petite Micropave ',
+    title: "Solid Gold Petite Micropave ",
     price: 168,
     description:
-      'Satisfaction Guaranteed. Return or exchange any order within 30 days.Designed and sold by Hafeez Center in the United States. Satisfaction Guaranteed. Return or exchange any order within 30 days.',
-    category: 'jewelery',
-    image: 'https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg',
+      "Satisfaction Guaranteed. Return or exchange any order within 30 days.Designed and sold by Hafeez Center in the United States. Satisfaction Guaranteed. Return or exchange any order within 30 days.",
+    category: "jewelery",
+    image: "https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg",
     rating: {
       rate: 3.9,
-      count: 70
-    }
-  }
+      count: 70,
+    },
+  },
 ];
 
 const App = () => {
   return (
     <div>
-      <h1 className="title">BD Store</h1>
-      <Products  />
+      <h1 className="heading-title">BD Store</h1>
+      <Products products={products} />
     </div>
   );
 };

src/components/Product.js

@@ -1,16 +1,15 @@
 /* eslint-disable react/prop-types */
-import React from 'react';
 
-const Product = () => {
+const Product = ({ product }) => {
   return (
-      <article className="product">
-      <img src="" alt="" />
+    <article className="product">
+      <img src={product.image} alt="" />
       <div className="product__details">
-        <h4 className="product__title">product title</h4>
-        <p>Price: $ product price</p>
-        <p>Rating: product rating rate/5</p>
-        <p className="product__desc">Description: product.description</p>
-        <button className="product__btn btn">Add to cart</button>
+        <h4 className="product__title">{product.title}</h4>
+        <p className="product__price">Price: {product.price}</p>
+        <p className="product__rating">Rating: {product.rating.rate}</p>
+        <p className="product__dec">{product.description}</p>
+        <button className="product__btn btn">Add to card</button>
       </div>
     </article>
   );

src/components/Products.js

@@ -1 +1,11 @@
 /* eslint-disable react/prop-types */
+import Product from "./Product";
+
+function Products({ products }) {
+  let productItem = products.map((product) => (
+    <Product key={product.id} product={product} />
+  ));
+  return <section className="products">{productItem}</section>;
+}
+
+export default Products;