Please Critique My JavaScript Calculator

I looked for the page for this but it had not been utilized in awhile. Any feedback on the project would be appreciated! The basic logic is that everything is turned into a string and later parsed following order of operation by a function I wrote and turned into a proper solution. If anyone would like to scroll down to the bottom of the code and look at the parser() function and the related round() and the operators object I used to make the operators usable, please feel free to suggest improvement. I am looking for this more than anything. I know there is surely a lot of room for improvement.

Link To App:

Link To JS file (and easy ability to get to the rest of the repository)

The calculator follows true order of operation, allows you to toggle negative and positive on entries and solutions, allows the solution to be further utilized, accepts up to 15 characters (including decimal), will output up to 1e10 before throwing an error, and you can clear the entire program, or clear the current entry.

Operations are restricted in terms of doing something that is illogical (ie pressing for a second decimal) and they will not register.

Please, find bugs and make suggestions on the code and the UI and UX! Thanks!!

If I enter 1 divided by 3 multiplied by 3, I expect to get 1 and not 0.9999 and the same goes for 1 divided by 7 multiplied by 7.

Also, you probably do not intend for someone to enter this:

Thanks! The decimal place was simply an issue of me omitting a possibility of the negative in my regex, which in hindsight could have been done more simple. Totally overlooked that. I fixed that one from my mobile. The other probably has to do with how I’m rounding things. I’ll have to check that out. I probably shouldn’t be rounding numbers inside each operation in the parser…Just the final…but I’m unsure. Thanks again!

I got the other issue fixed. If you chain the problem it won’t happen now. I had some bad logic in my rounding. Now if you hit 1/3= and then answer x 3 = it will get .9999 bc solutions are rounded to 4 decimal places. I had to draw a line somewhere. But in a chain the issue you pointed out is now fixed. Feel free to find anything else! That is why I posted. Thanks again.

Well, I’ve just read these posts and this 1/3 x 3 = 1 business had me panicking for a second. When I did this project, I opted to simulate a cheap little plastic calculator I have. I’m relieved to say that calculator outputs 0.9999999 in response to 1/3 x 3 =. My mobile phone calculator is different though, it outputs 1 and has a display that shows the calculation like yours does. So I suppose it depends on what type of calculator you are trying to simulate. Just glad I don’t have to go back and start doing this again.

Anyway, this project is a pain in the neck and I think yours is pretty good Jon. There’s just a couple of things I would consider changing if I was you. 22/7, the value of π more or less, gives me just 4 decimal places on yours. I don’t get why you truncate the number so much when you’ve got space enough to display a lot more digits.

The other thing is just about aesthetics, if yours is supposed to be simulating an LCD display, black digits on a white background don’t look right. You could try #3f4a4c for the digits and #8c9699 for the screen. That gives this result: I wish I could recommend a decent font as well, but I couldn’t find one.

So yeah Jon, good job on a tricky project.

Thanks for the feedback! The reason I’m truncating the number is because initially I wanted to allow up to 1e10 and that, along with corresponding 4 decimal places, reached the max characters in the screen I wanted. I’m sort of a math guy so I realized the danger I could create with myself in this project wherein I could mess with this forever…so I just started drawing lines. The +/- option almost got yanked because it proved so troublesome. I definitely get your point, and I know I could allow for more decimals and truncate them on larger numbers…my rounding function I wrote actually has an input for degree of precision in it…but like I said, I just started making choices. If you have any suggestions on how to balance decimals versus bigger numbers in terms of a limited output on the display, definitely let me know.

Nice points on the display. I may give that a try here in a bit. It definitely would look more realistic. I’m going to steal those exacts you suggested and look at it. My problem is I’m not much of an artist. At all. I’m strong on the logic side. But graphically I suck. So I can dwell forever on the UI as well.

As for the rounding issue. So I fixed it so if you chain 1/3*3 it is 1, now. If you hit equals, in between, it comes out to .9999 because I have intermediate solutions truncated as such. What I had done…in that parser I wrote I was calling my round at 4 decimals for each operation. And not ever bothering to round the final answer. No idea why I did that. So I changed to 10 degrees of precision in the parser and 4 degrees in the final. That fixed that problem.

I agree, this is a tricky project. I originally used math.eval from math.js to parse my string but I got mad at myself bc I swore I’d do all 8 front end projects without any libraries besides font and icons…and stayed true to that until here. So right after I submitted I sat up forever and wrote my own parser. Which was fun.

Nice job on your project too! I’m assuming that is your Codepen you linked in. Anyhow, thanks for the feedback! That is exactly why I posted it here.

If you wanted to glance at another project, my Simon game…I’m definitely open to suggestions in it as well. You have nice insight into things. Here are the links:


I actually had fun building this one. I’m sitting down right now to do the tic tac toe, which will finish my front end cert in 4 weeks total if I get done by Wed night (I have had a lot of time to put into the curriculum, and had a little experience coming in)…The Simon works nicely for me on my desktop. On my iPhone the sound doesn’t play when the computer is playing its sequence. I’m thinking bc iOS doesn’t like the chain of sound instructions being sent to it. But since these are more meant to be desktop apps I’ve just tried to make them responsive and as mobile friendly as possible, but not stressing on it like a production product. Thanks again for the feedback. Feel free to critique this one if you have the time.

I’m not into maths so I can’t understand some of what your saying here to be honest.

I decided to stay well away from the eval function myself because I didn’t want to have to follow the logic trail that would take me on. What I did was collect key entries until a function, like “+” or something, was pressed and then find the val of the key entries so far, i.e. [3,7,9] became 973 (X 1, X 10, X 100 etc), and then store that with the function, like [973,"+"], and then wait for the next number function input before finding the overall value. I think that helped when making a CE function. Anyway, I think that pattern must be very different to the way you did yours so I’m not sure if anything I say about truncating numbers to fit in the display will help at all. I’ll try and explain what I remember, though I’d like to forget this project really.

So, the output comes into the display function as a number. I convert it to a string to see if it will fit the display. If it won’t and it’s an integer, output “Error” and the user can go to the devil similar to my plastic calc. If it contains a decimal, I can truncate it. I remove the integer part and find the length of that as a string and then know how much space is left in the display area for the decimal. Then I convert the decimal to a string and chop it down to fit the remainder of the display space, add it back onto the integer and display it. I think that’s it more or less. Not sure if I rounded the last digit of the decimal or not. If that sounds silly, it probably is, but I’m not into maths. If it helps you, great.

Glad to help with the colours anyway.

first you should pay attentin that querySelectorAll return s a list and you should first chang this list to an array then use for loop for this array you can use bellow code for doing this:
newArr is the name of the array that we want and field is the name of the querySelectorAll output:;