Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted 7 months ago

Calculator Application Solution - Anthony Chablov

react, tailwind-css, typescript, vite, zustand
A•90
@AnthonyChablov
A solution to the Calculator app challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


What are you most proud of, and what would you do differently next time?

I am most proud of my implementation of seamless user interaction with mobile responsiveness, significantly improving user experience. I ensured the calculator hook logic is robust and handles various operations smoothly. My understanding and application of user interaction principles and testing fundamentals have definitely improved. Furthermore, I focused on establishing a clear project structure and adhering to clean code principles, including aspects of SOLID where applicable, to create a maintainable and organized code-base with thorough unit-testing.

What challenges did you encounter, and how did you overcome them?

A primary challenge I encountered revolved around handling the various edge cases inherent in mathematical calculations within the calculator logic. For instance, managing consecutive operators, preventing division by zero, and ensuring correct order of operations required careful consideration. My custom useCalculator hook implementation reflects the effort to address these challenges through specific conditional logic within the handleButtonClick and onEvaluate functions. This included sanitizing the expression before evaluation to handle scenarios like "9++" or trailing operators, and implementing error handling for division by zero and invalid results. The use of the expr-eval library significantly simplified the actual evaluation of the mathematical expressions while still requiring robust pre-processing and post-processing to handle the UI-specific input and output requirements.

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 A'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