DEV Community

Cover image for JavaScript Calculator - The DOM way
JoelBonetR 🥇
JoelBonetR 🥇

Posted on • Updated on


JavaScript Calculator - The DOM way

So I was bored this morning and did said to me "let's do a calculator with JS".
I planned to do it in React but then "Why do I need react or any other library to do it?" so I ended up with this calculator with JS relying on the information showed on the DOM.

I know it's not 100% perfect but those were 4 well spent hours.

That's all folks!

PD: If you want more JS-related stuff check out this dope thingy.

Do you like my content?

Buy Me A Coffee

Top comments (10)

lukeshiru profile image
Luke Shiru

You should change those divs and use button elements for the buttons, and for the "display" maybe use an output element. Also eval is not the safest, so maybe have some kind of safe parser? Something that builds a safe function call based on numbers and operators (like if it sees 1 + 2, it actuall calls an add function passing 1 and 2 as arguments).


joelbonetr profile image
JoelBonetR 🥇

Agree on everything. Moreover I'd add key events so you can use it with the keyboard but... That's what happen when no planning is performed before coding 😂 I just started with a few hours countdown and that's what I came out with.
I did it for fun and I'm not sure I'll spend more time on it, let's see what happen in the next boredom episode

efpage profile image

Did you see this one?

This is a different approach, using the THML-DOM-API to avoid HTML

thi3rry profile image
Thierry Poinot

You should check out this article
To fix operations with decimals ;)

joelbonetr profile image
JoelBonetR 🥇

Hahaha Hi Thierry! Did you really check how much precision it has?

I mean, I stored the numbers in Strings, which is something you usually do when seeking precision -depending on the workaround- but I honestly didn't check for that. It was like, .0034 + .0066 = 0.01 -> Check!

The "bad thing" I did there is not the precision but the use of eval() as I do in the codepen. Check eval can be harmful if you are going to use it on any place.

Thank you for sharing, Decimal.js, Bigdecimal.js, Big.js and Bignumber.js, are libs that we'all should know that they exist at least, we may need them at any time 😊

thi3rry profile image
Thierry Poinot

Actually, i read this article few days ago and I was amazed about this issue of JS, so when I saw you calculator I just test it to know and share to you and your readers these libs ;)

Thread Thread
joelbonetr profile image
JoelBonetR 🥇 • Edited

Hahaha I'ts ok. Just remember that is not a "Javascript issue" but an issue of the binary base we have most of the time.

In most programming languages, floating point numbers are represented a lot like scientific notation: with an exponent and a mantissa or significand.

A very simple number, say 9.2, is actually this fraction:
5179139571476070 * 2-49
Where the exponent is -49 and the mantissa or significand is 5179139571476070.

The reason it is impossible to represent some decimal numbers this way is that both the exponent and the mantissa must be integers. In other words, all floats must be an integer multiplied by an integer power of 2.

9.2 may be simply 92/10, but 10 cannot be expressed as 2n if n is limited to integer values (23=8 and 24=16).

Image description

This is information gathered from a pair of comments in SO with some annotations added in a vague try to make it more understandable, because honestly I don't feel myself skilled enough on this mathematical topics to explain it by my own without spending days in previous research and doing diagrams, examples and so.

You can check the original comments here.

alexandrecibot profile image
Alexandre Cibot

Haha ! I expected a longer article.
It surprised me 😄
Well done !

joelbonetr profile image
JoelBonetR 🥇

Hahaha it's just a tinny calc, you can see the code in the embed, honestly didn't meant to do a tutorial on that 😁didn't even commented the code 😅

Some comments have been hidden by the post's author - find out more

Visualizing Promises and Async/Await 🤓

async await

☝️ Check out this all-time classic DEV post on visualizing Promises and Async/Await 🤓