The "Calculator" React Web App I created is capable of performing addition, subtraction, multiplication, division and exponentiation.
It's usable via both keyboard and mouse.
The calculator only takes properly formatted numbers as input. It only does calculations on valid mathematical expressions.
I made it using React, TypeScript, CSS, and HTML.
● UX design (and/or aesthetics):
When building the calculator project, I focused on creating something intuitive and minimalistic. Also, it’s easy to interact with, via mouse and keyboard. I looked at other calculator designs online, including the one on Bing(so that I don’t reinvent the wheel), to design mine in a way that is easy for a user to interact with. The layout of the buttons is set up in a way that is easy for anyone that has interacted with another calculator before to also use this one. This includes the layout of the digits and of the mathematical symbols.
The calculator is in the center of the page. The buttons and boxes have a clean look to them with rounded corners.
As for the colors that I picked for my Calculator web app, I picked them so that they match the Teutsch Partners company website https://www.teutsch.com/home . I used a Color Picker extension in my browser in order to find and use the exact main colors that are on the company's website. When one hovers over the calculator buttons, the color of the buttons changes in a similar way that it changes on the company's website.
● Readability (e.g. clean code, JSDoc comments, good variable & function names, etc.):
When building the calculator project, I tried to make the code readability as good as possible. I used variable and function names that are descriptive. The code is concise, organized, and well-structured. I used common formatting styles appropriate for CSS and Typescript.
● Robustness and error handling:
When building the calculator project, I focused on the design aspect of robustness and error handling in several ways. The calculator is capable of performing addition, subtraction, multiplication, division and exponentiation. Also, I limited the inputs of the calculator. For example, the calculator only takes properly formatted numbers as input (only numbers and mathematical signs allowed). Also, it only does calculations on valid mathematical expressions (for example, 2^^3 does not compute, whereas 2^3 does). If I were to further polish this project, I would add warnings to the user when incorrect input is being given.