Good look. Check floating point math for numbers less than 1.

hi everybody! i’ve finished my retroCalc
DEMO: http://fngr2911.github.io/jscalc/
REPO: https://github.com/FNGR2911/jscalc

2 Likes

1 Like

Just finished the javascript calculator. http://codepen.io/MichaelMorris/full/KMPEYP/. Would appreciate any feedback. Thanks.

Here’s mine:

http://codepen.io/PenCoderr/pen/KMzooN?editors=0110

I found this one pretty challenging.

A few things that I wanted to make sure worked right:

1. If you enter a number, press an operator and than change your mind and press another operator, it doesn’t hang. For example, if you type “9” and then “+” but realize you wanted to press “x” instead, you can and it will still work. So this will give you the right answer: 9 + x 3 = [will give you 27]

2. I wanted to make sure the answer always fits into the display. So if you do “100 ÷ 3”, you will get “33.333333” without any digits cut off at the end.

3. You don’t need to clear before doing the next calculation. If you do “4 + 12 =”, you’ll get 16 as the answer. Then you can immediately type in your next expression instead of clearing first.

4. I realized when I was done that it wasn’t touch-enabled. Had to go fix that. LOL

5. You cannot enter more than one decimal point.

6. AC clears all and CE clears the last entry, as you would expect and pressing CE after the last result gives you 0 on the display like it should.

7. Operator precedence seems to work. 2 x 5 + 5 x 2 = 20, not 30.

8. I didn’t make it keyboard-enabled. Didn’t think about it. I might come back and include it at a later date.

9. It has a bug that I’m not sure how to fix. If anyone has an answer, please share! The problem is when you have a negative number that is 9 digits long. The display has faint inactive LCD lines in the background where there are no digits, reminiscent of a real LCD calculator. The numbers line up in all other cases EXCEPT when there is a 9-digit negative number. You can see this by typing “123456789” and then pressing the “+/-” button. For some reason, the digits move over slightly and the LCD lines are not lined up with the numbers anymore.

10. No leading or trailing zeroes.

11. The buttons all line up when viewing at 100% but if you zoom in on your browser, the + button moves out of alignment. It’s floated right. I don’t know why this is happening and don’t know how to fix it. I need to learn CSS better. LOL

If anyone finds any more issues, please point them out to me!

Thanks!

4 Likes

Any tips or code cleaning suggestions would be helpful, thanks.

Might have to improve the functionality, as in evaluating operators via precedence and showing the result after pressing an operator, but I did this in a day and I’m very happy with how it looks! It’s keyboard compatible but uses ‘space’ for evaluating and ‘delete’ for backspacing. This mostly had to do with backspace and enter having other functions in most browsers. Please inform me of any bugs or weird behavior.

2 Likes

@imtoobose I totally love it. I looked at it and was like “Wow, that’s a good one!” Design-wise it is a very creative, “fresh” approach to the task. It is beautiful and original, but still immediately recognizable as a calculator.

A small tip: There are HTML entities (`&times;, &minus;` and so on) for the mathematical operators that look a lot better to typography enthusiasts like me than - and x. A little extra effort that would make your work stand out even more for the perfectionists out there.

Also, what about the background? Black on black is usually not exactly the best idea. What about a white or grayish wood pattern as a background image? Something that looks natural (such as wood) would probably make an interesting contrast with the “technical” looking calculator.

A minor issue: On a (simulated) 480×320 screen (landscape orientation), the display of the calculator is cut off completely, so the users can’t see what they are typing, nor the result. Not sure if fixing this is worth the effort though. It looks complicated.

1 Like

Wow, I wasn’t expecting such a detailed response for this. Thank you!

• I replaced the operators with uni-code characters as suggested, and they do look nicer.

• I’m not fond of images as backgrounds, but I did change it to a lighter color gradient (with a monotone as a fallback). I would love to hear how it looks now.

• As for the screen issue, I am aware, but unfortunately would require an inelegant @media enquiry or something clever. It’s probably because of absolute positioning + the transform translate trick for positioning. Perhaps I can make the container wider and shorter for certain configurations. I’ll look into this when I come back to fix the several gripes I have this project.

Again, thank for the feedback, and helping me improve this project!

1 Like

I don’t know. For me, orange is a “loud” color. I perceive it as distracting sometimes. Gray or beige is a typical color that I would choose as a background. But that is a cultural thing.
If you want an orange-colored world, so be it! Make your world orange, fine with me!

The retro design looks cool! Thumbs up.

1 Like

!!SPOILERS!!

I did not use eval(), so built out all the functionality of the operations. I think I may have overcomplicated the work of dealing with order of operations, devising several heady approaches I won’t get into before realizing a while loop search and splice seemed to be the simplest approach for my code. I’m particularly happy about focusing on building everything into an object module which may or may not have been wise, but something I’ve been studying more of.

There are still some issues I could consider improving, namely screen number run-off and keyboard functionality, but I’m pretty tired after fighting with the CSS for a day and night. Maybe something to come to later.

3 Likes