Crowdfunding Page - REACT/STYLED-COMPONENTS/FRAMER-MOTION
Design comparison
Solution retrospective
Hello everyone ! 🙂
Here is my version of this challenge, had a lot of fun, especially in trying to make smooth transitions ! I have a few questions:
-
How do you name your components when using a library such as styled-components ? When I use pure CSS I mainly try to follow BEM convention. However, here I'm not sure what is the best approach, thus I got lost really fast in my naming and it becomes hard to identify "what is what" haha. So I plan to refactor the code to make it more readable.
-
When I select a reward, I would like others to "unselect" so they toggle back. I've been struggling to find a solution even if I guess it's not a big deal I always ended up trying to do something complicated. Should I use radiobutton ? Or there is a simpler way to create a parent component that handle the toggle state of child components ?
Also, any feedbacks/remarks are welcomed, I already noticed that my code wasn't as generic a I want to, so I'll work on this as well. I finally decided to take the PRO subscription after completing a few challenges, can't wait to tackle even more interesting ones!
Have a nice day ☀️
Community feedback
- @ApplePieGiraffePosted over 3 years ago
Hi, Enayar! 👋
Good job on this challenge! 👏 I like the smooth transitions that you added to the various interactive elements of the page (such as the modals) and the styled scroll bars! 👍
It's also great to hear that you signed up for a Pro subscription (since I think that really helps speed things up and unlocks a whole bunch of neat challenges)! 😀
When it comes to naming your styled-components, I think you should probably go with whatever names describe the function or purpose of the component well and are understandable to you (and to any others that might read your code). Since styled-components automatically generates class names for you, methodologies like BEM are probably irrelevant (unless you are actually using a few classes, anyway, perhaps). One thing that might be useful to keep in mind is that styled-components are scoped to the files that you create them in, so you can simply name things as
Wrapperinstead ofModalWrapperorButtonWrapperif they are in separate files, I believe. 😉I'm somewhat new to React, too, but maybe you could add a "selected" property to each object that holds the data for each funding option. Every time a user selects an option, you could use a function that you would pass down from the parent component to set the "selected" properties of all the other funding options to "false" and set the "selected" property of the current property to "true". IDK, there may be a much better way of doing things, but that's one idea, I guess. 😅
Hope that helps! 😀 Let me know if you'd like more info on anything. 👍
Keep coding (and happy coding, too)! 😁
2@RayaneBengaouiPosted over 3 years ago@ApplePieGiraffe Hello APG ! 👋
Thank you for your extensive feedback ! Yes you're right on the naming, I just realized that it doesn't make much sense to use
ModalWrapperinstead ofWrapper.I'll try to implement what you say for the toggle. By the way I've read your guide on frontend mentor that you wrote and it's super cool ! Didn't know about PerfectPixel extension before, so It might help me a lot ! :)
Have a nice day ☀️
1@ApplePieGiraffePosted over 3 years ago@RayaneBengaoui
Haha, thanks! Have a nice day, too! 👍
0@RayaneBengaouiPosted over 3 years ago@ApplePieGiraffe I just applied your logic and now it works like a charm ! Thanks again 😀
1@ApplePieGiraffePosted over 3 years ago@RayaneBengaoui
Sweet! 👍
I just took another look at the updated site, too, and everything does work well! 😀
1
Please log in to post a comment
Log in with GitHub
Join 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