Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,13 @@ 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"
<!-- * 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
* 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
198 changes: 26 additions & 172 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,24 +1,27 @@
import React, { Component } from 'react';
import logo from './logo.svg';
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() {
function App(props) {

// MAPPING THROUGH THE PRODUCTS
const prodDetails = props.products.map((product, keys) => {
return <ProductDetail products={product} key={keys} />;
});

// WHAT YOURE GOING TO SHOW
return (
<div className="App">

<nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div className="container">

<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="#">Start Bootstrap</a>
</div>


<Header />

<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul className="nav navbar-nav">
<li>
Expand All @@ -32,18 +35,18 @@ function App() {
</li>
</ul>
</div>

</div>

</nav>


<div className="container">

<div className="row">

<div className="col-md-3">
<p className="lead">Shop Name</p>
<p className="lead">Collins Random Ass Shit</p>
<div className="list-group">
<a href="#" className="list-group-item">Category 1</a>
<a href="#" className="list-group-item">Category 2</a>
Expand All @@ -53,155 +56,12 @@ function App() {

<div className="col-md-9">

<div className="row carousel-holder">

<div className="col-md-12">
<div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="item active">
<img className="slide-image" src="http://placehold.it/800x300" alt=""/>
</div>
<div className="item">
<img className="slide-image" src="http://placehold.it/800x300" alt=""/>
</div>
<div className="item">
<img className="slide-image" src="http://placehold.it/800x300" alt=""/>
</div>
</div>
<a className="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span className="glyphicon glyphicon-chevron-left"></span>
</a>
<a className="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span className="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>

</div>
<Carousel />

<div className="row">

<div className="col-sm-4 col-lg-4 col-md-4">
<div className="thumbnail">
<img src="http://placehold.it/320x150" alt=""/>
<div className="caption">
<h4 className="pull-right">$24.99</h4>
<h4><a href="#">First Product</a>
</h4>
<p>See more snippets like this online store item at <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp - http://bootsnipp.com</a>.</p>
</div>
<div className="ratings">
<p className="pull-right">15 reviews</p>
<p>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
</p>
</div>
</div>
</div>

<div className="col-sm-4 col-lg-4 col-md-4">
<div className="thumbnail">
<img src="http://placehold.it/320x150" alt=""/>
<div className="caption">
<h4 className="pull-right">$64.99</h4>
<h4><a href="#">Second Product</a>
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div className="ratings">
<p className="pull-right">12 reviews</p>
<p>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>

<div className="col-sm-4 col-lg-4 col-md-4">
<div className="thumbnail">
<img src="http://placehold.it/320x150" alt=""/>
<div className="caption">
<h4 className="pull-right">$74.99</h4>
<h4><a href="#">Third Product</a>
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div className="ratings">
<p className="pull-right">31 reviews</p>
<p>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>

<div className="col-sm-4 col-lg-4 col-md-4">
<div className="thumbnail">
<img src="http://placehold.it/320x150" alt=""/>
<div className="caption">
<h4 className="pull-right">$84.99</h4>
<h4><a href="#">Fourth Product</a>
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div className="ratings">
<p className="pull-right">6 reviews</p>
<p>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star-empty"></span>
<span className="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>

<div className="col-sm-4 col-lg-4 col-md-4">
<div className="thumbnail">
<img src="http://placehold.it/320x150" alt=""/>
<div className="caption">
<h4 className="pull-right">$94.99</h4>
<h4><a href="#">Fifth Product</a>
</h4>
<p>This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div className="ratings">
<p className="pull-right">18 reviews</p>
<p>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star"></span>
<span className="glyphicon glyphicon-star-empty"></span>
</p>
</div>
</div>
</div>

<div className="col-sm-4 col-lg-4 col-md-4">
<h4><a href="#">Like this template?</a>
</h4>
<p>If you like this template, then check out <a target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">this tutorial</a> on how to build a working review system for your online store!</p>
<a className="btn btn-primary" target="_blank" href="http://maxoffsky.com/code-blog/laravel-shop-tutorial-1-building-a-review-system/">View Tutorial</a>
</div>

{prodDetails}

</div>

Expand All @@ -210,19 +70,13 @@ function App() {
</div>

</div>

<div className="container">

<hr/>


<footer>
<div className="row">
<div className="col-lg-12">
<p>Copyright &copy; Your Website 2014</p>
</div>
</div>
</footer>

<Footer />

</div>
</div>
Expand Down
38 changes: 38 additions & 0 deletions src/ComponentFolder/Carousel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';

function Carousel() {
return(
<div className="row carousel-holder">

<div className="col-md-12">
<div id="carousel-example-generic" className="carousel slide" data-ride="carousel">
<ol className="carousel-indicators">
<li data-target="#carousel-example-generic" data-slide-to="0" className="active"></li>
<li data-target="#carousel-example-generic" data-slide-to="1"></li>
<li data-target="#carousel-example-generic" data-slide-to="2"></li>
</ol>
<div className="carousel-inner">
<div className="item active">
<img className="slide-image" src="http://placehold.it/800x300" alt=""/>
</div>
<div className="item">
<img className="slide-image" src="http://placehold.it/800x300" alt=""/>
</div>
<div className="item">
<img className="slide-image" src="http://placehold.it/800x300" alt=""/>
</div>
</div>
<a className="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span className="glyphicon glyphicon-chevron-left"></span>
</a>
<a className="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span className="glyphicon glyphicon-chevron-right"></span>
</a>
</div>
</div>

</div>
);
}

export default Carousel;
14 changes: 14 additions & 0 deletions src/ComponentFolder/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import React from "react";

function Footer() {
return (<footer>
<div className="row">
<div className="col-lg-12">
<p>Copyright &copy; Your Website 2014</p>
</div>
</div>
</footer>
);
}

export default Footer;
17 changes: 17 additions & 0 deletions src/ComponentFolder/Header.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from "react";

function Header(){
return (
<div className="navbar-header">
<button type="button" className="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span className="sr-only">Toggle navigation</span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
<span className="icon-bar"></span>
</button>
<a className="navbar-brand" href="#">Fuck the User</a>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No cursing!

</div>
);
}

export default Header;
30 changes: 30 additions & 0 deletions src/ComponentFolder/ProductDetail.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import React from "react";

function ProductDetail(props){

return(
<div className="col-sm-4 col-lg-4 col-md-4">
<div className="thumbnail">
<img src={props.products.imgUrl} alt=""/>
<div className="caption">
<h4 className="pull-right">{props.products.price}</h4>
<h4><a href="#">{props.products.name}</a>
</h4>
<p>{props.products.description} <a target="_blank" href="http://www.bootsnipp.com">Bootsnipp-http://bootsnipp.com</a>
</p>
<div>

</div>

</div>
<div className="ratings">
<p className="pull-right">{props.products.reviews}</p>
<p>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Probably should challenge yourself to get the stars working.

</p>
</div>
</div>
</div>
)
};

export default ProductDetail;
12 changes: 8 additions & 4 deletions src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,11 @@ import App from './App';
import './index.css';
import state from './state';

ReactDOM.render(
<App />,
document.getElementById('root')
);
//
// function increaseCart(){
// console.log(state.numberOfItemsInCart +=1);
// reactDom.render(<App state={state} />, document.getElementById("root"));
// }

ReactDOM.render(<App products={state.products} />, document.getElementById('root'));
//this variabel "products" is equal to {state.products} and when using variable name "props"will preceed. i.e. props.product.
Loading