From 9f6e43fdb38e0dcbbcd1fd311b5bf8eff9d31ff7 Mon Sep 17 00:00:00 2001 From: Mar10God1 Date: Wed, 18 Oct 2017 18:44:05 -0500 Subject: [PATCH] homework 2 --- src/App.js | 236 ++++++-------------------------- src/components/Footer.js | 52 +++++++ src/components/Header.js | 25 +++- src/components/ImageSlider.js | 17 +++ src/components/ProductDetail.js | 15 ++ src/components/SubHeader.js | 22 +++ src/components/TopNav.js | 19 +++ src/index.js | 9 +- 8 files changed, 195 insertions(+), 200 deletions(-) create mode 100644 src/components/Footer.js create mode 100644 src/components/ImageSlider.js create mode 100644 src/components/ProductDetail.js create mode 100644 src/components/SubHeader.js create mode 100644 src/components/TopNav.js diff --git a/src/App.js b/src/App.js index 4513d4b..df92fac 100644 --- a/src/App.js +++ b/src/App.js @@ -1,208 +1,50 @@ import React from "react"; import "./App.css"; +import Header from "./components/Header"; +import SubHeader from "./components/SubHeader"; +import TopNav from "./components/TopNav"; +import ImageSlider from "./components/ImageSlider"; +import ProductDetail from "./components/ProductDetail"; +import Footer from "./components/Footer"; + function App(props) { + let p = props.state.products; + let filteredDivs = props.state.products.filter(product => product.category === props.currentCategory); + let productDivs = filteredDivs.slice(0, 5).map((filteredDivs) => { + return ; + }); + return (
-
- -
- -
-
- -
-
-
    -
  • CURRENCY:
    • -
  • - -
    • -
-
-
-
-
-
-
- -
- -
-
-
- - -
- - -
- -
    -
    • -
    • -
    • -
- -
- -
-
-
-
FEATURED PRODUCTS
-
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$512.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$300.00

- +
+
+
+
+ +
+ +
+ +
+
+
+
FEATURED PRODUCTS
+
+ {productDivs}
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$120.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$500.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$120.00

- -
-
-
-
-
Our Specials
-
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$600.00$512.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$400.00$352.00

- +
+
+
Our Specials
+
+ {productDivs}
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$300.00$202.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$400.00$322.00

- -
-
- -

Lorem Ipsum is simply

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.

-

$700.00$602.00

- -
-
-
-
-
-
-
-
-
-

INFORMATION

- -
-
-

OUR OFFERS

- -
-
-

YOUR ACCOUNT

- -
-
-

Get in touch

-
    -
    • -
    • -
    • -
    • -
-

Design by W3layouts

-
-
-
-
- +
+
+
+
+
+
); } diff --git a/src/components/Footer.js b/src/components/Footer.js new file mode 100644 index 0000000..0f19f50 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,52 @@ +import React from "react"; + +function Footer() { + return ( +
+
+
+

INFORMATION

+ +
+
+

OUR OFFERS

+ +
+
+

YOUR ACCOUNT

+ +
+
+

Get in touch

+
    +
    • +
    • +
    • +
    • +
+

Design by W3layouts

+
+
+
+ ); +} + +export default Footer; diff --git a/src/components/Header.js b/src/components/Header.js index f882be0..fefcb95 100644 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,7 +1,30 @@ import React from "react"; function Header() { - return (
); + return ( +
+
+ +
+
+
    +
  • CURRENCY:
    • +
  • + +
    • +
+
+
+
); } export default Header; diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js new file mode 100644 index 0000000..a095e15 --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,17 @@ +import React from "react"; + +function ImageSlider() { + return ( +
+ +
    +
    • +
    • +
    • +
+ +
+ ); +} + +export default ImageSlider; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js new file mode 100644 index 0000000..090fd20 --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,15 @@ +import React from "react"; + +function ProductDetail(props) { + return ( +
+ +

{props.product.name}

+

{props.product.description}

+

{props.product.price}

+ +
+ ); +} + +export default ProductDetail; diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js new file mode 100644 index 0000000..286c726 --- /dev/null +++ b/src/components/SubHeader.js @@ -0,0 +1,22 @@ +import React from "react"; + +function SubHeader() { + return ( +
+
+ +
+ +
+
+ ); +} + +export default SubHeader; diff --git a/src/components/TopNav.js b/src/components/TopNav.js new file mode 100644 index 0000000..82d398c --- /dev/null +++ b/src/components/TopNav.js @@ -0,0 +1,19 @@ +import React from "react"; + +function TopNav(props) { + return ( + + ); +} + +export default TopNav; diff --git a/src/index.js b/src/index.js index 34d8803..bed6f82 100644 --- a/src/index.js +++ b/src/index.js @@ -3,12 +3,17 @@ import ReactDOM from "react-dom"; import App from "./App"; import "./index.css"; import state from "./state"; +let currentCategory = "tires"; +function changeCategory(category) { + currentCategory = category; + render(); +} function render() { ReactDOM.render( - , + , document.getElementById("root") ); } -render(); +render();