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?
Top comments (10)
You should change those
divs and use
buttonelements for the buttons, and for the "display" maybe use an
evalis 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
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
Did you see this one? dev.to/efpage/beautiful-html-free-...
This is a different approach, using the THML-DOM-API to avoid HTML
To fix operations with decimals ;)
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 😊
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 ;)
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.
Haha ! I expected a longer article.
It surprised me 😄
Well done !
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