Feedback on my calculator(this one took a good minute)

Hi all, I just finished my calculator and finally got my front end certification. That calculator I have to say had me crazy, to the point of stopping doing the pomodoro timer. Then coming back to it, I kept having such weird hiccups, on the parts that weren’t even complicated, like the FCC unit tester hated the way I was displaying information. I had to refactor 3 times, for that. I say that because I want people to know who might be struggling on a project, that this one for some reason took me probably 20-60 hours to complete, the broad range of time is because I really don’t know how long it took, but it was looong. Anyhow with all that being said, I would appreciate some feedback.

https://raregamer.github.io/fcc-react-calculator/

https://codepen.io/raregamer/pen/jONKJGW

2 Likes

I only know html-css. So, it may be rude but can you do something about the calculator: when a number is being divided by another number, both the numbers are visible but when it is being divided by zero, the value of zero is not visible.

1 Like

The calculator looks great, I like the color scheme. Other than dividing by zero like @donutzstudio said there isn’t a way to clear out the current number so if i made a mistake i would have to restart whatever I was using the calculator for.

2 Likes

Haha, that is a funny bug I never even tried. I will look into that soon.

1 Like

@donutzstudio @austinmoore1492, Hi if you don’t mind take a look again it should be fixed.

1 Like

The only other bug i notice is I cannot add a decimal as the beginning of the number, I can’t put like 0.7 or even .7

Hmm… i’ll have to check out that problem as well. Thanks for info.

Hi, I think that should be there if you are adding decimals together. I can fix that maybe visually since seeing it like that could be confusing, the hardest part in this project was managing how to handle inputs.

Hey all! Calculators are not as easy task to do as it seems at first :slight_smile:
Putting history aside, as that adds whole a lot of complexity, for functional calculator you need 3 components:

  1. Array-like data type that will only store x amount of single digits and gonna ignore anything extra user wants to push. It also must manage floating point rules, for example a sequence of . and 2 inputs should result in something like that ['0', '.', '2']. Lastly it must keep track of negation and only take single digits and . as an input. On top of push, it also must have pop method for user to go back, so it’s basically a Stack. Finally this stack must have value getter that will output actual number it stores for our next component.
  2. Calculation function, that will take (operator, num1, num2 = num1) as arguments. Note that if only one number provided it will still run on that same number, as real-life calculators do. This function should also perform rounding (and trimming if needed), so the output always has that overall x length. Lastly, it must output Error whenever someone tries funky math, like dividing by 0. (No Infinity and no NaN please!).
  3. Final component is a ‘manager’ that orchestrates the above two. It should stack numbers (stored in array-like structure (1)) and operations and then pass it to the calculation function (2).

If you want to add history (aka log) - that would be your component #4, but first, you need to understand how to display it, especially in the scenario of really long inputs. It might be quite challenging.

Hope this will help you with your bugs :slight_smile:

1 Like

Refactor:
Reading this again I see that it could be done a little drier and cleaner once your array-like Number class (1) would be able to optionally take any number as an argument and do all necessary rounding. This way you’ll take it off calculation function’s (2) shoulders making it extremely straightforward thing :metal:

1 Like

Hi thank you for the feedback.