Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 4 years ago

Crowdfunding Page - Mobile First, Sass, JS, modal & input

Yuko Horita•645
@Sloth247
A solution to the Crowdfunding product page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


I tried to support assistive technologies♿ as much as possible.

  • All interactive elements can be accessible by keyboard focus.
  • I tried to tackle "keyboard trap" to avoid focusing elements on original page when opening the modals, however I could not achieve by solution. Could someone give me a good advice on it? 🙏

Here is the functions of this website;

  • Bookmark button should be toggle.
  • The target value, backers and the progress bar should be updated upon every donation.
  • Select Reward button and Continue button should be disabled when amount left gets 0. - I still have an issue on changing the container to get lower opacity.
  • Amounts left on main page and modal should be updated upon each donation.
  • By pressing Escape key, modal should be closed.
  • By clicking modal's overlay, modal should be closed.

I am now focusing on WAI-ARIA and the coding on JavaScript. Any suggestions and feedbacks are welcome!

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Yuko Horita's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License