Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Responsive Calculator App.

#accessibility#material-ui#react#vite#typescript
Mahmoud Tarek• 650

@mahmoudAcm

Desktop design screenshot for the Calculator app coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hello, Frontend Mentor community! Today I'd like to share with you some improvements I made to a calculator app, and also two new features I added.

Firstly, I moved some functions outside of the component files to the libs folder and refactored the code to ensure valid expressions and limit numbers to 14 decimal places. I also added comments and utility functions for clarity. Additionally, the screen component has new styles to handle long expressions, and the keypad component now includes two validations for invalid terms and division by zero. The output format has also been updated to handle safe and unsafe values and allow up to 14 decimal places.

But that's not all! I also added two new features to the calculator. The first feature is the ability to paste expressions from the clipboard, which will make it easier for users to input complex expressions. The second feature is keyboard support, which will allow users to input expressions using their keyboards.

All of these changes are designed to make the calculator more user-friendly and efficient, and we believe they will enhance the overall experience for users.

If you're interested in seeing the code changes for yourself, you can check out the pull request here. And if you have any feedback or suggestions, we'd love to hear them!

Thank you for taking the time to read about my improvements to the calculator app. We hope you find them useful!

Community feedback

Yana• 150

@yana-norinskaya

Posted

I like it, Goog for you)

1

Please log in to post a comment

Log in with GitHub
Discord logo

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