I made this notepad style calculator. You can use basic mathematical operators and parentheses and hopefully all will work. You can have comments starting with # that won't be evaluated. Basic percentage operations will work, and hopefully all combinations of the above. The input is saved in your browser so you can revisit the page and have all the text still present. I did everything as a static page so there is literally no framework at play here. Just index.html, index.css and a script.js. I used the amazing and magical nearly.js parser library to get the operators and parentheses working properly.
The most difficult thing for me was the design. Once I had a design in my head it was also very hard to realize it using CSS. I simply don't get CSS. The final version looks a lot less snazzy than I had imagined.
I was playing around with weird/edge case inputs and came across this one that gives a strange result: `(200000 * 23323 * 2423 * 4223 + 30%)` => `62048638409419990,62048638409420000,62048638409419990,62048638409420000` I don't know if this is some sort of thousands-separator or a list of numbers, but I'd be interested to learn how the parser sees this.
For reference, both `(200000 * 23323 * 2423 * 4223) + 30%` and `(200000 * 23323 * 2423 * (4223 + 30%))` give sensible results (once you get how the percent operator works).
Thanks for finding that bug! The parser is confused. My pattern can match to that input in 4 different ways. So it is outputting all of those 4 ways. However only 2 are unique.
It looks nice, although I wonder why you'd treat each line as an independant calculation?
Generally I'd enter an expression, look at the result, then stop. If I wanted to run multiple things I'd use a repl, which would let me copy/paste.
That said it might be useful if you allowed variables to be defined, I updated my own little repl/calculator to allow that recently and found it very useful:
Allowing that makes your multiline input more useful, although I guess you would need to decide if you'd recalculate all lines using a given variable if it's value changed ..
Thanks for the feedback! I like the idea of being able to define variables and use them in subsequent lines.
Originally I wrote this purely to try out nearley.js, I was very intrigued by that library. Then I added the IP addresses function because I need to convert IPs to ints fairly frequently in my work. For that the line evaluation made sense.
8 comments
[ 3.4 ms ] story [ 31.6 ms ] threadThe most difficult thing for me was the design. Once I had a design in my head it was also very hard to realize it using CSS. I simply don't get CSS. The final version looks a lot less snazzy than I had imagined.
Please let me know what you think of it!
I was playing around with weird/edge case inputs and came across this one that gives a strange result: `(200000 * 23323 * 2423 * 4223 + 30%)` => `62048638409419990,62048638409420000,62048638409419990,62048638409420000` I don't know if this is some sort of thousands-separator or a list of numbers, but I'd be interested to learn how the parser sees this. For reference, both `(200000 * 23323 * 2423 * 4223) + 30%` and `(200000 * 23323 * 2423 * (4223 + 30%))` give sensible results (once you get how the percent operator works).
The two ways are:
- (200000 * 23323 * 2423 * 4223) + 30%
- (200000 * 23323 * 2423 * (4223 + 30%))
Now I'm not sure how to fix this.
Generally I'd enter an expression, look at the result, then stop. If I wanted to run multiple things I'd use a repl, which would let me copy/paste.
That said it might be useful if you allowed variables to be defined, I updated my own little repl/calculator to allow that recently and found it very useful:
Allowing that makes your multiline input more useful, although I guess you would need to decide if you'd recalculate all lines using a given variable if it's value changed ..Originally I wrote this purely to try out nearley.js, I was very intrigued by that library. Then I added the IP addresses function because I need to convert IPs to ints fairly frequently in my work. For that the line evaluation made sense.
I didn't know nearley.js. Maybe I can extend my own project to make more natural calculations.