This is a solution to the Crowdfunding product page challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout depending on their device's screen size
- See hover states for interactive elements
- Make a selection of which pledge to make
- See an updated progress bar and total money raised based on their pledge total after confirming a pledge
- See the number of total backers increment by one after confirming a pledge
- Toggle whether or not the product is bookmarked
- Solution URL: https://www.frontendmentor.io/solutions/crowfunding-landing-page-with-functional-js-scss-and-bem-G4-N97RJS
- Live Site URL: https://crowfunding-landing-page.vercel.app/
- Semantic HTML5 markup
- SCSS preprocessor
- CSS custom properties
- CSS pseudo elements
- CSS pseudo classes
- Flexbox
- CSS Grid
- Javascript Functional
- Mobile-first workflow
Hey guys!
This was a good one, the javascript part of the project to make everything interactive was hard, i need to admit! In the middle of the project i switched from objected oriented with classes to functional programming with pure functions. I clearly used the wrong programming pattern at the beginning, im not gonna use POO on something like this again.
Im still testing everything to make sure that everything works properly and there are no issues or bugs. So if you guys found a bug, please make sure to report!
But overall, i did a pretty good job with js. Probably i'm going to refactor a few things in the future but for now I'm ok with the result.
- Website - Soon
- Frontend Mentor - @Galielo-App