ryandougc / vue-ts-calculator

VUE-TS-Calculator

A "simple" project that turned out to be a lot more in depth than I thought. This calculator mimics the functionality of the google search calculator.

Technologies

• Vue.js 3
• TypeScript
• Tailwind CSS
• Jest (Unit Tests)

Behind The Scenes

Parsing bedmas operations was the hardest part of this project. After the equation string is cleaned to a consistent format, the string is analyzed and turned into an array of Arrays. Each interior array represents the order of what needs to be calculated first in terms of bedmas. We take of advantage of resursive functions to go inside each array and equate them before equating the entire string together.

After bedmas, parsing the parenthesis was another difficult task that was made easy using recursion. Now, even brackets inside of brackets can be parsed into sub-arrays for preparation to equate using bedmas.

vue-ts-calculator's Issues

Jest tests not consistent with previous project location

Once I migrated the Jest tests from my TypeScript project into the Vue project, 3 of the Typescript tests failed. 2 Of them behaved in a way that was acceptable and still return the correct answer. However one of the tests doesn't account for bedmas correctly.

Inputting (1 + 1 * 2) into the calculator will return [ ["1", "+", "1", "", "2"] ] which doesn't use bedmas for equating. Instead it should be setting the equation to [ [ "1", "+", ["1", "", "2"] ] ]

Add support for percentages

After getting a total, the next input should replace it

After pressing equals, the total will show in the input bar. Currently, pressing a button to continue the equation will add on to the total. But it should replace the total, with the total being available as the ANS button

Input/output of the calculator won't show decimals

The textbox input that is used for I/O of the calculator does not show decimals. Even when passing a string of '1.666667' the calculator rounds it to showing "1".

My initial thought was that it was converting a number into a string and losing the decimal data. But now I convert the number into a string using the toFixed() equation and it still rounds the number.

Numbers adjacent to parenthesis should multiply

In a situation where no symbol is present but a number is adjacent to a parenthesis, multiplication should be performed instead of adding the numbers

Add support for ANS button

a button that holds the answer of the lat equation performed

Add Support for Exponents

Using the "^" symbol should perform the power of calculation

Account for parsing brackets inside of brackets

No testing has been done for what happens when an equation is submitted with brackets inside of brackets. With the recursion set to be able to hand this, I have no idea if it will handle it properly and return the expected outcome since it hasn't been tested

Numbers above maximum number possible return 0

Number.MAX_SAFE_INTEGER = 9007199254740991

After a certain number of decimal points, change to scientific notation

Add support for modulo

Using "%" symbol should return the remainder from dividing two numbers

Add support for negative numbers

Use the minus sign touching the left of a number to be a negative sign