-
✏️ Passionate about continuously learning - currently focused on mastering REACT and Data Structures and Algorithms
-
👨🏾💻 All of my projects are available at My Portfolio
-
⚡ Fun fact I like reading non-fiction books and I go to the gym very often.
punk-api's Introduction
punk-api's People
Contributors
Watchers
punk-api's Issues
Feedback
Hey Abs,
An awesome design mate! Really clean, modern colour palette - the colours compliment each other really well! I also like how you re-position the cards when the search filter is applied. Your code is generally really clean and you've done a good job of destructuring your props also. Searchbar working as expected also which is great!
Some pointers to improve:
Site
- Need to fix the responsiveness - Navbar is hidden underneath the Beers. (see below)
Code
- Remove unused code and console.logs
- Be careful with some of your variable and function names - showData is a bit too vague for me. What data is being displayed? showBeers sounds a bit more intuitive.
- Again singleBeer would make sense if we returned just a singleBeer but actually we can still return more than one when using the search Input.
const singleBeer = showData.filter(beer => {
const name = beer.name.toLowerCase();
return name.includes(searchTerm)
})
// Better Option could be:
const filteredBeers = beersList.filter(beer => {
return beer.name.toLowerCase().includes(searchTerm);
})- Generally, great use of BEM naming convention. Minor change would be to change:
// From
<div className="beerCard">
<h3 className="beerCard__title">{name}</h3>
</div>
// To
<div className="beer-card">
<h3 className="beer-card__title">{name}</h3>
</div>- Remove the NavMenu component if you're not using it.
- List lengthy props vertically, e.g.
// From
const Main = ({showData}) => {
const beersArr = showData.map((beer, index) => {
return <Card key={beer + index} name={beer.name} image={beer.image_url} tagline={beer.tagline} abv={beer.abv} info={beer.description} />
});
return (
<div className="main">
{beersArr}
</div>
)
}
// To
const Main = ({showData}) => {
const beersArr = showData.map((beer, index) => {
return <Card key={beer + index}
name={beer.name}
image={beer.image_url}
tagline={beer.tagline}
abv={beer.abv}
info={beer.description}
/>
});
return (
<div className="main">
{beersArr}
</div>
)
}Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.