Crowdfunding product page

Live | Solution | Challenge

Solution for a challenge from frontendmentor.io.

About The Project

This challenge will test both your layout and state management skills. As visitors make pledges, your goal is to keep track of the changes.

Users should be able to:

1. View the optimal layout depending on their device's screen size
2. See hover states for interactive elements
3. Make a selection of which pledge to make
4. See an updated progress bar and total money raised based on their pledge total after confirming a pledge
5. See the number of total backers increment by one after confirming a pledge
6. Toggle whether or not the product is bookmarked

Built with

• Semantic HTML5 markup
• CSS custom properties
• Grid & Flex
• Desktop-first responsive workflow
• Vanilla JavaScript

What I learned

A very easy project to keep updated with the Frontend Mentor projects and remember the basics!

Useful resources

1. Figma - Paste your design image to check the size of containers, width, etc.
2. Perfect Pixel - Awesome Chrome extension that helps you to match the pixels of the provided design.

Acknowledgments

A big thank you to anyone providing feedback on my solution. It definitely helps to find new ways to code and find easier solutions!