Calculator

Setup

• Clone repo
• Open index.html in browser
• To run tests, add ?test to the end of the url - results are displayed in the console

Description

This calculator app was a fun challenge! At face value the task seems straightforward, but there are so many edge cases to account for and a lot of design and user experience decisions to make. The three aspects I decided to focus on were: User Experience, Accessibility, and Maintainability.

A calculator is such a familiar object. I wanted to make sure my app was intuitive. This played into my design decisions regarding the button layout, available operations, and display screen formatting. The calculator also needs to behave as expected. I went with an object oriented approach and created a Calculator class to manage the calculator's state and ensure a smooth and predictable user flow. Part of this, too, was ensuring that the calculator could handle edge cases, such as dividing by zero or working with very large or infinitesimal numbers. The latter was particularly challenging, given JavaScript's natural mathematics deficiencies (i.e. float imprecision). Typically, at this point I would reach for a library to ensure mathematical accuracy but, with the parameters of using only vanilla JS for this task, I had to take additional measures to improve accuracy. The Calculator instance holds the values of the current operands and operator in a string format, allowing for storage of very large numbers and more accurate fractional values. The Calculator class also handles the formatting of the display screen for user readability, separate from the stored values. I used the Intl.NumberFormat API to consider the user's locale (to determine grouping and decimal symbols), transition between scientific and standard notation, and round as needed when formatting display.

Certainly not exclusive from user experience, accessibility was another focus for me. I wanted to make sure that the calculator was fully functional for all users regardless of how they are accessing the app. In addition to the calculator being keyboard navigable, keys are also mapped to their corresponding calculator buttons. I added appropriate aria attributes to the buttons and display to ensure the calculator's functionality was clear to screen reader users. It was tricky figuring out how to make the calculator behave as expected while also providing the necessary feedback to screen reader users. On a traditional calculator, so many user actions fail silently - for instance, trying to add a decimal to a number that already has one. I opted to add a screen reader only element to alert screen readers when an action fails in this way.

Finally, I wanted to make sure that the code was maintainable. There is a lot of room in this project for further refinement so I made sure the code was legible, well commented, and has logical variable/method names. By choosing an object-oriented approach, I sought to make the Calculator class as modular as possible and easily extendable. If, in the future, I decide to switch the state-dependent behavior - say, just displaying the previous equation's result, instead of using it as the new first operand - I can easily locate the method that handles input while the Calculator is in that state and make the desired change. Though there was no chance of achieving any sort of meaningful coverage in the time frame of this task, I also decided to write a test suite for the Calculator class. I've never written unit or integration tests in vanilla JS, so I based my approach on libraries with which I am familiar. I set the tests to run with the presence of a "test" query parameter in the url; the results are given in the console and identify the tests that run, as well as the number passed/failed. The tests I wrote barely scratch the surface, but I laid out the framework for future work by dividing tests into groups based on what functionality they are testing: reset, state, math, and display.

Overall this was a fun project and I'm excited to continue working on it past this task. I plan to write more tests, add a way to view the history, and improve the aesthetic with more colors, animations, and UI details like a thock sound and haptic feedback when a button is pressed. I really appreciated the challenge to use only vanilla HTML, CSS, and JS - it is an excellent exercise and I learned a lot in the process.