From b370ee09422d2e37b4c015d72050333a037091da Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Mon, 21 Aug 2017 22:41:20 -0500 Subject: [PATCH 1/3] initial commit --- src/App.js | 90 ++++----------------------------- src/components/Footer.js | 52 +++++++++++++++++++ src/components/Header.js | 25 ++++++++- src/components/ImageSlider.js | 16 ++++++ src/components/ProductDetail.js | 15 ++++++ 5 files changed, 116 insertions(+), 82 deletions(-) create mode 100644 src/components/Footer.js create mode 100644 src/components/ImageSlider.js create mode 100644 src/components/ProductDetail.js diff --git a/src/App.js b/src/App.js index 4513d4b..c24bdca 100644 --- a/src/App.js +++ b/src/App.js @@ -5,30 +5,9 @@ function App(props) { return (
- +
- -
-
- -
-
-
    -
  • CURRENCY:
    • -
  • - -
    • -
-
+
@@ -58,20 +37,12 @@ function App(props) {
- +
- - -
- -
    -
    • -
    • -
    • -
- -
- + + + +
@@ -157,52 +128,9 @@ function App(props) {
-
-
-
-

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..d55d76a 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..be1441d --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,16 @@ +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..faa1fed --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,15 @@ +import React from "react"; + +function ProductDetail() { + return ( +
+ +

Lorem Ipsum is simply

+

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

+

$512.00

+
Read More
+
+ ); +} + +export default ProductDetail; From 26904f5bdf73661df22504e565c88996de67ec77 Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Mon, 21 Aug 2017 22:56:46 -0500 Subject: [PATCH 2/3] initial commit 2 --- README.md | 0 package.json | 0 public/favicon.ico | Bin src/App.css | 0 src/App.js | 90 ++++++++++++++++++++++++++++---- src/App.test.js | 0 src/components/Footer.js | 52 ------------------ src/components/Header.js | 25 +-------- src/components/ImageSlider.js | 16 ------ src/components/ProductDetail.js | 15 ------ src/index.css | 0 src/index.js | 0 src/logo.svg | 0 src/state.js | 0 yarn.lock | 0 15 files changed, 82 insertions(+), 116 deletions(-) mode change 100644 => 100755 README.md mode change 100644 => 100755 package.json mode change 100644 => 100755 public/favicon.ico mode change 100644 => 100755 src/App.css mode change 100644 => 100755 src/App.js mode change 100644 => 100755 src/App.test.js delete mode 100644 src/components/Footer.js mode change 100644 => 100755 src/components/Header.js delete mode 100644 src/components/ImageSlider.js delete mode 100644 src/components/ProductDetail.js mode change 100644 => 100755 src/index.css mode change 100644 => 100755 src/index.js mode change 100644 => 100755 src/logo.svg mode change 100644 => 100755 src/state.js mode change 100644 => 100755 yarn.lock diff --git a/README.md b/README.md old mode 100644 new mode 100755 diff --git a/package.json b/package.json old mode 100644 new mode 100755 diff --git a/public/favicon.ico b/public/favicon.ico old mode 100644 new mode 100755 diff --git a/src/App.css b/src/App.css old mode 100644 new mode 100755 diff --git a/src/App.js b/src/App.js old mode 100644 new mode 100755 index c24bdca..4513d4b --- a/src/App.js +++ b/src/App.js @@ -5,9 +5,30 @@ function App(props) { return (
- +
- + +
+
+ +
+
+
    +
  • CURRENCY:
    • +
  • + +
    • +
+
@@ -37,12 +58,20 @@ function App(props) {
- +
- - - - + + +
+ +
    +
    • +
    • +
    • +
+ +
+
@@ -128,9 +157,52 @@ function App(props) {
- +
+
+
+

INFORMATION

+ +
+
+

OUR OFFERS

+ +
+
+

YOUR ACCOUNT

+ +
+
+

Get in touch

+
    +
    • +
    • +
    • +
    • +
+

Design by W3layouts

+
+
+
- +
); } diff --git a/src/App.test.js b/src/App.test.js old mode 100644 new mode 100755 diff --git a/src/components/Footer.js b/src/components/Footer.js deleted file mode 100644 index 0f19f50..0000000 --- a/src/components/Footer.js +++ /dev/null @@ -1,52 +0,0 @@ -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 old mode 100644 new mode 100755 index d55d76a..f882be0 --- a/src/components/Header.js +++ b/src/components/Header.js @@ -1,30 +1,7 @@ import React from "react"; function Header() { - return ( -
-
- -
-
-
    -
  • CURRENCY:
    • -
  • - -
    • -
-
-
-
); + return (
); } export default Header; diff --git a/src/components/ImageSlider.js b/src/components/ImageSlider.js deleted file mode 100644 index be1441d..0000000 --- a/src/components/ImageSlider.js +++ /dev/null @@ -1,16 +0,0 @@ -import React from "react"; - -function ImageSlider() { - return ( -
- -
    -
    • -
    • -
    • -
- -
); -} - -export default ImageSlider; diff --git a/src/components/ProductDetail.js b/src/components/ProductDetail.js deleted file mode 100644 index faa1fed..0000000 --- a/src/components/ProductDetail.js +++ /dev/null @@ -1,15 +0,0 @@ -import React from "react"; - -function ProductDetail() { - return ( -
- -

Lorem Ipsum is simply

-

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

-

$512.00

- -
- ); -} - -export default ProductDetail; diff --git a/src/index.css b/src/index.css old mode 100644 new mode 100755 diff --git a/src/index.js b/src/index.js old mode 100644 new mode 100755 diff --git a/src/logo.svg b/src/logo.svg old mode 100644 new mode 100755 diff --git a/src/state.js b/src/state.js old mode 100644 new mode 100755 diff --git a/yarn.lock b/yarn.lock old mode 100644 new mode 100755 From c4939ed6fb75b690340c82cc8b631b467b09fdec Mon Sep 17 00:00:00 2001 From: Ericka Emery Date: Tue, 22 Aug 2017 00:07:24 -0500 Subject: [PATCH 3/3] components created --- README.md | 18 ++-- src/App.js | 164 ++++---------------------------- src/components/Footer.js | 51 ++++++++++ src/components/Header.js | 25 ++++- src/components/ImageSlider.js | 15 +++ src/components/ProductDetail.js | 22 +++++ src/components/SubHeader.js | 22 +++++ src/components/TopNav.js | 19 ++++ 8 files changed, 183 insertions(+), 153 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/README.md b/README.md index a6ae27c..a9c1d0e 100755 --- a/README.md +++ b/README.md @@ -1,17 +1,17 @@ ### Setup -Fork, Clone, yarn install, yarn start +DONE --- Fork, Clone, yarn install, yarn start ### Do * Take the html out of the App component and put in separate components - * Header - look for div with a className of "top-header" - * Footer - look for div with a className of "footer" - * ImageSlider - look for div with className of "image-slider" - * ProductDetail - look for div with className of "grid_1_of_5" + * DONE --- Header - look for div with a className of "top-header" + * DONE --- Footer - look for div with a className of "footer" + * DONE --- ImageSlider - look for div with className of "image-slider" + * DONE --- ProductDetail - look for div with className of "grid_1_of_5" * Use PropTypes to require a prop "product" - * Use product prop to populate the UI instead of hard coded - * SubHeader - look for div with className of "sub-header" - * TopNav - look for div with className of "top-nav" -* Make sure to import and use all these components back in App + * Use product prop to populate the UI instead of hard coded + * DONE --- SubHeader - look for div with className of "sub-header" + * DONE --- TopNav - look for div with className of "top-nav" +* DONE --- Make sure to import and use all these components back in App * Create a variable in index.js called currentCategory and set it to "tires" * Create a function in index.js called changeCategory thats takes a parameter category. It will assign category to currentCategory and call render() * Send the changeCategory function to App and then to the TopNav component by way of props diff --git a/src/App.js b/src/App.js index 4513d4b..e09bef3 100755 --- a/src/App.js +++ b/src/App.js @@ -1,117 +1,38 @@ import React from "react"; +import Header from "./components/Header"; +import Footer from "./components/Footer"; +import ImageSlider from "./components/ImageSlider"; +import ProductDetail from "./components/ProductDetail"; +import SubHeader from "./components/SubHeader"; +import TopNav from "./components/TopNav"; import "./App.css"; + function App(props) { 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

- -
-
- -

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

- -
+
@@ -157,52 +78,9 @@ function App(props) {
-
-
-
-

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..a139402 --- /dev/null +++ b/src/components/Footer.js @@ -0,0 +1,51 @@ +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..d55d76a 100755 --- 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..a6674f8 --- /dev/null +++ b/src/components/ImageSlider.js @@ -0,0 +1,15 @@ +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..1174ef1 --- /dev/null +++ b/src/components/ProductDetail.js @@ -0,0 +1,22 @@ +import React from "react"; +import PropTypes from "prop-types"; + +function ProductDetail(props) { + console.log(props); + // Always define before using props. Could be in context of map fnc or not + return ( +
+ +

Lorem Ipsum is simply

+

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

+

$512.00

+ +
+ ); +} + +ProductDetail.propTypes = { + product: PropTypes.object.isRequired +}; + +export default ProductDetail; diff --git a/src/components/SubHeader.js b/src/components/SubHeader.js new file mode 100644 index 0000000..5d36bf0 --- /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..a8d01bf --- /dev/null +++ b/src/components/TopNav.js @@ -0,0 +1,19 @@ +import React from "react"; + +function TopNav() { + return ( + + ); +} + +export default TopNav;