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

Discussion (10)

Collapse
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).

Cheers!

Collapse
joelbonetr profile image
JoelBonetR Author

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

Collapse
efpage profile image
Eckehard

Did you see this one? dev.to/efpage/beautiful-html-free-...

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

Collapse
thi3rry profile image
Thierry Poinot

You should check out this article dev.to/nicozerpa/javascript-has-a-...
To fix operations with decimals ;)

Collapse
joelbonetr profile image
JoelBonetR Author

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 😊

Collapse
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 Author • Edited on

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).


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.

Collapse
alexandrecibot profile image
Alexandre Cibot

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

Collapse
joelbonetr profile image
JoelBonetR Author

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