Finally built a calculator

Wow did I learn a lot. All the javascript is my own, bar a function from mdn to handle rounding of decimals which is credited in the code. Also at the end I had to check out the example to see how to make the buttons button which was a cool thing to learn so I ripped that off I guess ha.

Some quirks of my design. There is no unary negative operator. Instead, the minus button acts as both depending on if the follows another operator or not. Also if you try to input two operators excluding the unary one it will replace the previous one with the newest one stopping you from say adding multiply 3.

Here is a link for those that just want a quick look.

For those interested in how it works, allow me:

Under the hood every key press you make is tested to see if it is valid then put on a stack and the display is updated. When you hit equals the stack is sorted so all the individual digits are combined into full numbers. Then the maths is handled, with order of operations dealt with through a recursive method of breaking down the sum. Then the total is spit back out.

Here and here you can see partially complete versions which show my approach of getting the thing to work first!
The main goal I had once I got the javascript done was to try and implement some flexbox stuff I have been learning. The buttons themselves are actually inside 4 flex columns inside a flex row which make the calculator very responsive imo.

Anyways please fell free to break it or give any feedback :smile:

To be honest, this is one of the hardest projects to get completely working.
There are so many stupid edge cases, it could do will a list of tests you need to figure out before you start.
For example, I can type ./5 = NaN
or 00000 * 7 = NaN

Note. Mine fails on 6 * - 5 which yours does correctly.

Nice responsiveness on the buttons :+1:

1 Like

Ahhh. Well that’s a few more fixes to do. Yep it really drives home the need to try and think out every case before you even start coding. A great lesson in how an hour with a pen and paper can save you hours of changing code.

Thanks for the compliment too :smiley:

1 Like