
Submitted over 3 years ago
Crowdfunding Page - Mobile First, Sass, JS, modal & input
@Sloth247
Design comparison
SolutionDesign
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 andContinue
button should be disabled when amount left gets0
. - 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!
Community feedback
Please log in to post a comment
Log in with GitHubJoin 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