Skip to content

Conor Fleming - Finished homework1 #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
conorflemingATX wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Conor Fleming - Finished homework1 #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46e066c
used fix in linter, removed unused-vars and upped length limit in lin…
conorflemingATX Jan 23, 2018
f379089
got all the components in place
conorflemingATX Jan 23, 2018
956e0b4
finished
conorflemingATX Jan 23, 2018
0aaf3dd
mapped product details
conorflemingATX Jan 24, 2018
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
3 changes: 1 addition & 2 deletions .eslintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@
"linebreak-style": 2,
"lines-around-comment": 0,
"max-depth": 0,
"max-len": [2, 100, 4, {"ignoreUrls": true}],
"max-len": [2, 300, 4, {"ignoreUrls": true}],
"max-nested-callbacks": 0,
"max-params": 0,
"max-statements": 0,
Expand Down Expand Up @@ -177,7 +177,6 @@
"no-unneeded-ternary": 2,
"no-unreachable": 2,
"no-unused-expressions": 2,
"no-unused-vars": [2, {"vars": "all", "args": "after-used"}],
"no-use-before-define": 0,
"no-useless-call": 2,
"no-var": 2,
Expand Down
5 changes: 5 additions & 0 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,3 +22,8 @@
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}

.slide-image {
max-width: 900px;
max-height: 400px;
}
276 changes: 64 additions & 212 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,232 +1,84 @@
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
return (
<div className="App">

<nav className="navbar navbar-inverse navbar-fixed-top" role="navigation">
import React, { Component } from "react";
import logo from "./logo.svg";
import "./App.css";

import Header from "./newModules/Header";
import Carousel from "./newModules/Carousel";
import ProductDetail from "./newModules/ProductDetail";
import Footer from "./newModules/Footer";

function App(props) {

let p = props.prod;
let prodDetails = p.products.map((product) => {
return <ProductDetail prod={product} />;
});

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>


<Header prod={props.prod} />

<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>


<div className="container">
</nav>


<div className="container">

<div className="row">

<div className="col-md-3">
<p className="lead">Shop Name</p>
<div className="list-group">
<a href="#" className="list-group-item">Category 1</a>
<a href="#" className="list-group-item">Category 2</a>
<a href="#" className="list-group-item">Category 3</a>
</div>
<div className="col-md-3">
<p className="lead">The Shop</p>
<div className="list-group">
<a href="#" className="list-group-item">Category 1</a>
<a href="#" className="list-group-item">Category 2</a>
<a href="#" className="list-group-item">Category 3</a>
</div>
</div>

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

<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>

<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>

</div>
<Carousel prod={props.prod} />

<div className="row">

{prodDetails}

</div>

</div>

</div>

</div>

<div className="container">
</div>

<hr/>
<div className="container">


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

<Footer />

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

export default App;
10 changes: 5 additions & 5 deletions src/App.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

it('renders without crashing', () => {
const div = document.createElement('div');
it("renders without crashing", () => {
const div = document.createElement("div");
ReactDOM.render(<App />, div);
});
14 changes: 7 additions & 7 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import state from './state';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import "./index.css";
import state from "./state";

ReactDOM.render(
<App />,
document.getElementById('root')
<App prod={state} />,
document.getElementById("root")
);
39 changes: 39 additions & 0 deletions src/newModules/Carousel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
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 data-target="#carousel-example-generic" data-slide-to="1" />
<li data-target="#carousel-example-generic" data-slide-to="2" />
</ol>
<div className="carousel-inner">
<div className="item active">
<img className="slide-image" src={props.prod.products[0].imgUrl} alt="" />
</div>
<div className="item">
<img className="slide-image" src={props.prod.products[1].imgUrl} alt="" />
</div>
<div className="item">
<img className="slide-image" src={props.prod.products[2].imgUrl} alt="" />
</div>
</div>
<a className="left carousel-control" href="#carousel-example-generic" data-slide="prev">
<span className="glyphicon glyphicon-chevron-left" />
</a>
<a className="right carousel-control" href="#carousel-example-generic" data-slide="next">
<span className="glyphicon glyphicon-chevron-right" />
</a>
</div>
</div>

</div>

)
}

export default Carousel;
Loading