diff --git a/.eslintrc b/.eslintrc index ee54d86..5bec3f4 100644 --- a/.eslintrc +++ b/.eslintrc @@ -80,7 +80,7 @@ "linebreak-style": 2, "lines-around-comment": 0, "max-depth": 0, - "max-len": [2, 100, 4, {"ignoreUrls": true}], + "max-len": [2, 300, 4, {"ignoreUrls": true}], "max-nested-callbacks": 0, "max-params": 0, "max-statements": 0, @@ -177,7 +177,6 @@ "no-unneeded-ternary": 2, "no-unreachable": 2, "no-unused-expressions": 2, - "no-unused-vars": [2, {"vars": "all", "args": "after-used"}], "no-use-before-define": 0, "no-useless-call": 2, "no-var": 2, diff --git a/src/App.css b/src/App.css index 15adfdc..48d797b 100644 --- a/src/App.css +++ b/src/App.css @@ -22,3 +22,8 @@ from { transform: rotate(0deg); } to { transform: rotate(360deg); } } + +.slide-image { + max-width: 900px; + max-height: 400px; +} diff --git a/src/App.js b/src/App.js index 4139cab..537b8b0 100644 --- a/src/App.js +++ b/src/App.js @@ -1,232 +1,84 @@ -import React, { Component } from 'react'; -import logo from './logo.svg'; -import './App.css'; - -function App() { - return ( -
- - + + +
-
-

Shop Name

-
- Category 1 - Category 2 - Category 3 -
+
+

The Shop

+ +
+ +
-
- -
- -
- -
- -
- -
- -
-
- -
-

$24.99

-

First Product -

-

See more snippets like this online store item at Bootsnipp - http://bootsnipp.com.

-
-
-

15 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$64.99

-

Second Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

12 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$74.99

-

Third Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

31 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$84.99

-

Fourth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

6 reviews

-

- - - - - -

-
-
-
- -
-
- -
-

$94.99

-

Fifth Product -

-

This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

-
-
-

18 reviews

-

- - - - - -

-
-
-
- -
-

Like this template? -

-

If you like this template, then check out this tutorial on how to build a working review system for your online store!

- View Tutorial -
- -
+ + +
+ + {prodDetails}
+
+
-
- -
+
-
+
- -
-
-
-

Copyright © Your Website 2014

-
-
-
+
+ +
-
- ); +
+ ); } export default App; diff --git a/src/App.test.js b/src/App.test.js index b84af98..c9ac3ef 100644 --- a/src/App.test.js +++ b/src/App.test.js @@ -1,8 +1,8 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; -it('renders without crashing', () => { - const div = document.createElement('div'); +it("renders without crashing", () => { + const div = document.createElement("div"); ReactDOM.render(, div); }); diff --git a/src/index.js b/src/index.js index e58303d..e900d85 100644 --- a/src/index.js +++ b/src/index.js @@ -1,10 +1,10 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import App from './App'; -import './index.css'; -import state from './state'; +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; +import "./index.css"; +import state from "./state"; ReactDOM.render( - , - document.getElementById('root') + , + document.getElementById("root") ); diff --git a/src/newModules/Carousel.js b/src/newModules/Carousel.js new file mode 100644 index 0000000..291cd46 --- /dev/null +++ b/src/newModules/Carousel.js @@ -0,0 +1,39 @@ +import React from "react"; + +function Carousel(props) { + return ( +
+ +
+ +
+ +
+ + ) +} + +export default Carousel; diff --git a/src/newModules/Footer.js b/src/newModules/Footer.js new file mode 100644 index 0000000..fe2d867 --- /dev/null +++ b/src/newModules/Footer.js @@ -0,0 +1,16 @@ + +import React from "react"; + +function Footer(props) { + return ( +
+
+
+

Copyright © Your Website 2014

+
+
+
+ ) +} + +export default Footer; diff --git a/src/newModules/Header.js b/src/newModules/Header.js new file mode 100644 index 0000000..79b47c9 --- /dev/null +++ b/src/newModules/Header.js @@ -0,0 +1,17 @@ +import React from "react"; + +function Header(props) { + return ( +
+ + The Shop +
+ ) +} + +export default Header; diff --git a/src/newModules/ProductDetail.js b/src/newModules/ProductDetail.js new file mode 100644 index 0000000..afafdd5 --- /dev/null +++ b/src/newModules/ProductDetail.js @@ -0,0 +1,34 @@ +import React from "react"; + +function ProductDetail(props) { + + function stars(num) { + let arr = []; + for (let i = 1; i < num + 1; i++) { + arr.push(); + } + return arr; + } + + return ( +
+
+ + +
+

{props.prod.reviews} reviews

+

+ {stars(props.prod.rating)} +

+
+
+
+ ) +} + +export default ProductDetail; diff --git a/src/state.js b/src/state.js index b54e269..c6b3600 100644 --- a/src/state.js +++ b/src/state.js @@ -1,83 +1,83 @@ export default { - products:[{ - "id": 1, - "name": "Body Luxuries Sweet Lavender Hand Sanitizer", - "description": "Psychotropic drugs, not elsewhere classified", - "reviews": 46, - "rating": 2, - "imgUrl": "http://dummyimage.com/136x167.bmp/cc0000/ffffff", - "price": "$95.11" + products: [{ + id: 1, + name: "Body Luxuries Sweet Lavender Hand Sanitizer", + description: "Psychotropic drugs, not elsewhere classified", + reviews: 46, + rating: 2, + imgUrl: "http://dummyimage.com/136x167.bmp/cc0000/ffffff", + price: "$95.11" }, { - "id": 2, - "name": "Topiramate", - "description": "You will be so happy when you use this product", - "reviews": 2, - "rating": 2, - "imgUrl": "http://dummyimage.com/125x134.jpg/cc0000/ffffff", - "price": "$37.09" + id: 2, + name: "Topiramate", + description: "You will be so happy when you use this product", + reviews: 2, + rating: 2, + imgUrl: "http://dummyimage.com/125x134.jpg/cc0000/ffffff", + price: "$37.09" }, { - "id": 3, - "name": "Almond", - "description": "Other disorders of continuity of bone, unsp tibia and fibula", - "reviews": 27, - "rating": 5, - "imgUrl": "http://dummyimage.com/149x190.jpg/dddddd/000000", - "price": "$51.83" + id: 3, + name: "Almond", + description: "Other disorders of continuity of bone, unsp tibia and fibula", + reviews: 27, + rating: 5, + imgUrl: "http://dummyimage.com/149x190.jpg/dddddd/000000", + price: "$51.83" }, { - "id": 4, - "name": "VYTORIN", - "description": "Orchard as the place of occurrence of the external cause", - "reviews": 60, - "rating": 3, - "imgUrl": "http://dummyimage.com/162x153.jpg/cc0000/ffffff", - "price": "$86.93" + id: 4, + name: "VYTORIN", + description: "Orchard as the place of occurrence of the external cause", + reviews: 60, + rating: 3, + imgUrl: "http://dummyimage.com/162x153.jpg/cc0000/ffffff", + price: "$86.93" }, { - "id": 5, - "name": "Decolorized Iodine", - "description": "Injury of prostate", - "reviews": 20, - "rating": 1, - "imgUrl": "http://dummyimage.com/120x245.jpg/cc0000/ffffff", - "price": "$70.10" + id: 5, + name: "Decolorized Iodine", + description: "Injury of prostate", + reviews: 20, + rating: 1, + imgUrl: "http://dummyimage.com/120x245.jpg/cc0000/ffffff", + price: "$70.10" }, { - "id": 6, - "name": "Fresh Sugar Honey Tinted Lip Treatment SPF15", - "description": "this stuff is awesome", - "reviews": 79, - "rating": 3, - "imgUrl": "http://dummyimage.com/211x227.bmp/5fa2dd/ffffff", - "price": "$39.25" + id: 6, + name: "Fresh Sugar Honey Tinted Lip Treatment SPF15", + description: "this stuff is awesome", + reviews: 79, + rating: 3, + imgUrl: "http://dummyimage.com/211x227.bmp/5fa2dd/ffffff", + price: "$39.25" }, { - "id": 7, - "name": "LBel", - "description": "The best product ever", - "reviews": 76, - "rating": 3, - "imgUrl": "http://dummyimage.com/212x144.jpg/ff4444/ffffff", - "price": "$99.91" + id: 7, + name: "LBel", + description: "The best product ever", + reviews: 76, + rating: 3, + imgUrl: "http://dummyimage.com/212x144.jpg/ff4444/ffffff", + price: "$99.91" }, { - "id": 8, - "name": "Cholestyramine", - "description": "Product 3", - "reviews": 74, - "rating": 3, - "imgUrl": "http://dummyimage.com/204x175.jpg/5fa2dd/ffffff", - "price": "$67.17" + id: 8, + name: "Cholestyramine", + description: "Product 3", + reviews: 74, + rating: 3, + imgUrl: "http://dummyimage.com/204x175.jpg/5fa2dd/ffffff", + price: "$67.17" }, { - "id": 9, - "name": "Risperidone", - "description": " cephalospor/oth beta-lactm antibiot, undet, sequela", - "reviews": 9, - "rating": 1, - "imgUrl": "http://dummyimage.com/212x108.bmp/cc0000/ffffff", - "price": "$96.84" + id: 9, + name: "Risperidone", + description: " cephalospor/oth beta-lactm antibiot, undet, sequela", + reviews: 9, + rating: 1, + imgUrl: "http://dummyimage.com/212x108.bmp/cc0000/ffffff", + price: "$96.84" }, { - "id": 10, - "name": "MAC", - "description": "Other Gram-negative sepsis", - "reviews": 45, - "rating": 2, - "imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff", - "price": "$74.37" + id: 10, + name: "MAC", + description: "Other Gram-negative sepsis", + reviews: 45, + rating: 2, + imgUrl: "http://dummyimage.com/189x109.png/cc0000/ffffff", + price: "$74.37" }] -} \ No newline at end of file +};