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

Calculator App built with React + TypeScript + Styled Components

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

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


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

šŸ›ø 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

Yuliaā€¢ 320

@YuliaLantzberg

Posted

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 helpful

0

Daniel šŸ›øā€¢ 44,230

@danielmrz-dev

Posted

@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
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