JavaScript calculator critique

https://codepen.io/Elemeandor/full/OJpWORN

I have a few questions. I initially tried to use a useEffect hook in order to update display whenever the inputs were updated. This resulted in me failing every single user story that had to do with the display, even though the display was showing the correct result. Aside from my assumptions about the asynchronous nature of how React updates components, I’m not sure why this was happening and I had to change it.

Also, despite the fact that I did pass the user stories, my code feels like total spaghetti. I initially wanted to add trig functions, parenthesis, and exponents. But hours into this project, I realized that it would add so much unneeded tangle. Any advice on how I could improve on this if I were to do it over?

Also, it’s totally okay to use eval for this project, right? Especially since this doesn’t seem like an example where it would cause any harm.

i can’t answer your questions since i’m not experienced with java, but i took a look at your calculator and did a few equations on it and it functions well. nice work : )

1 Like

@DrantDumani That is the best looking calculator I have seen in a long time. I only suggest that you widen it a little so that the numbers fit inside square shapes instead of rectangles.
Great job on that calculator!

1 Like

It looks pretty slick and it seems to work just fine. I tested a few weird combinations and I couldn’t break it. Great job!

1 Like

Your calculator looks good @DrantDumani. Something to revisit;

  • On a large screen divide 7 by 3. The calculator grows in width to accommodate the answer.
    Now, clear the screen and shrink your browser width as narrow as it will go. Do the same, divide 7 by 3. Now the user cannot see the whole answer. The first part of the answer is cut-off on the left and there’s a horizontal scrollbar but only the right side of the extremely long answer is shown.
1 Like

Hi @DrantDumani !

I think it looks good.

I found your code pretty easy to read and follow.
You might consider using codesandbox for the next project.
That will give you the opportunity to create individual components in separate files and then import them into your app.js

That is one way to make it look a little cleaner.

Have fun with the 25+5 clock!

1 Like

Thank you for the responses, everyone. I’ve been using codepen for every project so far. I’ll try using codesandbox for the next one and see how that goes.

@Roma that’s something I didn’t realize until you pointed it out. I “fixed” it by adding a max-width to the calculator and an overflow-x: auto property to the display. But if I ever do this again, a number limit is probably the way to go (or a smaller font on mobile).

I think the number limit would be best.

Just noticed that the calculation is cut-off on the bottom.
Screen Shot 2021-05-21 at 13.25.26

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.