Calculator App built with React + TypeScript + Styled Components
Design comparison
Solution retrospective
šø Hello FEM Community! I'm Daniel and this is my solution for this challenge! š
š ļø Built with:
- React āļø
- Styled Components š š½
- TypeScript š©µ
- Mobile first workflow approach š²
This project was a very good challenge both on the styles and the logic of the calculator. I realised that I need to improve my programming logic skills by doing this project. I really enjoyed using Styled Components. I'm not sure if my approach on the color theme feature was the best, but it's the best I could do with my current knowledge.
Again, thanks to the Front-End Mentor team that creates challenges that make us learn a lot from doing them. š
If you have any suggestions on how I can improve this project, feel free to leave me a comment!
Feedback welcome š
Community feedback
- @YuliaLantzbergPosted 2 months ago
Hey. Wow. It's looking just like a stamp of the design. Just awesome. There are a few things to notice. *I'd use enums to set theme colors instead of function. I think it will simplify code and there are only 3 colors, so that is not a big enum. *Maybe splitting it into smaller components, like buttons, display and so on, will improve readability and ease of maintenance. *From the UX point, I think it's better always to display some output. This means when I enter the action for the number, the previous input disappears and I don't know if something went wrong or if it should be like that. So, it's better when the previous input remains on the display or even that additionally the next input is displayed. Like: 7 + then 7 + 10 then 7 + 10 =. And maybe only the result to output separately. *There is a small bug. There is no guard for division on 0. So output is infinity. And also I can add numbers to infinity then. It's better just to prevent division on 0. Hope my comments make some sense. Regards
Marked as helpful0@danielmrz-devPosted 2 months ago@YuliaLantzberg
Thank you very much for your valuable feedback! Everything you said makes perfect sense. I appreciate it!
2
Please log in to post a comment
Log in with GitHub
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