Js Calculator with React

Hi,

Well this is my Calculator Project, please check the code to see where I need to improve:

https://codepen.io/andrescaroc/full/JjdNYrm

thanks

1 Like

In general, not bad! You’ve passed all tests and that’s good!

From code point of view, +1 for dynamically generating buttons. Another +1 for providing non-eval calculation.

I didn’t get why are you assigning id to every DOM element?

@snigo thanks for checking my code.

Well, that is one of the benefits of using react, isn’t it?, thats why I like react!

At first I didn’t know how to do it, if manage the math expression in a string or in an array, then I remember my Project Euler Challenges here in FCC and decided to manage the math expression in arrays and used the reduce method several times over the expression.

mmmm, I’m using them to styling in css and to pass as props to child components for dynamically render pads
But, now I think I could optimize the amount of id’s the app needs.

If you look majority of calculator projects from others I think 2/3 of them would have hard-coded buttons :slight_smile:

The easiest way to calculate a string expression is to evaluate it, and strictly speaking, there is absolutely nothing wrong about that in client-only systems like this. In fact I would actually suggest you to refactor it using eval():

const expression = '7 * 6';
const result = eval(expression);
console.log(result); // 42

If you still want to try non-eval solution, then you really shouldn’t come up with your custom solution, parsing and calculating a string is common algorithm group, like breadth- / depth-first search or sorting algorithms etc., meaning you are expected to know (already invented) algorithm, rather then come up with something custom. If you’re interested in this topic, look at Postfix (aka Reversed Polish notation):

And, regarding selecting elements by id for styling - don’t do it. Always prefer classes

I read about this method, but there was a warning in MDN about using it:

Warning: Executing JavaScript from a string is an enormous security risk. It is far too easy for a bad actor to run arbitrary code when you use eval() . See Never use eval()!, below.

Then I found js libraries like math.js, but I thought the challenge was to solve it with the knowledge that I have without using other libraries, so I decided to write my own algorithm, and to my surprise it is fast, at least for a human user. I don’t know if you benchmark it, maybe is slow compared to others.

This is cool, I think back in year 2000 when I was starting my Engineering Studies in College, I used a HP Graphical Calculator using this kind of input logic, but it was hard to get used. Then the Texas Instrument Calculators came in, and changed everything. Reading that article I see why:

Later research clarified that the increased speed from reverse Polish notation may be attributed to the smaller number of keystrokes needed to enter this notation, rather than to a smaller cognitive load on its users.[11] However, anecdotal evidence suggests that reverse Polish notation is more difficult for users to learn than algebraic notation.[10]

they were sacrificing user experience.
About the breadth-first or depth-first algorithms seems to be interesting for a personal project on e-commerce that I wan to develop using tree or graph data structures, but I need to read and learn more about that topic. Thanks for sharing!

Ok, I would do it, but could you elaborate more on why it’s better to use classes than a mixture of classes and ids?