Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Crowdfunding product page using JS vanilla, SASS and BEM

Yaizaβ€’ 410

@Yaiza16

Desktop design screenshot for the Crowdfunding product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
2junior
View challenge

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

@Bonrey

Posted

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

@Yaiza16

Posted

@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

@Thenextgen1

Posted

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
Discord logo

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