Skip to content

Matt Huntsberry - first commit --> Advanced HW 2 - Finished #36

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
mmhuntsberry wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Matt Huntsberry - first commit --> Advanced HW 2 - Finished #36

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
460 changes: 231 additions & 229 deletions .eslintrc
View file
Open in desktop

Large diffs are not rendered by default.

34 changes: 17 additions & 17 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,21 +3,21 @@ Fork, Clone, yarn install, yarn start

### Do
* Take the html out of the App component and put in separate components
* Header - look for div with a className of "top-header"
* Footer - look for div with a className of "footer"
* ImageSlider - look for div with className of "image-slider"
* ProductDetail - look for div with className of "grid_1_of_5"
* Use PropTypes to require a prop "product"
* Header - look for div with a className of "top-header" -DONE
* Footer - look for div with a className of "footer" - DONE
* ImageSlider - look for div with className of "image-slider" - DONE
* ProductDetail - look for div with className of "grid_1_of_5" - DONE
* Use PropTypes to require a prop "product" - DONE
* Use product prop to populate the UI instead of hard coded
* SubHeader - look for div with className of "sub-header"
* TopNav - look for div with className of "top-nav"
* Make sure to import and use all these components back in App
* Create a variable in index.js called currentCategory and set it to "tires"
* Create a function in index.js called changeCategory thats takes a parameter category. It will assign category to currentCategory and call render()
* Send the changeCategory function to App and then to the TopNav component by way of props
* Send the currentCategory to App by way of props
* App should use the currentCategory value to filter the array of products by category and then map over them to create ProductDetail components
* 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
* SubHeader - look for div with className of "sub-header" - DONE
* TopNav - look for div with className of "top-nav" -DONE
* Make sure to import and use all these components back in App - DONE
* Create a variable in index.js called currentCategory and set it to "tires" - DONE
* Create a function in index.js called changeCategory thats takes a parameter category. It will assign category to currentCategory and call render() -DONE
* Send the changeCategory function to App and then to the TopNav component by way of props - DONE
* Send the currentCategory to App by way of props - DONE
* App should use the currentCategory value to filter the array of products by category and then map over them to create ProductDetail components - DONE
* Modify TopNav - DONE
* Remove existing href and replace with "#" - DONE
* Register onClick for the links, make sure to use arrow function. Make sure to preventDefault. - DONE
* In the arrow function call props.changeCategory("tires"). Send in the category that is appropriate for the link - DONE
338 changes: 134 additions & 204 deletions src/App.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,210 +1,140 @@
import React from "react";
import "./App.css";
import React from 'react';
import PropTypes from 'prop-types';
import Footer from './components/Footer';
import Header from './components/Header';
import ImageSlider from './components/ImageSlider';
import SubHeader from './components/SubHeader';
import ProductDetail from './components/ProductDetail';
import TopNav from './components/TopNav';
import './App.css';

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

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

<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">
<img src="images/g3.png" />
<h3>Lorem Ipsum is simply </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
<h4>$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">
<img src="images/g1.jpg" />
<h3>Lorem Ipsum is simply </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
<h4>$300.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">
<img src="images/g2.jpg" />
<h3>Lorem Ipsum is simply </h3>
<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 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>
<h4>$500.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">
<img src="images/g4.jpg" />
<h3>Lorem Ipsum is simply</h3>
<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 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">
<img src="images/g6.jpg" />
<h3>Lorem Ipsum is simply </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
<h4><span>$400.00</span>$352.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">
<img src="images/g7.png" />
<h3>Lorem Ipsum is simply </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
<h4><span>$300.00</span>$202.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">
<img src="images/g8.png" />
<h3>Lorem Ipsum is simply </h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, in reprehenderit.</p>
<h4><span>$400.00</span>$322.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">
<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>$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 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>
</div>

const filteredCategory = props.state.products.filter(product => {
return product.category === props.currentCategory;
});
const itemDetails = filteredCategory.map((product, i) => {
return <ProductDetail key={i} product={product} />;
});

return (
<div className="App">
<div className="wrap">
<div className="header">
<Header />
<div className="clear"> </div>
<SubHeader />
<div className="clear"> </div>
<TopNav changeCategory={props.changeCategory} />
</div>

<ImageSlider />

<div className="content">
<div className="products-box">
<div className="products">
<h5>
<span>FEATURED</span> PRODUCTS
</h5>
<div className="section group">{itemDetails}</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">
<img src="images/g6.jpg" />
<h3>Lorem Ipsum is simply </h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, in
reprehenderit.
</p>
<h4>
<span>$400.00</span>$352.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">
<img src="images/g7.png" />
<h3>Lorem Ipsum is simply </h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, in
reprehenderit.
</p>
<h4>
<span>$300.00</span>$202.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">
<img src="images/g8.png" />
<h3>Lorem Ipsum is simply </h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, in
reprehenderit.
</p>
<h4>
<span>$400.00</span>$322.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">
<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>$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 className="clear"> </div>
<Footer />
</div>
);
</div>
);
}

App.propTypes = {
state: PropTypes.object,
changeCategory: PropTypes.func
};
export default App;
Loading