Tip-calculator-Typescript-SCSS-Animation-Accessibility
Design comparison
Solution retrospective
What I’m Most Proud Of I’m most proud of the final result of the key-controlled calculator, which features smooth animations and engaging hover effects. The combination of accessibility and visual appeal makes the app both functional and aesthetically pleasing.
What I Would Do Differently Next Time Next time, I want to explore creating a 3D version of the calculator using Three.js to add a unique and interactive dimension to the user experience.
What challenges did you encounter, and how did you overcome them?What Challenges Did You Encounter, and How Did You Overcome Them?
I encountered some small TypeScript challenges, which were quickly resolved with further research and debugging. This project served as a refreshing break from my larger project, where I had been heavily focused on SCSS. It provided a valuable opportunity to practice TypeScript and enjoy a change of pace.
What specific areas of your project would you like help with?Anything really, but I don't think this one has any improvements; however, I could be wrong.
Community feedback
- @amjadsh97Posted 3 months ago
Very nice job!
I think if you add this code to this element (".result-value") the app will not grow and shrink when you change the value.
.result-value { min-width: 100px; text-align: center; }
1 - @mkborisPosted 3 months ago
Nice work TedJenkler, just to point out that the tip percentages are radio input types and not buttons.
1
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