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
Binary file added public/carouselimg/product1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/carouselimg/product2.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/carouselimg/product3.jpg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/css/shop-homepage.css
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,4 @@ body {

footer {
margin: 50px 0;
}
}
201 changes: 20 additions & 181 deletions src/App.js
Original file line number Diff line number Diff line change
@@ -1,43 +1,25 @@
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import Header from "./Header";
import Carousel from "./Carousel";
import Footer from "./Footer";
import ProductDetail from "./ProductDetail";

function App(props) {

let prodDetails = props.state.products.map((product)=> {
console.log("Product (map input):",product);
console.log("App props.state:",props.state);
return <ProductDetail increase={props.increase} state={props.state} numberOfItemsInCart={props.numberOfItemsInCart} prod={product} />;
});

function App() {
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>

<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul className="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
</ul>
</div>

</div>

</nav>
<Header numberOfItemsInCart = {props.state.numberOfItemsInCart} />




<div className="container">

<div className="row">
Expand All @@ -53,148 +35,11 @@ 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>
{prodDetails}

<div className="col-sm-4 col-lg-4 col-md-4">
<h4><a href="#">Like this template?</a>
Expand All @@ -210,19 +55,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/Carousel.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from "react";

function Carousel(props) {
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="./carouselimg/product1.png" alt=""/>
</div>
<div className="item">
<img className="slide-image" src="./carouselimg/product2.jpg" alt=""/>
</div>
<div className="item">
<img className="slide-image" src="./carouselimg/product3.jpg" 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;
15 changes: 15 additions & 0 deletions src/Footer.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import React from "react";

function Footer(props) {
return(
<footer>
<div className="row">
<div className="col-lg-12">
<p>Copyright &copy; E-commerce Template 2018</p>
</div>
</div>
</footer>
)
}

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

function Header(props) {
return (

<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="#">Generic E-commerce</a>
</div>

<div className="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul className="nav navbar-nav">
<li>
<a href="#">About</a>
</li>
<li>
<a href="#">Services</a>
</li>
<li>
<a href="#">Contact</a>
</li>
<li>
<a href="#">Items in Cart ({props.numberOfItemsInCart})</a>
</li>
</ul>
</div>

</div>

</nav>
)
}

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

function ProductDetail(props) {
Copy link
Contributor

Choose a reason for hiding this comment

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

This looks like you were experimenting with things trying to figure out how props works, which is good.
But you should probably go back and try to code it the way the readme describes.
You can't hard code 5 product details, that is not realistic to how real apps work.
Where is your use of the map function


let allStars = [];

function stars(num){
let fullStars = num;
let emptyStars = 5 - fullStars;
let allStars = [];
for (var i = 0; i < fullStars; i++) {
allStars.push(<span className="glyphicon glyphicon-star" key={i}></span>);
}
for (var i = 0; i < emptyStars; i++) {
allStars.push(<span className="glyphicon glyphicon-star-empty" key={i+fullStars}></span>);
}
return allStars;
}

return (
<div className="col-sm-4 col-lg-4 col-md-4">
<div className="thumbnail">
<img src={props.prod.imgUrl} alt=""/>
<div className="caption">
<h4 className="pull-right">{props.prod.price}</h4>
<h4><a href="#">{props.prod.name}</a>
</h4>
<p>{props.prod.description}</p>
</div>
<div className="ratings">
<p className="pull-right">{props.prod.reviews} reviews</p>
<p>{stars(props.prod.rating)}</p>
</div>
<button onClick={()=>{
props.increase();
}}>Add to Cart</button>
</div>
</div>
)
}

export default ProductDetail;
Loading