From b71fb277e471a8082b87fc13282e55c7fc1835a2 Mon Sep 17 00:00:00 2001 From: cfissell50 Date: Mon, 22 Jan 2018 20:31:08 -0600 Subject: [PATCH 01/11] yooo --- src/App.js | 27 ++++++++++----------------- src/Header.js | 17 +++++++++++++++++ 2 files changed, 27 insertions(+), 17 deletions(-) create mode 100644 src/Header.js diff --git a/src/App.js b/src/App.js index 4139cab..8c0994c 100644 --- a/src/App.js +++ b/src/App.js @@ -1,24 +1,17 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; +import Header from './Header'; function App() { return (
- + - +
@@ -210,12 +203,12 @@ function App() {
- +
- +
diff --git a/src/Header.js b/src/Header.js new file mode 100644 index 0000000..a559b40 --- /dev/null +++ b/src/Header.js @@ -0,0 +1,17 @@ +import React from "react"; + +function Header(props){ + return ( +
+ + Fuck the User +
+ ); +} + +export default Header; From dd5958c76583a7ca0b7ba79e70ac37f17e30b770 Mon Sep 17 00:00:00 2001 From: cfissell50 Date: Tue, 23 Jan 2018 17:06:15 -0600 Subject: [PATCH 02/11] save before start --- README.md | 4 ++-- src/Header.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 25e78a5..14be554 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,11 @@ Fork, clone, run yarn install, yarn start, pull request * ProductDetail - find a div with className="col-sm-4 col-lg-4 col-md-4" * Header - find a div with className="navbar-header" * Footer - find a footer element - * Carousel - find a div with className="row carousel-holder" + * Carousel - find a div with className="row carousel-holder" * The ProductDetail should repesent only one single product * The ProductDetail should take a prop called product with is an object, and use it to populate price, name, description reviews and stars. * Make sure each component is in its own file and imported into App.js * Use the provided data in state.js to dynamically populate information instead of the hard coded html that is there now. -* In index.js provide App with a prop called "products" sending in the product array +* In index.js provide App with a prop called "products" sending in the product array * App should use the product prop and map the array of products into an array of ProductDetail components * Make the star images represent the number rating from data diff --git a/src/Header.js b/src/Header.js index a559b40..e8bab75 100644 --- a/src/Header.js +++ b/src/Header.js @@ -1,6 +1,6 @@ import React from "react"; -function Header(props){ +function Header(){ return (
diff --git a/src/Footer.js b/src/Footer.js new file mode 100644 index 0000000..1d97461 --- /dev/null +++ b/src/Footer.js @@ -0,0 +1,14 @@ +import React from "react"; + +function Footer() { + return (
+
+
+

Copyright © Your Website 2014

+
+
+
+ ); +} + +export default Footer; From e7961d7e10e358b148e4d5264fcdf2c234f1bbc7 Mon Sep 17 00:00:00 2001 From: cfissell50 Date: Tue, 23 Jan 2018 18:32:20 -0600 Subject: [PATCH 04/11] moar folders --- src/App.js | 36 +++------------------------ src/ComponentFolder/Carousel.js | 38 +++++++++++++++++++++++++++++ src/{ => ComponentFolder}/Footer.js | 0 src/{ => ComponentFolder}/Header.js | 0 4 files changed, 42 insertions(+), 32 deletions(-) create mode 100644 src/ComponentFolder/Carousel.js rename src/{ => ComponentFolder}/Footer.js (100%) rename src/{ => ComponentFolder}/Header.js (100%) diff --git a/src/App.js b/src/App.js index 6b425eb..a7f0dea 100644 --- a/src/App.js +++ b/src/App.js @@ -1,8 +1,9 @@ import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; -import Header from './Header'; -import Footer from './Footer'; +import Header from './ComponentFolder/Header'; +import Footer from './ComponentFolder/Footer'; +import Carousel from './ComponentFolder/Carousel'; function App() { return ( @@ -47,36 +48,7 @@ function App() {
-
- -
- -
- -
+
diff --git a/src/ComponentFolder/Carousel.js b/src/ComponentFolder/Carousel.js new file mode 100644 index 0000000..d954335 --- /dev/null +++ b/src/ComponentFolder/Carousel.js @@ -0,0 +1,38 @@ +import React from 'react'; + +function Carousel() { + return( +
+ +
+ +
+ +
+ ); +} + +export default Carousel; diff --git a/src/Footer.js b/src/ComponentFolder/Footer.js similarity index 100% rename from src/Footer.js rename to src/ComponentFolder/Footer.js diff --git a/src/Header.js b/src/ComponentFolder/Header.js similarity index 100% rename from src/Header.js rename to src/ComponentFolder/Header.js From 6c7d98cc5ac34d008f89a7c8b131191d781bf5e4 Mon Sep 17 00:00:00 2001 From: cfissell50 Date: Tue, 23 Jan 2018 19:36:18 -0600 Subject: [PATCH 05/11] update --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 14be554..54485d5 100644 --- a/README.md +++ b/README.md @@ -5,9 +5,9 @@ Fork, clone, run yarn install, yarn start, pull request * Create a component folder to hold component files * Organize this web page into appropriate components * ProductDetail - find a div with className="col-sm-4 col-lg-4 col-md-4" - * Header - find a div with className="navbar-header" - * Footer - find a footer element - * Carousel - find a div with className="row carousel-holder" + + + * The ProductDetail should repesent only one single product * The ProductDetail should take a prop called product with is an object, and use it to populate price, name, description reviews and stars. * Make sure each component is in its own file and imported into App.js From 278e540c64391314d6445f0598d7c00df90fa3e0 Mon Sep 17 00:00:00 2001 From: cfissell50 Date: Wed, 24 Jan 2018 18:34:22 -0600 Subject: [PATCH 06/11] yooo --- src/App.js | 3 +++ src/ComponentFolder/ProductDetail.js | 31 ++++++++++++++++++++++++++++ 2 files changed, 34 insertions(+) create mode 100644 src/ComponentFolder/ProductDetail.js diff --git a/src/App.js b/src/App.js index a7f0dea..66761ae 100644 --- a/src/App.js +++ b/src/App.js @@ -4,6 +4,7 @@ import './App.css'; import Header from './ComponentFolder/Header'; import Footer from './ComponentFolder/Footer'; import Carousel from './ComponentFolder/Carousel'; +import ProductDetail from './ComponentFolder/ProductDetail'; function App() { return ( @@ -169,6 +170,8 @@ function App() { View Tutorial
+ +
diff --git a/src/ComponentFolder/ProductDetail.js b/src/ComponentFolder/ProductDetail.js new file mode 100644 index 0000000..acfdf45 --- /dev/null +++ b/src/ComponentFolder/ProductDetail.js @@ -0,0 +1,31 @@ +import React from "react"; +import "../state.js"; + +function ProductDetail(props){ + + return( +
+
+ +
+

$24.99

+

First Product +

+

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

+
+
+

15 reviews

+

+ + + + + +

+
+
+
+ ) +}; + +export default ProductDetail; From 619d587de8e7357fd9d91b82d14aca8d5cc56150 Mon Sep 17 00:00:00 2001 From: cfissell50 Date: Fri, 26 Jan 2018 19:42:55 -0600 Subject: [PATCH 07/11] yup --- src/App.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 66761ae..419f164 100644 --- a/src/App.js +++ b/src/App.js @@ -60,7 +60,7 @@ function App() {

$24.99

First Product

-

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

+

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

15 reviews

From 74e736301549a75714201401e67d22ceece56f2e Mon Sep 17 00:00:00 2001 From: cfissell50 Date: Mon, 29 Jan 2018 15:09:40 -0600 Subject: [PATCH 08/11] getting there --- src/App.js | 121 +-------------------------- src/ComponentFolder/ProductDetail.js | 44 ++++++---- 2 files changed, 31 insertions(+), 134 deletions(-) diff --git a/src/App.js b/src/App.js index 419f164..2e32e7a 100644 --- a/src/App.js +++ b/src/App.js @@ -6,7 +6,10 @@ import Footer from './ComponentFolder/Footer'; import Carousel from './ComponentFolder/Carousel'; import ProductDetail from './ComponentFolder/ProductDetail'; -function App() { +function App(props) { + + + return (
@@ -53,122 +56,6 @@ function App() {
-
-
- -
-

$24.99

-

First Product -

-

See ore 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 -
diff --git a/src/ComponentFolder/ProductDetail.js b/src/ComponentFolder/ProductDetail.js index acfdf45..20e2940 100644 --- a/src/ComponentFolder/ProductDetail.js +++ b/src/ComponentFolder/ProductDetail.js @@ -1,28 +1,38 @@ import React from "react"; -import "../state.js"; function ProductDetail(props){ + const starSystem = () => { + const argument = props.products.rating; + let arr = []; + for (let i = 0; i < argument; i++) { + arr.push(); + } + return arr; +}; + return(
- -
-

$24.99

-

First Product -

-

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

-
-
-

15 reviews

-

- - - - - -

+ +
+

{props.products.price}

+

{props.products.name} +

+

{props.products.description} Bootsnipp-http://bootsnipp.com +

+
+
+ +
+
+

{props.products.reviews}

+

+ {/**/} + {starSystem} +

+
) From 237abb9180805966ccbade0d16b75fc2d90fa182 Mon Sep 17 00:00:00 2001 From: cfissell50 Date: Mon, 29 Jan 2018 15:15:31 -0600 Subject: [PATCH 09/11] almost dun --- src/App.js | 8 +++++--- src/ComponentFolder/ProductDetail.js | 10 ---------- src/index.js | 12 ++++++++---- src/state.js | 6 +++--- 4 files changed, 16 insertions(+), 20 deletions(-) diff --git a/src/App.js b/src/App.js index 2e32e7a..eee0638 100644 --- a/src/App.js +++ b/src/App.js @@ -7,8 +7,10 @@ import Carousel from './ComponentFolder/Carousel'; import ProductDetail from './ComponentFolder/ProductDetail'; function App(props) { - - + const prodDetails = props.products.map((product, keys) => { + console.log(product); + return ; +}); return (
@@ -57,7 +59,7 @@ function App(props) {
- + {prodDetails}
diff --git a/src/ComponentFolder/ProductDetail.js b/src/ComponentFolder/ProductDetail.js index 20e2940..61a564e 100644 --- a/src/ComponentFolder/ProductDetail.js +++ b/src/ComponentFolder/ProductDetail.js @@ -2,15 +2,6 @@ import React from "react"; function ProductDetail(props){ - const starSystem = () => { - const argument = props.products.rating; - let arr = []; - for (let i = 0; i < argument; i++) { - arr.push(); - } - return arr; -}; - return(
@@ -29,7 +20,6 @@ function ProductDetail(props){

{props.products.reviews}

- {/**/} {starSystem}

diff --git a/src/index.js b/src/index.js index e58303d..2172f97 100644 --- a/src/index.js +++ b/src/index.js @@ -4,7 +4,11 @@ import App from './App'; import './index.css'; import state from './state'; -ReactDOM.render( - , - document.getElementById('root') -); +// +// function increaseCart(){ +// console.log(state.numberOfItemsInCart +=1); +// reactDom.render(, document.getElementById("root")); +// } + +ReactDOM.render(, document.getElementById('root')); +//this variabel "products" is equal to {state.products} and when using variable name "props"will preceed. i.e. props.product. diff --git a/src/state.js b/src/state.js index b54e269..02415bf 100644 --- a/src/state.js +++ b/src/state.js @@ -1,7 +1,7 @@ export default { products:[{ "id": 1, - "name": "Body Luxuries Sweet Lavender Hand Sanitizer", + "name": "Too many Words", "description": "Psychotropic drugs, not elsewhere classified", "reviews": 46, "rating": 2, @@ -41,7 +41,7 @@ export default { "price": "$70.10" }, { "id": 6, - "name": "Fresh Sugar Honey Tinted Lip Treatment SPF15", + "name": "Less Werds", "description": "this stuff is awesome", "reviews": 79, "rating": 3, @@ -80,4 +80,4 @@ export default { "imgUrl": "http://dummyimage.com/189x109.png/cc0000/ffffff", "price": "$74.37" }] -} \ No newline at end of file +} From a763f9763ad831e15b3a349d65a87c5e203ed445 Mon Sep 17 00:00:00 2001 From: cfissell50 Date: Mon, 29 Jan 2018 15:18:02 -0600 Subject: [PATCH 10/11] yooooo --- src/App.js | 1 - src/ComponentFolder/ProductDetail.js | 1 - 2 files changed, 2 deletions(-) diff --git a/src/App.js b/src/App.js index eee0638..192df03 100644 --- a/src/App.js +++ b/src/App.js @@ -8,7 +8,6 @@ import ProductDetail from './ComponentFolder/ProductDetail'; function App(props) { const prodDetails = props.products.map((product, keys) => { - console.log(product); return ; }); diff --git a/src/ComponentFolder/ProductDetail.js b/src/ComponentFolder/ProductDetail.js index 61a564e..16e7e65 100644 --- a/src/ComponentFolder/ProductDetail.js +++ b/src/ComponentFolder/ProductDetail.js @@ -20,7 +20,6 @@ function ProductDetail(props){

{props.products.reviews}

- {starSystem}

From 432bd064eb0d13b4ee98924f7db2289f50348df9 Mon Sep 17 00:00:00 2001 From: cfissell50 Date: Mon, 29 Jan 2018 15:46:54 -0600 Subject: [PATCH 11/11] dun --- src/App.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/App.js b/src/App.js index 192df03..470d105 100644 --- a/src/App.js +++ b/src/App.js @@ -7,10 +7,13 @@ import Carousel from './ComponentFolder/Carousel'; import ProductDetail from './ComponentFolder/ProductDetail'; function App(props) { + + // MAPPING THROUGH THE PRODUCTS const prodDetails = props.products.map((product, keys) => { return ; }); + // WHAT YOURE GOING TO SHOW return (
@@ -43,7 +46,7 @@ function App(props) {
-

Shop Name

+

Collins Random Ass Shit