Javascript Calculator Feedback?

Code Feedback
1

I’ve just finished the Javascript Calculator project. It took me twice the time, than average, to complete this one.

The state management was a whirlwind.

Almost gave up on going through with it, glad I pushed through. The redux state management is such a simple, multi-purpose tool. Highly rate it now…**

Looking forward to constructive criticism to improve, especially on my React-redux. Still feel I could’ve optimized it better.

PS. two zeroes in the start because it looked like an android… and I found it funny after 3 days of gruelling debugging.

1 Like
2

Hey Shaurya,

great work, especially building it with Redux! :clap:

My ideas:

  • all tests pass, awesome!

  • personally, I like codesandbox to create React projects, because you have a real folder structure, so you can move related code together, instead of having one huge file that is hard to digest

  • you can refactor some of your duplicate stuff, e.g. in the operatorReducer you are doing 4-times 6 lines of code, although that only differs on the operator; you can create a helper function, e.g. createNewState, that hides the implementation details of the actual calculation and the creation of newState:

Old:

result = parseFloat(state.value) * parseFloat(action.value);
newState = {
  value: result,
  operator: ''
}
return newState;

New:

return createNewState(...)

Keep up the great work,
looking forward to seeing your next steps! :slightly_smiling_face:

1 Like
3

Thank you Miku.

I’m working on the 25+5 clock project now and I’ll heed your advice for it. I want to improve my project/file management, that’s an area I’m massively lacking in right now, so thank you for suggesting codesandbox!

Are there any best-practices/standard practices I should know of before I shift to it?

4

Hey there,

great question!

I think in the end you want to create a structure you can deal with and that is maintainable.

There is a great post about React Folder Structure.

I keep it simple, don’t overengineer and only abstract out if I need it.

1 Like
5

Love it! But why everytime I press the arithmatic operator, the number turn 0 ?

So, how many time is average?

1 Like
6

Hi Nitrostrike, glad you liked it!

I reset the input after every arithmetic operator to reset for the second operator. Felt it was visually more explicit than resetting to empty.

In a gist: After clicking an operator, The first operand gets stored in the state, along with the operator, and sets up input buffer to accept second operand.

On average, I spent 2 days on these projects. But, this one ran for 4 days because I wasn’t very good at Redux.

1 Like
7

Nice , saw no problem.:ok_hand:
(challenge)How about adding backspace/delete ?

1 Like
8

That’s a great idea. I had left a space(In componentWillMount) where I’d start keyboard compatibility. Might tag this along and improve it, after finishing 25+5.

Thanks for the suggestion!

1 Like