Skip to content

Most of Homework 2 #55

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
chase-turner wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Most of Homework 2 #55

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
bf87e56
Made components and imported into App
chase-turner Mar 12, 2018
f3de453
Changed App and Index to send function as props
chase-turner Mar 17, 2018
4d10af7
Passing changeCategory and currentCategory to App and TopNav via prop…
chase-turner Mar 19, 2018
e735585
Added filter function
chase-turner Mar 23, 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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,4 +20,4 @@ Fork, Clone, yarn install, yarn start
* Modify TopNav
* Remove existing href and replace with "#"
* Register onClick for the links, make sure to use arrow function. Make sure to preventDefault.
* In the arrow function call props.changeCategory("tires"). Send in the category that is appropriate for the link
* In the arrow function call props.changeCategory("tires"). Send in the category that is appropriate for the link
156 changes: 43 additions & 113 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,83 +1,61 @@
import React from "react";
import "./App.css";
import Header from "./components/Header";
import Footer from "./components/Footer";
import ImageSlider from "./components/ImageSlider";
import ProductDetail from "./components/ProductDetail";
import TopNav from "./components/TopNav";
import SubHeader from "./components/SubHeader";

function App(props) {
function App(props) {

// let categoryFilter = function catFil(currentCategory) {
// return props.product.filter(props.product.category === props.currentCategory);
// }

// const categoryFilter = props.product.filter(props.product.category === 'tires');

const categoryFilter = props.product.filter((product) => {
return product.category === props.currentCategory
});

// const productMap = categoryFilter.map(categoryFilter([, [, ]]) => {
// return <ProductDetail product={props.product} />
// }[, thisArg]);

// const productMap = categoryFilter.map(() => {
// return <ProductDetail product={props.products}/>
// });

console.log(props.currentCategory);
console.log(categoryFilter);
//console.log(productMap);
return (
<div className="App">
<div className="wrap">

<div className="header">

<div className="top-header">
<div className="top-header-left">
<ul>
<li className="active"><a href="#">Home</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Delivery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div className="top-header-right">
<ul>
<li><a href="#">CURRENCY:</a></li>
<li>
<select>
<option>Dollar</option>
<option>Euro</option>
<option>Pound</option>
</select>
</li>
</ul>
</div>
<div className="clear"> </div>
</div>
<Header />
<div className="clear"> </div>
<div className="sub-header">
<div className="logo">
<a href="index.html"><img src="images/logo.png" title="logo" /></a>
</div>
<div className="sub-header-right">
<ul>
<li><a href="#">log in</a></li>
<li><a href="#">Your account</a></li>
<li><a href="#">CART: (EMPTY) <img src="images/cart.png" title="cart" /></a></li>
</ul>
<input type="text" /><input type="submit" value="search" />
</div>
<div className="clear"> </div>
</div>
<SubHeader />
<div className="clear"> </div>
<div className="top-nav">
<ul>
<li><a href="carlights.html">car lights</a></li>
<li><a href="carwheels.html">Car wheels</a></li>
<li><a href="carbumpers.html">car bumpers</a></li>
<li><a href="caradsystem.html">car audiosystem</a></li>
<li><a href="truckbumpers.html">Truck bumpers</a></li>
<li><a href="contact.html">Feedback</a></li>
<div className="clear"> </div>
</ul>
</div>


<TopNav changeCategory={props.changeCategory}/>

</div>


<div className="image-slider">

<ul className="rslides" id="slider1">
<li><img src="images/slider1.jpg" alt="" /></li>
<li><img src="images/slider3.jpg" alt="" /></li>
<li><img src="images/slider1.jpg" alt="" /></li>
</ul>

</div>
<ImageSlider />

<div className="content">
<div className="products-box">
<div className="products">
<h5><span>FEATURED</span> PRODUCTS</h5>
<div className="section group">
<div className="grid_1_of_5 images_1_of_5">
{/* <ProductDetail product={props.product}/> */}
{/* <div className="grid_1_of_5 images_1_of_5">
<img src="images/g3.png" />
<h3>Lorem Ipsum is simply </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
Expand Down Expand Up @@ -111,20 +89,15 @@ function App(props) {
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
<h4>$120.00</h4>
<div className="button"><span><a href="singlepage.html">Read More</a></span></div>
</div>
</div> */}
</div>
</div>
<div className="products products-secondbox">
<h5><span>Our</span> Specials</h5>
<div className="section group">
<div className="grid_1_of_5 images_1_of_5">
<img src="images/g1.jpg" />
<h3>Lorem Ipsum is simply </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
<h4><span>$600.00</span>$512.00</h4>
<div className="button"><span><a href="singlepage.html">Read More</a></span></div>
</div>
<div className="grid_1_of_5 images_1_of_5">


{/* <div className="grid_1_of_5 images_1_of_5">
<img src="images/g6.jpg" />
<h3>Lorem Ipsum is simply </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
Expand All @@ -151,56 +124,13 @@ function App(props) {
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
<h4><span>$700.00</span>$602.00</h4>
<div className="button"><span><a href="singlepage.html">Read More</a></span></div>
</div>
</div> */}
</div>
</div>
</div>
</div>
<div className="clear"> </div>
<div className="footer">
<div className="section group">
<div className="col_1_of_4 span_1_of_4">
<h3>INFORMATION</h3>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Terms and conditions</a></li>
<li><a href="#">Legal Notice</a></li>
</ul>
</div>
<div className="col_1_of_4 span_1_of_4">
<h3>OUR OFFERS</h3>
<ul>
<li><a href="#">New products</a></li>
<li><a href="#">top sellers</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Comments</a></li>
</ul>
</div>
<div className="col_1_of_4 span_1_of_4">
<h3>YOUR ACCOUNT</h3>
<ul>
<li><a href="#">Your Account</a></li>
<li><a href="#">Personal info</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">Address</a></li>
<li><a href="#">Locations</a></li>
</ul>
</div>
<div className="col_1_of_4 span_1_of_4 footer-lastgrid">
<h3>Get in touch</h3>
<ul>
<li><a href="#"><img src="images/facebook.png" title="facebook" /></a></li>
<li><a href="#"><img src="images/twitter.png" title="Twiiter" /></a></li>
<li><a href="#"><img src="images/rss.png" title="Rss" /></a></li>
<li><a href="#"><img src="images/gpluse.png" title="Google+" /></a></li>
</ul>
<p>Design by <a href="#">W3layouts</a></p>
</div>
</div>
</div>
<Footer />
</div>

</div>
Expand Down
52 changes: 52 additions & 0 deletions src/components/Footer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from "react";

function Footer(){
return (
<div className="footer">
<div className="section group">
<div className="col_1_of_4 span_1_of_4">
<h3>INFORMATION</h3>
<ul>
<li><a href="#">About us</a></li>
<li><a href="#">Sitemap</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Terms and conditions</a></li>
<li><a href="#">Legal Notice</a></li>
</ul>
</div>
<div className="col_1_of_4 span_1_of_4">
<h3>OUR OFFERS</h3>
<ul>
<li><a href="#">New products</a></li>
<li><a href="#">top sellers</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Comments</a></li>
</ul>
</div>
<div className="col_1_of_4 span_1_of_4">
<h3>YOUR ACCOUNT</h3>
<ul>
<li><a href="#">Your Account</a></li>
<li><a href="#">Personal info</a></li>
<li><a href="#">Prices</a></li>
<li><a href="#">Address</a></li>
<li><a href="#">Locations</a></li>
</ul>
</div>
<div className="col_1_of_4 span_1_of_4 footer-lastgrid">
<h3>Get in touch</h3>
<ul>
<li><a href="#"><img src="images/facebook.png" title="facebook" /></a></li>
<li><a href="#"><img src="images/twitter.png" title="Twiiter" /></a></li>
<li><a href="#"><img src="images/rss.png" title="Rss" /></a></li>
<li><a href="#"><img src="images/gpluse.png" title="Google+" /></a></li>
</ul>
<p>Design by <a href="#">W3layouts</a></p>
</div>
</div>
</div>
);
}

export default Footer;
25 changes: 24 additions & 1 deletion src/components/Header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,30 @@
import React from "react";

function Header() {
return (<div />);
return (
<div className="top-header">
<div className="top-header-left">
<ul>
<li className="active"><a href="#">Home</a></li>
<li><a href="#">Specials</a></li>
<li><a href="#">Delivery</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div className="top-header-right">
<ul>
<li><a href="#">CURRENCY:</a></li>
<li>
<select>
<option>Dollar</option>
<option>Euro</option>
<option>Pound</option>
</select>
</li>
</ul>
</div>
<div className="clear"> </div>
</div>);
}

export default Header;
17 changes: 17 additions & 0 deletions src/components/ImageSlider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import React from "react";

function ImageSlider(){
return(
<div className="image-slider">

<ul className="rslides" id="slider1">
<li><img src="images/slider1.jpg" alt="" /></li>
<li><img src="images/slider3.jpg" alt="" /></li>
<li><img src="images/slider1.jpg" alt="" /></li>
</ul>

</div>
);
}

export default ImageSlider;
16 changes: 16 additions & 0 deletions src/components/ProductDetail.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import React from "react";

function ProductDetail(props){
console.log(props.product);
return (
<div className="grid_1_of_5 images_1_of_5">
<img src="images/g1.jpg" />
<h3>{props.product.name} </h3>
<p>{props.product.description}</p>
<h4><span>$600.00</span>$512.00</h4>
<div className="button"><span><a href="singlepage.html">Read More</a></span></div>
</div>
)
}

export default ProductDetail;
22 changes: 22 additions & 0 deletions src/components/SubHeader.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react";

function SubHeader(){
return(
<div className="sub-header">
<div className="logo">
<a href="index.html"><img src="images/logo.png" title="logo" /></a>
</div>
<div className="sub-header-right">
<ul>
<li><a href="#">log in</a></li>
<li><a href="#">Your account</a></li>
<li><a href="#">CART: (EMPTY) <img src="images/cart.png" title="cart" /></a></li>
</ul>
<input type="text" /><input type="submit" value="search" />
</div>
<div className="clear"> </div>
</div>
);
}

export default SubHeader;
22 changes: 22 additions & 0 deletions src/components/TopNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import React from "react";

function TopNav(props){
return(
<div className="top-nav">
<ul>
<li><a href="carlights.html">car lights</a></li>
<li><a href="carwheels.html">Car wheels</a></li>
<li><a href="carbumpers.html">car bumpers</a></li>
<li><a href="caradsystem.html">car audiosystem</a></li>
<li><a href="truckbumpers.html">Truck bumpers</a></li>
<li><a href="contact.html">Feedback</a></li>
<div className="clear"> </div>
</ul>
</div>
);

}

//const categoryFilter = props.products.filter(props.products.category);

export default TopNav;
Loading