Design comparison
Solution retrospective
I had a little tough time with this project since I am new to React, but it was a nice project to tackle. What could I have done better? 🤔
Community feedback
- @RalfiSlaskPosted about 1 year ago
Hello nice work!
I have a few suggestions and tips.
HTML
Change semantics of your elements so instead of
<div className="footer></div>
use<footer></footer>
. Use only section if it is necessary.Javascript
Maybe use ternary operators for simple if statements, it is easier to read as it only takes up one line.
instead of:
if (isDiscounted) { newPrice = newPrice * 0.75; }
use:
newPrice = isDiscounted ? newPrice * 0.75 : newPrice
React
Make use of react by creating components that can be reused if necessary so you dont have to repeat code. The most obvious example is in the footer, where you have three items that could be used in a single component.
If you instead create a component like this and make use of the text as a prop:
const FooterFeatureItem = ( {text} ) => { return ( <section className="check-section"> <img src="./icon-check.svg" alt="" /> <h3>{text}</h3> </section> ) } export default FooterFeatureItem
When you then have this component you can either use it by just writing it like this:
<section className="bottom-section"> <FooterFeatureItem text="Unlimited websites"/> <FooterFeatureItem text="100% data ownership"/> <FooterFeatureItem text="Email reports"/> </section>
But a better and more dynamic way is by first creating an array of objects:
const footerFeaturesList = [ {id: 1, text: "Unlimited websites"}, {id: 2, text: "100% data ownership"}, {id: 3, text: "Email reports"} ]
And then use the map method over this list to create the components:
<section className="bottom-section"> {footerFeaturesList.map(feature => <FooterFeatureItem key={feature.id} text{feature.text}/>)} </section>
Marked as helpful1@Fola-JoePosted about 1 year ago@RalfiSlask Thank you very much. This is very helpful, I really appreciate.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord