Skip to content
Submitted over 3 years ago

Crowdfunding product page using JS vanilla, SASS and BEM

Yaiza•410
@Yaiza16
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Crowdfunding product page
  • HTML
  • CSS
  • JS
2junior

Design comparison

SolutionDesign

Solution retrospective

Finally, I finished this challenge. It took me a long time to finish it but I think result is good and I had a lot fun doing it.

I struggled a lot with JS part so I decided focus on that and put the responsive design aside. I’m starting with JS so there were some issues related to.

• I feel JS code is a little messy and hard to read so any advice or tip to improve it it’s welcome. Would it be better if I put all code in just one file? • I’m starting with SASS too. I put components in a folder apart but should be modifiers components there or these should be in the layout folder?

I tested everything to make sure that everything works properly and there are no bugs. So, if you found a bug, please let me know!

Any feedback related to a cleaner and more efficient code it’s welcome. Besides, feel free to give any other feedback too. It will be appreciated. 😊

Community feedback

  • Bonrey•1,130
    @BonreyPosted over 3 years ago

    Hello, Yaiza! I think you did a pretty good job on this challenge! 🎉 I couldn't find any bugs as regards the JS part. 😄

    However, there are still some things you might want to improve. 📈

    • First of all, I would fix your accessibility issues by adding the aria-label attribute to your input elements. This way, you'd let assistive technologies know what all these radio buttons and text fields are about.
    • Each of your sections should have a heading. So, it'd be a better idea to put your section tag inside div and not vice versa. 🙂
    • Probably, not so important, but still worth mentioning: I'd make the Crowdfund logo clickable (and refresh the page on the click, for example).

    As for your SASS folder structure, I think it's fine! I refer to this site whenever I want to make sure I put a new .scss file in the right place.

    Anyway, it's great that you put so much effort into this challenge! I think you learned a lot along the way. 😃 So, keep on coding, and good luck! 🍀

    1
    Yaiza•410
    @Yaiza16Posted over 3 years ago

    @Bonrey Hi, Bonrey! Firstly, thanks a lot for taking your time to answer! I really appreciate it :)

    I've taken your advices into account so as soon as I finish my last challenge, I'm going to do change the code!!

    1
  • Elijah Ohiwerei•150
    @Thenextgen1Posted over 3 years ago

    Try using media queries to make it responsive Because it isn't on my screen

    0

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